虚拟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.只有老节点有子节点时,就删除。