diff算法
# 一、diff算法
功能：提升性能
虚拟dom ===》其实就是数据（ 把dom数据化 ）
虚拟DOM，描述元素和元素之间的关系，创建一个JS对象 如果组件内有响应的数据，数据发生改变的时候，render函数会生成一个新的虚拟DOM，这个新的虚拟DOM会和旧的虚拟DOM进行比对，找到需要修改的虚拟DOM内容，然后去对应的真实DOM中修改 diff算法就是虚拟DOM的比对时用的，返回一个patch对象，这个对象的作用就是存储两个节点不同的地方，最后用patch里记录的信息进行更新真实DOM 步骤： 1.JS对象表示真实的DOM结构，要生成一个虚拟DOM，再用虚拟DOM构建一个真实DOM树，渲染到页面 2.状态改变生成新的虚拟DOM，跟就得虚拟DOM进行比对，这个比对的过程就是DIFF算法，利用patch记录差异 3.把记录的差异用在第一个虚拟DOM生成的真实DOM上，视图就更新了。
# 主流：snabbdom、virtual-dom
snabbdom：https://www.npmjs.com/package/snabbdom
# 1.1 搭建环境
npm init -y
cnpm install webpack@5 webpack-cli@3 webpack-dev-server@3 -S
cnpm install snabbdom -S
新建webpack.config.js
配置webpack.config.js
# 1.2 虚拟节点 和 真实节点
虚拟节点：
{
children: undefined
data: {}
elm: h1
key: undefined
sel: "h1"
text: "你好h1"
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
真实节点：
<h2>你好</h2>
1
# 1.3 新老节点替换的规则
1、如果新老节点不是同一个节点名称，那么就暴力删除旧的节点，创建插入新的节点。
2、只能同级比较，不能跨层比较。如果跨层那么就暴力删除旧的节点，创建插入新的节点。
3、如果是相同节点，又分为很多情况
3.1 新节点有没有children
如果新的节点没有children，那就证明新节点是文本，那直接把旧的替换成新的文本
3.2 新节点有children
新的有children，旧的也有children ===》就是diff算法的核心了【3.3】
新的有children，旧的没有 ===》创建元素添加（把旧的内容删除清空掉，增加新的）
1
2
3
4
5
2
3
4
5
3.3 diff算法的核心（最复杂的情况）
1、 旧前 和 新前
匹配：旧前的指针++ 、 新前的指针++
2、 旧后 和 新后
匹配：旧后的指针-- 、 新后的指针--
3、 旧前 和 新后
匹配：旧前的指针++ 、 新后的指针--
4、 旧后 和 新前
匹配：旧后的指针-- 、 新前的指针++
5、 以上都不满足条件 ===》查找
新的指针++，新的添加到页面上并且新在旧的种有，要给旧的复制成undefined
6、 创建或者删除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
***注意：如果要提升性能，一定要加入key，key是唯一标示，在更改前后，确认是不是同一个节点。