The process of converting a template into a view
In the underlying implementation, Vue will compile the template into a rendering function. Of course, we can also write the rendering function directly without writing the template to get better control.
Rendering function : The rendering function is used to generate Virtual DOM;
VNode virtual node : vnode can be understood as a description object of dom node, which describes how to create a real DOM node;
patch (patching algorithm) : the core of virtual DOM In part, it can render vnode into real DOM. This process compares the differences between the new and old virtual nodes, and then finds the nodes that need to be updated according to the comparison results. Its actual role is to modify the existing DOM to achieve the purpose of updating the view;
Virtual DOM
Virtual DOM uses a JS object to describe the node (VNode) of the dom. This object contains at least three attributes of tag name, attribute and child element. It is an abstraction of the real DOM, and finally this object can be transformed into a real dom through a series of operations.
The specific steps are
Virtual DOM is essentially a cache between JS and DOM
The role of Virtual DOM
The ultimate goal of virtual DOM is to render virtual nodes onto the view, but if you directly use virtual nodes to overwrite old nodes, there will be many unnecessary DOM operations. For example, there are many li tags under one ul tag, and only one li has changed. In this case, if a new ul is used to replace the old ul, performance waste is caused by these unnecessary DOM operations.
In order to avoid unnecessary DOM operations, the virtual DOM compares the virtual node with the old virtual node (oldVnode) used in the previous rendering of the view during the process of mapping the virtual node to the view, and finds the node that really needs to be updated for the DOM Operation, so as to avoid operating other DOM without modification.
In fact, the virtual DOM does two things in Vue.js:
provide the virtual node vnode corresponding to the real DOM node;
compare the virtual node vnode with the old virtual node oldVnode, and then update the view;
Virtual DOM's diff algorithm
Recursively perform diff of vnodes at the same level, and finally update the entire DOM tree
step:
Use JavaScript object structure to represent the structure of the DOM tree; then use this tree to build a real DOM tree and insert it into the document;
when the state changes, reconstruct a new object tree. Then compare the new tree with the old tree and
record the difference between the two trees; apply the recorded difference to the real DOM tree constructed, and the view is updated;
Advantages of Virtual DOM
Cross-platform advantages : Because Virtual DOM is based on JavaScript objects and does not depend on the real platform environment, it has the ability of cross-platform, such as browser platform, Weex, Node, etc .;
Improve efficiency : The operation of DOM is slow, and the efficiency of js operation is high, so placing the DOM comparison operation on the JS layer can improve efficiency;
Improve rendering performance : Through the core of patch ---- diff algorithm, find the nodes that need to be updated in the DOM this time to update, and the others are not updated. For example, if you modify a model 100 times, from 1 to 100, then with the Virtual DOM cache, only the last modification will be patched to the view.
nextTick
this . $ nextTick (() => { // operation ... })
1 The DOM operations performed by the created () hook function of the Vue lifecycle must be placed in the callback function of Vue.nextTick ();
2 When you want to do something based on the new dom after changing the data of the DOM element in the project, a series of js operations on the new DOM need to be put into the callback function of Vue.nextTick ();
3 When using a third-party plug-in, if you want to re-apply the plug-in when some of the dom generated by vue dynamically changes, this method will also be used;
Change data sometimes not updated
1 vue implements a two-way data binding process: when you pass an ordinary JavaScript object to the data option of a Vue instance, Vue will traverse all the properties of this object and use Object.defineProperty () to convert all these properties to getter / setter. Each component instance has a corresponding watcher instance object, which will record the attribute as a dependency during the component rendering process, and then when the setter of the dependency is called, the watcher will be notified to recalculate, so that its associated component can be updated . Realize the change of data data and update the view view.
var vm = new Vue ({ data: { a: 1; // vm.a is responsive } }) vm.b = 2; // vm.b is non-responsive
2 The dom is not updated because the set method of Object.defineproperty () is not triggered after the data is changed, that is, no data update is detected. This problem occurs in the following situations:
When you use the index to directly set an item in the array, for example: this.items [indexOfItem] = newValue;
When you modify the length of the array, for example: this.items.length = newLength;
The push, splice and other methods of the array will not update the dom;
Modifications inside the object:
data () { return { student: { name: '' }, teach: [ "李磊" ] } } // The following operations will not trigger the view update this .student.name = "XXX";
Solution:
1 Use set:
this . $ set ('object name', key, value); // object writing this . $ set ( this .teach, 0, "Han Meimei"); // array writing
2 Use deep
watch: { student: { handler: (n, o) => { // logical processing }, deep: true } }
3 Change the address of the original object or array
this.obj = Object.assign({},this.obj,{"sex","man"});
Virtual DOM update dom mechanism
Original: https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html