Virtual dom && diff algorithms (king)

1. What is a virtual dom that?

• VDOM referred to, it is an Object object model to simulate a real node structure dom

2. Use virtual dom basic flow

1. Acquiring data (ajax fetch)

2. Creating vdom

   • vdom origin?
     But our pages are generally very complex structure, then we use vdom dom to simulate the structure and found vdom the object model
     // too big, too long, so we thought if we could also be written in the js dom That's good label structure, so a combination of javascript // + xml come up with a new syntax sugar jsx, with jsx to simulate vdom

   	 <!-- vdom对象模型 -->
       var vdom = {
                   tag: 'div',
                   attr: {
                       className: 'box'
                   },
                   content: [{
                       tag: 'ul',
                       content: [{
                               tag: 'li',
                               content: data.name
                               }]
                       }]
               }
   

3. Analytical jsx (javascript + xml), by converting it to a render function vdom structure

4. The vdom rendered real dom // render function

5. Data changed

6. Use diff algorithms than twice vdom, generate patch objects

7. According to key the patch rendering objects (again using the render function) to change the structure of the page, and other places has not changed is without any modification of (virtual dom of the principle of inertia)

What 3. diff algorithm?

• diff algorithm is a comparison between the two files, and generates a patch of different objects at the two files (patch). Source diff algorithm back-end
  front-end to the diff algorithm applied to the virtual dom

After the end of 4. diff algorithms running, what return?

patch对象

5. How to apply it to the front diff algorithm of virtual dom?

• diff algorithm will vue virtual dom is placed patch.js file, use js to compare (vdom Object Model) objects two
• The patch according to key objects rendered to the change in the structure of the page, and other places has not changed is without any modification of (inert principle of virtual dom)
  One of the reasons is that vue First MVVM framework, Vue performance: Note vdom

Deepen: Vue vdom vs React vdom What's different?