虚拟DOM和Diff算法的理解

一、虚拟dom

一、什么是虚拟dom

（Virtual DOM 的简写为 vdom，它是实现 Vue 和 React 的重要基石。）

虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象

在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。

---

如果组件内有响应的数据，数据发生改变的时候 render 函数会生成一个新的虚拟 dom 新的虚拟 dom 树和旧的虚拟 dom 树进行对比，找到要要修改的虚拟 dom 的部分，去修改相对应部分的真实 dom

//虚拟 DOM 节点 目前是一个规范化的数据结构
{
  tag: 'div',
  data: {
    style: {
      backgroundColor: 'blue'
    },
  },
  children: {
    tag: null,
    data: null,
    children: '虚拟dom'
  }
}

//最终可以转化为 DOM 节点，等价于如下所示 DOM 元素：
<div style="background-color: blue">
  虚拟dom
</div>

---

二、为什么要引入虚拟 DOM？

1. 增加灵活性，把原先的过程拆分为标准化和渲染两步之后，标准化的虚拟 DOM 数据根据需要进行渲染就可以适应更多平台了。
2. 效率更高，利用标准化的数据可以实现按需更新，支持更高效的更新渲染

---

三、DOM和虚拟DOM的区别

1. DOM：浏览器中，提供的概念；用JS对象，表示页面上的元素，并提供了操作元素的API
2. 虚拟DOM：是框架中的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系
     本质： 用JS对象，来模拟DOM元素和嵌套关系
     目的：就是为了实现页面元素的高效更新

---

二、diff算法

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

diff 算法的步骤

1. js 对象表示真实的 dom 结构，就是我们说的生成一个虚拟 dom，再用虚拟 dom 构建一个真的 dom 树，放到页面中。
2. 状态改变的时候生成一个新的虚拟 dom 与旧的进行对比，这个对比的过程就是 diff 算法，通过 patch 对象记录差异
3. 把记录的差异用在第一个虚拟 dom 构建的真实的 dom 上，视图就更新了

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

---