1. 前言

1. vue 中的虚拟 DOM,diff算法,大家都有所耳闻
2. 但是总感觉不那么透彻,所以看了几遍官网,简单整理如下
3. 后续发现有文章总结,但是在github上面,有些人可能访问不到,所以我就简单写下

---

2. 虚拟 DOM 是什么 what

1. 虚拟 DOM (Virtual DOM，简称 VDOM) 是一种编程概念，意为将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的 DOM 与之保持同步。
2. 这个概念是由 React 率先开拓，随后在许多不同的框架中都有不同的实现，当然也包括 Vue
3. 与其说虚拟 DOM 是一种具体的技术，不如说是一种模式，所以并没有一个标准的实现

---

3. diff 算法 是什么 what

1. 如果我们有两份虚拟 DOM 树，渲染器将会有比较地遍历它们，找出它们之间的区别，并应用这其中的变化到真实的 DOM 上。这个过程被称为更新 (patch)，又被称为“比对”(diffing) 或“协调”(reconciliation)。
2. 一个运行时渲染器将会遍历整个虚拟 DOM 树，并据此构建真实的 DOM 树。这个过程被称为挂载 (mount)。
3. 也就是说diff算法是在 挂载 的时候,对虚拟 DOM /新旧 VNode 进行比对的算法
4. 再具体diff 算法是一种通过同层的树节点进行比较的高效算法

---

4. 特点

1. 比较只会在同层级进行, 不会跨层级比较
2. 在diff比较的过程中，循环从两边向中间比较

5. 比较方式

1. diff整体策略为：深度优先，同层比较

   
   image.png

2. 比较的过程中，循环从两边向中间收拢

   
   image.png

---

6. 原理分析

1. 当数据发生改变时，set方法会调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图
2. 源码位置：src/core/vdom/patch.js
3. 主要是一个 function patch(oldVnode, vnode, hydrating, removeOnly) {}函数
4. function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {}
5. 源码挺多的也有分析原址

---

7. 小结

1. 当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
   通过isSameVnode进行判断，相同则调用patchVnode方法
2. patchVnode做了以下操作：
   2.1 找到对应的真实dom，称为el
   2.2 如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
   2.3 如果oldVnode有子节点而VNode没有，则删除el子节点
   2.4 如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
   如果两者都有子节点，则执行updateChildren函数比较子节点
3. updateChildren主要做了以下操作：
   3.1 设置新旧VNode的头尾指针
   3.2 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作

---

参考资料

官方虚拟 DOM
原址

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有错误,欢迎交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉