为了直观的感受diff算法,我把虚拟DOM和diff一起实现了

560 阅读1分钟

网上搜到的资料里,讲diff的把虚拟DOM一带而过,讲虚拟DOM的就把diff一带而过,而且没法直观的感受diff的效果,于是...

我搜集了一些资料,把它俩一并实现了,其中虚拟DOM的实现参考:

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

diff算法的实现参考:

  1. Vue2.0的diff算法分析

实现效果如下

  • 要渲染的列表的初始值
list = ['a1', 'b2', 'c3', 'd4', 'e5']
  • 渲染结果

result-1

  • 2秒后改变为
list = ['a1', 'd4', 'b2', 'c3', 'e5', 'f6']
  • diff效果,绿色的为改变的DOM结果

result-2

  • 5秒后改变为
list = ['e5', 'd4', 'f6', 'c3', 'a1', 'b2']
  • diff效果,绿色的为改变的DOM结果

result-3

仓库地址

点我跳到仓库地址

github.com/xubaifuCode…

最后

欢迎 fork 回去改成自己喜欢的样子~