what is it
In vue.js, Vnode is a class that can generate different types of vnode instances, and different types of vnodes represent different types of real DOM elements. The full name of VNode is Virtual Node, which is a virtual node; in fact, whether it is a component or an element, they are finally represented in Vue as VNodes. We can understand vnode as a DOM element of the JavaScript object version. The process of rendering the view is to create a vnode first, then use the vnode to generate real DOM elements, and finally insert it into the page rendering view.
advantage?
Strong compatibility, not affected by the execution environment. Because Vnode is a JS object, regardless of node or browser, it can be operated in a unified manner, thus obtaining the capabilities of server-side rendering, native rendering, and handwritten rendering functions. Since Vue.js uses virtual DOM for components to update views, when attributes occur When changing, the entire component needs to be re-rendered, but not all DOM nodes in the component need to be updated, so the vnode is cached and the currently newly generated vnode is compared with the cached vnode, and only the part that needs to be updated Perform DOM operations. Can improve a lot of performance.
What is virtual DOM?
Virtual dom uses js to describe the relationship between elements, uses js objects to represent the real DOM tree structure, and creates a virtual DOM object. The render function will be called when the component is rendered. This function will generate a virtual dom, and then generate a real dom based on the virtual dom, and then the real dom will be mounted to our page. It can effectively avoid frequent updates of the real DOM number, reduce multiple redraws and reflows, and improve performance.
What is the principle of the diff algorithm?
When the DOM is updated, Vue does not directly update the real DOM, but first obtains the new virtual DOM, then compares it with the old virtual DOM before the update, calculates the difference, and then performs differential updates to avoid large-scale manipulation of the DOM Waste of performance.
The essence of the diff algorithm is to find out the difference between two objects, with the aim of achieving node reuse as much as possible.
If you are interested, you can read more information, thank you