Online search to the data, about the virtual DOM of the DIff belt and over, about the virtual DOM on the DIff belt and over, and can not intuitively feel the effect of diff, so…

I have collected some information to implement both of them, including the virtual DOM implementation reference:

  1. Create your own virtual DOM to understand it (Part 1)
  2. Create your own virtual DOM to understand it (Part 2)

Diff algorithm implementation reference:

  1. Analysis of DIff algorithm of Vue2.0

The effect is as follows

  • The initial value of the list to render
list = ['a1'.'b2'.'c3'.'d4'.'e5']
Copy the code
  • The renderings

  • Two seconds later it changes to zero
list = ['a1'.'d4'.'b2'.'c3'.'e5'.'f6']
Copy the code
  • The diff effect, green, is the DOM result of the change

  • Five seconds later it changes to zero
list = ['e5'.'d4'.'f6'.'c3'.'a1'.'b2']
Copy the code
  • The diff effect, green, is the DOM result of the change

The warehouse address

Click and I jump to the warehouse address

or

Github.com/xubaifuCode…

The last

Welcome fork back to make it look like he likes