An understanding of the virtual DOM in Vue

Vue essentially takes an HTMl string as a template, converts the string template into an AST (abstract syntax tree), and then into the virtual DOM:

Template = > AST

AST => virtual DOM

Virtual DOM => real DOM

Of these, the most performance consuming is string parsing: template conversion to AST

Vue performs the following operations when data changes:

1. The Html tag displayed on the page is a real DOM, with a virtual DOM corresponding to it in memory; There is a one-to-one correspondence between the virtual DOm and the PAGE DOm

First, a new virtual DOM (render) is generated from the AST and the data. Each time a data is changed, a new virtual DOM will be generated.

3. Then compare the new virtual DOM with the virtual DOM in the page (diff algorithm is used here), and update the different data to the virtual DOM of the page if it is found to be different from the virtual DOM of the page; (update)

4. With the operation of updating, the virtual DOM on the page will also be updated to the real DOM, thus completing the data rendering and updating operation!