Vue 虚拟 DOM 的原理

什么是虚拟 DOM

虚拟 DOM 是 React 和 Vue 等一些框架用于提高性能和开发效率的一种技术手段。虚拟 DOM 是一个以 JavaScript 对象为基础的轻量的 DOM 形式，它可以高效地描述整个页面的结构以及每个节点的属性，而不管是首次渲染还是更新操作，都是与虚拟 DOM 进行比对，然后再将差异更新到页面上。使用虚拟 DOM 可以避免使用原生的 DOM 操作，提高渲染效率。

虚拟 DOM 的原理

当需要更新视图时，Vue 的虚拟 DOM 会创建一个新的虚拟 DOM 树，然后与旧的虚拟 DOM 树进行比对，发现差异并更新视图。整个过程中传输的是虚拟 DOM 而不是真实的 DOM，只有在最后一步更新到真实的 DOM 上。
Vue 的虚拟 DOM 会把真实的 DOM 抽象成树形结构，每个 DOM 节点都抽象成一个对象。在需要更新时，新的虚拟 DOM 会与旧的虚拟 DOM 进行 diff 算法比较，找出两者之间的差异。
Vue 的虚拟 DOM 针对不同的节点类型分别进行比较，对于元素节点则比较节点名和属性，对于文本节点则比较节点的文本值。
在比较时，如果在新的虚拟 DOM 树中发现了新的节点，那么就直接在真实 DOM 树中创建新的节点。如果节点已经存在，但是节点类型或者属性发生了变化，那么就需要对真实 DOM 树中对应的节点进行更新。如果新的虚拟 DOM 树中不存在该节点，那么就删除真实 DOM 树中对应的节点。

虚拟 DOM 示例

下面通过两个示例，来说明Vue虚拟DOM的原理。

示例一：添加或删除节点

<template>
  <div>
    <h1>新闻列表</h1>
    <ul>
      <li v-for="news in newsList">{{ news.title }}</li>
    </ul>
    <button @click="addNews">添加新闻</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: [
        { title: '新闻一', content: '这是新闻一的内容' },
        { title: '新闻二', content: '这是新闻二的内容' },
        { title: '新闻三', content: '这是新闻三的内容' }
      ]
    }
  },
  methods: {
    addNews() {
      this.newsList.push({ title: '新闻四', content: '这是新闻四的内容' })
    }
  }
}
</script>

以上代码中，我们在一个 div 中渲染了一个标题和一个新闻列表，同时还有一个“添加新闻”的按钮。当我们点击这个按钮时，会执行 addNews 方法，将一条新闻添加到 newsList 中。这个时候，Vue 的虚拟 DOM 会解析最新的模版，发现新斥革了一条新闻，对比旧的虚拟 DOM 树，发现新增了一个 li 节点，那么 Vue 就会直接在真实的 DOM 树中创建对应的节点，而不是重新渲染整个列表。这个时候，由于只是添加了一个节点，那么实际上比对的成本非常小，因此差异比较可以非常快速地完成。

同样地，当我们在页面上操作删除节点时，同样会执行虚拟 DOM 进行比对，发现需要删除一个节点，那么就删除对应的真实 DOM 节点。

示例二：更新属性

<template>
  <div>
    <img :src="imgUrl" alt="图片">
    <button @click="changeUrl">更换图片地址</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: 'https://picsum.photos/200/300'
    }
  },
  methods: {
    changeUrl() {
      if (Math.random() > 0.5) {
        this.imgUrl = 'https://via.placeholder.com/200x300'
      } else {
        this.imgUrl = 'https://picsum.photos/200/300'
      }
    }
  }
}
</script>

以上代码中我们定义了一个图片和一个“更换图片地址”的按钮。当我们点击这个按钮时，会执行 changeUrl 方法，随机切换两个不同的图片地址。这个时候，如果我们使用 if 来手动改变图片的 src 属性，那么每次改变都会使整个页面重新渲染。但是由于 Vue 的虚拟 DOM 以 JavaScript 对象的方式来描述页面中的属性等信息，所以在 update 阶段，Vue 可以快速通过比对虚拟 DOM 差异，从而最小化重绘和重排的代价，达到了性能优化的效果。