虚拟dom

 1.虚拟 dom

虚拟 dom 是**利用 js 描述元素与元素的关系**，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象
由于**在浏览器中操作 DOM 是很昂贵的**。频繁的操作 DOM，会产⽣⼀定的性能问题.
**在组件渲染的时候`会调用 render 函数`**，这个函数**会生成一个虚拟 dom**，再**根据这个虚拟 dom 生成真实的 dom**，然后这个**真实的 dom 会挂载到我们的页面中**。

如果**只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高** 因为 都要渲染成真实的 dom
如果组件内有响应的数据，**数据发生改变的时候 render 函数会生成一个新的虚拟 dom 新的虚拟 dom 树和旧的虚拟 dom 树进行对比，找到要要修改的虚拟 dom 的部分，去修改相对应部分的真实 dom**

# 2.diff 算法

diff 算法**就是对虚拟 dom 进行对比**，并**返回一个 patch 对象**，这个对象的作用是存储两个节点不同的地方，最后**用 patch 里记录的信息去局部更新真实的 dom**

## diff 算法的步骤

1.js 对象表示真实的 dom 结构，就是我们说的生成一个虚拟 dom，再用虚拟 dom 构建一个真的 dom 树，放到页面中。 

2.状态改变的时候生成一个新的虚拟 dom 跟旧的进行对比，这个对比的过程就是 diff 算法，通过 patch 对象记录差异 

3.把记录的差异用在第一个虚拟 dom 构建的真实的 dom 上，视图就更新了

**Vue 的 diff 算法是平级⽐较，不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式+双指针⽅式⽐较**