Experience and skills sharing in vue development

This series records some of the experiences and skills I have summarized in a year of Vue development.

Performance Improvement Using Object.freeze()

Object.freeze() is an ES5A new feature has been added that can freeze an object to prevent the object from being modified.

vue 1.0.18+it provides support. For the objects that are frozen using freeze in data or vuex, Vue will not perform getter and setter conversion.

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

Furthermore, Object.freeze() freezes the values, and you can still replace the reference of the variable. For example:

<p v-for="item in list">{{ item.value }}</p>

new Vue({
 data: {
 // Vue does not bind getter and setter to the object in the list
 list: Object.freeze([
  { value: 1 },
  { value: 2 }
 ])
 },
 created () {
 // The interface will not respond
 this.list[0].value = 100;
 // The following two methods will cause the interface to respond
 this.list = [
  { value: 100 },
  { value: 200 }
 ]);
 this.list = Object.freeze([
  { value: 100 },
  { value: 200 }
 ]);
 }
})

The vue document does not mention this feature, but it is a very practical practice, which can be used for large data display, and Object.freeze can improve performance.

Use vm.$compile to compile dom

$compile function can be used to manually call the vue way to compile dom. This function can be very useful when you need to handle html generated by a jQuery plugin or returned from the server. However, note that this is a private api, which may change at any time, and this approach goes against the idea of vue. Only use it when there is no alternative.

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, which can be reused multiple times v-dom with the same id in the for loop. If your data does not have a unique id, you can also choose to use track-by="$index", but it must be noted that there are 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]] can be accessed through F12observed, demo-1where the dom is all deleted, and then the list is looped to generate dom, and the demo-2It will not delete the dom, but only modify their text cells to4,5,6. This is the track-effect of by="$index", which is reused twice v-dom with the same $index in the for loop.

This is a good optimization method, but it is not applicable to all scenarios, such as when form controls or subcomponents are included in loops, as the dom will not be deleted and regenerated, which will cause the v-for, the value of the original form control will not change, you can see this example:https://jsfiddle.net/jysboza9/1/

Do not overuse Directive

There is a saying on the Internet that suggests that all DOM operations should be encapsulated in instructions. In actual development, I think it is not necessary to follow this dogma. Whether to use instructions should depend on what function you are implementing, not whether you are operating on the DOM. For example, if you want to use vue to encapsulate a jQuery plugin, let's see which encapsulation method is better below:

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

I personally think that the first method is undoubtedly better. Datepicker is an independent component, and you do not need to care about whether it has operated on the DOM or whether it encapsulates jQuery plugins.

When should we use instructions? Let's take a look at the instructions provided by the browser natively:

<a title="[1#]">/a>
<p title="[1#]">/p>
<div title="[1#]">/div>

The title attribute provides tooltip functionality for different tags, which is an instruction. An instruction should represent an independent function and provide the same function for different tags and components.

To be continued...

This article has been organized into the 'Vue.js Front-end Component Learning Tutorial', welcome to learn and read.

That's all for this article. I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)