Vue development experience and skills sharing

This series records some of the experiences and techniques I summarized during one year of Vue development.

Use Object.freeze() to improve performance

Object.freeze() is a new feature of ES5, which can freeze an object to prevent the object from being modified.

vue 1.0.18+ provides support for it. For objects frozen using freeze in data or vuex, vue will not convert getters and setters.

If you have a huge array or Object, and you are sure that the data will not be modified, using Object.freeze() can greatly improve performance. In my actual development, this improvement is about 5 to 10 times, and the multiple increases with the amount of data.

And, Object.freeze() freezes the value, you can still replace the variable reference. For example:

{{ item.value }}

new Vue({
 data: {
 // vue不会对list里的object做getter、setter绑定
 list: Object.freeze([
  { value: 1 },
  { value: 2 }
 ])
 },
 created () {
 // 界面不会有响应
 this.list[0].value = 100;
 
 // 下面两种做法，界面都会响应
 this.list = [
  { value: 100 },
  { value: 200 }
 ];
 this.list = Object.freeze([
  { value: 100 },
  { value: 200 }
 ]);
 }
})

vue’s documentation does not write this feature, but this This is a very practical approach. For big data that is purely for display, Object.freeze can be used to improve performance.

Use vm.$compile to compile dom

The $compile function can be used to manually call vue to compile dom. This function can come in handy when you need to process the html generated by a jQuery plug-in or the html returned by the server. But note that this is a private API and may change at any time, and this approach goes against the philosophy of Vue. Use only as a last resort.

new Vue({
 data: {
 value: 'demo'
 },
 created () {
 let dom = document.createElement('div');
 dom.innerHTML = '{{ value }}';
 this.$compile(dom);
 }
})

Reasonable use of track-by="$index"

track-by is an optimization method provided by vue for loops, which can reuse the dom with the same ID in v-for multiple times. If your data does not have a unique id, you can also choose to use track-by="$index", but you must be aware of some side effects.

For example:

new Vue({
 data: {
 list: [1, 2, 3]
 }
})
<div id="demo-1">
 <p v-for="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, execute this.list = [4, 5, 6], you can observe through F12 that all the dom in demo-1 is deleted, and then the list is re-circulated to generate the dom , and demo-2 will not delete the dom, but just change their text grid to 4, 5, 6. This is the effect of track-by="$index", which reuses the dom with the same $index in v-for twice.

This is a good optimization method, but it is not applicable to all scenarios. For example, when the loop contains form controls or subcomponents, since the dom will not be deleted and regenerated, v-for will be executed for the second time. The value of the original form control will not change. You can see this example: https://jsfiddle.net/jysboza9/1/

Don’t abuse Directive

There is a saying on the Internet that all DOM operations should be encapsulated in instructions. In actual development, I think this dogma should not be followed. Whether to use instructions should depend on what function you implement, not whether the dom is manipulated. For example, if you want to use vue to encapsulate a jQuery plug-in, let's see which of the following encapsulation methods is better:

<!-- component -->
<datepicker></datepicker>
<!-- directive -->
<div v-datepicker="{options}"></div>

Personally, I think the first method is undoubtedly better. Datepicker is an independent component. You don't You need to care about whether it operates DOM internally and whether it encapsulates the jQuery plug-in.

So when to use commands? Let’s take a look at the commands provided natively by the browser:

<a title="这是一个指令"></a>
<p title="这是一个指令"></p>
<div title="这是一个指令"></div>

The title attribute provides tooltip functions for different tags. This is a command. A directive should represent an independent function that can provide the same functionality to different tags and components.