Vue渲染执行流程（二）：从VDOM到真实DOM

2024-01-03 17:22:49

Vue 渲染执行流程：将 VDOM 转化为真实 DOM

Vue.js 是一款流行的 JavaScript 框架，用于构建响应式用户界面。它的核心功能之一就是高效的渲染执行流程，它使 Vue 应用程序能够动态更新 UI，同时保持高性能。

首次渲染

当 Vue 首次加载一个组件时，它会进行以下步骤：

创建 DOM 节点：
Vue 根据虚拟 DOM（VDOM）中的元素类型创建相应的 DOM 节点。这包括为元素设置属性和事件侦听器，以及为文本节点设置文本内容。
插入 DOM 节点：
Vue 将创建的 DOM 节点插入到父元素中。插入的位置由 VDOM 节点的父节点和键属性决定。

例如，对于以下 VDOM：

<div>
  <h1>Vue 渲染执行流程</h1>
  <p>这是一篇关于 Vue 渲染执行流程的文章</p>
</div>

Vue 将创建以下 DOM 结构：

<div>
  <h1>Vue 渲染执行流程</h1>
  <p>这是一篇关于 Vue 渲染执行流程的文章</p>
</div>

更新渲染

当组件中的数据发生变化时，Vue 会触发更新渲染流程。此流程将比较新旧 VDOM，并仅更新发生变化的部分。

比较 VDOM：
Vue 使用差异算法（一种比较算法）比较新旧 VDOM，找出需要更新的节点。
更新 DOM：
对于需要更新的节点，Vue 执行以下操作：
- 属性更新： 如果节点的属性发生变化，Vue 会更新 DOM 节点的属性。
- 子节点更新： 如果节点的子节点发生变化，Vue 会递归调用更新渲染流程，对子节点进行更新。
- 替换节点： 如果节点的类型发生变化，或者节点的键属性发生变化，Vue 会替换整个 DOM 节点。
清理 DOM：
Vue 会移除所有在 VDOM 中不存在的 DOM 节点。

代码示例

让我们通过一个代码示例来演示更新渲染流程：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue 渲染执行流程',
      content: '这是一篇关于 Vue 渲染执行流程的文章'
    }
  },
  methods: {
    changeTitle() {
      this.title = '更新后的标题'
    }
  }
}
</script>