Vue 【进阶】- diff 算法（2）, 【包含完整 patchNode】

前言

上一讲https://www.cnblogs.com/caijinghong/p/16879388.htmldiff 算法讲了：

1. 虚拟dom
2. 文件位置
3. seter 触发后的过程
4. 实现 render createElment 生成虚拟dom, 和转换成真实 dom
5. 实现了简单的 diff ，实现了 文本、标签、属性的更换。
6. 节点的比较还未实现, 也就是源码中的 patchNode 的方法，本次将复习 diff ，并实现该方法

本次学习流程

diff 简介

diff 算法可以将 两个虚拟dom 进行比较，他是一个精细化对比，实现dom的最小量更新

虚拟 dom

虚拟 dom 的 js 形式

const vDom = createElement(
  'ul', 
  {class:'list',style:'color:#efef;width:500px;height:300px;background-color:brown;'}, 
  [
    createElement('li', { class:'item', 'data-index': 0 }, [
      createElement('p', { class: 'text' }, ['第一个列表项'])
    ]),
    createElement('li', { class:'item', 'data-index': 1 }, [
      createElement('p', { class: 'text' }, [
        createElement('span', { class: 'title' }, ['第2个列表项'])
      ])
    ]),
    createElement('li', { class:'item', 'data-index': 2 }, [
      createElement('p', { class: 'text' }, ['第3个列表项'])
    ])
  ]
)

虚拟dom

真实dom