vue-diff算法-开篇

diff算法

1. diff算法概念

功能：提升性能

概括：diff全程difference，意为差异，顾名思义就是寻找不同。寻找不同这个过程需要一个本体和参照体，寻找不同的过程就是diff算法的本质。

2. 衍生–虚拟dom

在今天，前端领域，我们常说的diff算法，他的本体和参照体都是虚拟dom，那么这里又引导出来一个新的问题，什么是虚拟dom？

2.1 概念

虚拟dom本质上就是一个对象，该对象描述了一个UI节点所对应的一些必要信息

<div class="hola-text">你好</div>

const virtualNode = {
    type:"div",
    content:"你好"，
    props:{
        class:["hola-text"],
    }
}

=》虚拟DOM

在前端虚拟dom的实现都是对象，但是实际上不止对象可以表示。

2.2 为什么需要虚拟dom

虚拟dom重点是收集一次tick中dom的更新，在一次事件循环中统一执行，减少浏览器多进程之间的开销

const div = {type:"div"}

所以并不是真实DOM的crud大，而是在比对的时候虚拟dom比真实dom更好，crud是固定的。

diff -》 虚拟dom -》 真实dom -》 render

diff算法需要一个遍历，如果直接给真实dom比较，那么就完蛋了，太多成员要对比了！

虚拟dom也要转换成真实dom，也要crud的，这个性能损耗是固定的

3. diff算法本质

回到正题，diff算法本质上就是对虚拟dom的本体和参照体进行一个对比，或者说虚拟dom树的差异（虚拟dom树是由虚拟dom以树形结构组合在一起，就叫虚拟dom树），从而提升整体性能。

4. 主流的diff算法

snabbdom和virtual-dom

5. snabbdom搭建

npm init -y  //初始化
npm install webpack@5 webpack-cli@3 webpack-dev-server@3 -S
cnpm install snabbdom -S 

新建-》配置webpack.config.js