浅谈vue首次渲染全过程

当浏览器加载 Vue 应用时，Vue 应用会随即进行一系列的初始化操作，最后通过 mount() 方法将 Vue 实例挂载到文档区域中。下面是Vue首次渲染的完整过程：

准备阶段

创建Vue实例对象

在该阶段，Vue会根据传入的配置项，创建Vue实例对象。在创建实例对象过程中，Vue会做以下工作：

读取 data 属性中的数据，并转为响应式数据
当数据变化时会触发组件的重新渲染
对配置项进行处理，比如对生命周期钩子函数进行初始化等
通过观察者模式与订阅者模式进行绑定，用于更新数据的时候通知对应的 DOM 更新。

下面是一个简单的 Vue 实例示例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

构造 Virtual DOM

在创建 Vue 实例对象完成后，Vue 应用开始构造 Virtual DOM，将将模板转化为 AST，再将 AST 转化为 VNode，最终创建出 Virtual DOM。Virtual DOM 是以 JavaScript 对象的形式表示真实 DOM 的树形结构。

生成真实 DOM 结构

Vue 应用会通过 Virtual DOM，将数据渲染为真实的 DOM。

挂载阶段

将 Virtual DOM 转化为真实 DOM

在完成上述两个步骤后，Vue 应用会接下来对 Virtual DOM 进行 diff 操作，生成一系列操作真实 DOM 对象的列表，对比上次更新的虚拟 DOM 树以及新的虚拟 DOM 树的区别和差异，最终将 Virtual DOM 转为真实 DOM。

完成挂载并首次渲染成功

当整个 Vue 应用的核心实例创建，生成 Virtual DOM，并且将 Virtual DOM 转化为真实 DOM 对象的步骤完成后，Vue 就会一次性将生成的真实 DOM 挂载到应用中。

以下是一个简单的 Vue 应用示例，演示 Vue 实例的生命周期：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js First Render</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
      }
    });
  </script>
</body>
</html>

该应用的页面中，Vue 实例只渲染了一个 div 元素，且绑定了模板字符串 {{ message }}。在 Vue 实例的生命周期中，beforeCreate、created、beforeMount 和 mounted 四个函数会依次被调用，这是因为 Vue 实例对象是按照生命周期的步骤一步一步创建、渲染的。其中 beforeCreate 和 created 分别代表了 Vue 实例的创建过程，beforeMount 和 mounted 则代表了 Vue 实例在挂载到文档中后的生命周期步骤。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈vue首次渲染全过程 - Python技术站