#每日一题# Vue的DOM-Diff

首先，Vue的diff过程也称作patch(打补丁)过程，意味着vue的节点更新是为旧的那份节点做修补，将新的节点更新上去。这里我们定义两个概念：oldVNode就是数据更新之前视图对应的虚拟dom节点，newVNode就是数据更新之后视图对应的虚拟dom节点。
要理解diff过程，我们只要抓住最核心的理念：diff过程就是以newVNode为基准，找出oldVNode中跟newVNode不一致的地方，将oldVNode变为跟newVNode一致的过程。
那么思路就很简单了：
1. 如果newVNode中存在，而oldVNode中不存在的节点，就创建这些节点并且插入到oldVNode中；
2. 如果newVNode中不存在，而oldVNode中存在的节点，就删除oldVNode中的这些节点；
3. 如果newVNode和oldVNode同时存在，就以newVNode的为基准，将oldVNode中的节点更新；
总结一下上面的过程，无非就是：创建节点、删除节点和更新节点。注意上面三点都有个共同点，就是只更新oldVNode节点。
展开
评论
相关推荐