虚拟DOM diff原理

好文:深入Vue2.x的虚拟DOM diff原理

简书好文手画图:https://www.jianshu.com/p/22f82cc60285

好博客:https://yuchengkai.cn/docs/zh/frontend/framework.html#virtual-dom

虚拟DOM:存储了对应dom的一些重要参数。

比较只会在统计比较,不会垮层级比较。

patch(oldvnode,vnode);

不值得比较时:

取旧节点的父节点,将新节点v 映射成真实dom,插入父节点中,移除旧v。返回新v(区别是新v的el属性指向了真实dom,之前的新v是没有真实dom的)

值得比较时:

1.oldv === v,一致,无变化

2.文本节点的比较:要修改textContext,旧的改为新的。

3.旧节点和新节点都有子节点,且不相同时,会继续比较子节点(updateChildren)

4.只有新节点有子节点,就创建子节点添加到dom上。

5.只有老节点有子节点时,就删除。

updateChildren

Table of Contents