concept:
Virtual DOM is actually using a native JS object to describe a DOM node. In fact, it is just an abstraction of the real DOM. Finally, this tree can be mapped to the real environment through a series of operations.
It is equivalent to making a cache between js and DOM, using patch (diff algorithm) to compare the old and new virtual DOM records to an object and update it on demand, and finally create a real DOM
Virtual dom principle process:
Template ==> rendering function ==> virtual DOM tree ==> real DOM
Vuejs converts the template (template) into a rendering function (render) by compiling, and executing the rendering function can get a virtual node tree
When operating on the Model, it will trigger the Watcher object in the corresponding Dep. The Watcher object will call the corresponding update to modify the view.
The realization principle of virtual DOM mainly includes the following three parts:
Use JavaScript objects to simulate the real DOM tree and abstract the real DOM;
diff algorithm — compare the differences between two virtual DOM trees;
The pach algorithm — applies the difference of two virtual DOM objects to the real DOM tree.