Virtual DOM 和 diff 算法实现

如何理解本仓库的代码

• 阅读以下两篇文章了解Virtual 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. aooy/blog#2

构建

npm install
npm run build

运行

构建成功之后，在 dist 会生成一个 bundle.js 文件，此时在浏览器打开 文件夹中的index.html。

即将看到效果

为了确确实实看到diff的效果，还需要一些设置。

F12 -> 开发者工具 -> More(开发者工具右上角 ... 图标) -> More tools -> Rendering

把 Paint flashing 勾上~

完成设置之后，按下 F5 刷新页面

效果如下

• 初始值

list = ['a1', 'b2', 'c3', 'd4', 'e5']

• 2秒后改变为

list = ['a1', 'd4', 'b2', 'c3', 'e5', 'f6']

• 5秒后改变为

list = ['e5', 'd4', 'f6', 'c3', 'a1', 'b2']

最后

欢迎 fork 回去修改成自定义的DOM玩~