Vue develop experience and skills to share _javascript skills

This series records some of the experiences and techniques I've summed up in a year of Vue development.

Improve performance with Object.freeze ()

Object.freeze () is a new feature of ES5 that can freeze an object to prevent it from being modified.

Vue 1.0.18+ provides support for objects that are frozen in data or Vuex using freeze, and Vue does not convert getter and setter.

If you have a huge array or object and are confident that the data will not be modified, using Object.freeze () can greatly improve performance. In my actual development, this elevation is about 5~10 times, and multiples increase with the amount of data.

Also, Object.freeze () freezes the value, and you can still replace the reference to the variable. As an example:

<p v-for= "Item in List" >{{Item.value}}</p>

The new Vue {
 data: {
 //Vue does not have getter, setter-bound list:Object.freeze for Object in List
 ([
  {value:1},
  { Value:2}
 ])
 },
 created () {
 //interface will not respond
 This.list[0].value =;

 The following two methods, the interface will respond
 this.list = [
  {value:100},
  {value:200}
 ];
 This.list = Object.freeze ([
  {value:100},
  {value:200}
 ]);
 }

Vue's documents do not write this feature, but this is a very practical practice, for pure display of large data, can use Object.freeze to improve performance.

Using VMS. $compile compiling DOM

$compile function can be used to manually invoke Vue to compile the DOM. This function can come in handy when you need to process HTML generated by a jquery plugin or the return of the server. But note that this is a proprietary API that is likely to change at any time, and this practice violates the Vue idea. Used only when the last resort.

New Vue ({
 data: {
 value: ' Demo '
 },
 created () {let
 dom = document.createelement (' div ');
 dom.innerhtml = ' {{value}} ';
 this. $compile (DOM);
 }
)

Rational use of track-by= "$index"

Track-by is an optimization method Vue provides for loops that can be reused in multiple v-for with the same ID as the DOM. If your data does not have a unique ID, you can also choose to use the track-by= "$index", but you must pay attention to some side effects.

As an example:

New Vue ({
 data: {
 list: [1, 2, 3]
 }
})
<div id= "demo-1" >
 <p "item in List" >{{Item}}</p>
</div>
<div id= "demo-2" >
 <p v-for= "item in List" Track-by= "$ Index ">{{Item}}</p>
</div>

At this time the execution this.list = [4, 5, 6], can be observed by F12, demo-1 in the DOM is all deleted, and then cycle the list to generate DOM, and demo-2 will not delete the DOM, just to change their text lattice to 4,5,6. This is the effect of the track-by= "$index", reused two times v-for $index the same DOM.

This is a good optimization method, but not all scenarios are applicable, such as when the loop contains form controls or subassemblies, because the DOM is not deleted and regenerated, causing the second execution of the v-for, the original form control's value will not change, you can see this example:https:// jsfiddle.net/jysboza9/1/

Don't abuse directive

There is a saying on the web that DOM operations should be encapsulated in instructions. In actual development, I do not think that this dogma should be followed. Whether or not you use instructions should look at what you are implementing, not whether you're manipulating the DOM. For example, you want to encapsulate a jquery plugin with Vue to see which of the following encapsulation methods are better:

<!--component-->
<datepicker></datepicker>
<!--directive-->
<div V-datepicker= "{Options}" ></div>

Personally think the first method is better, DatePicker is a stand-alone component, you don't need to care whether or not the DOM is being manipulated internally, and whether the jquery plugin is encapsulated.

So when do we use instructions? Take a look at the native instructions provided by the browser:

<a title= "This is an instruction" ></a>
<p title= "This is an instruction" ></p>
<div title= "This is an instruction" ></div >

The Title property provides ToolTip functionality for different tags, which is an instruction. An instruction should represent a separate function that can provide the same functionality for different tags and components.

To be Continued ...

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.