FrontEnd-Interview

Appearance

Vue 实例挂载的过程 ​

Vue 实例的挂载过程是 Vue.js 运行的重要阶段，它涉及到 Vue 的编译器、响应式系统和虚拟 DOM 技术。

以下是 Vue 实例挂载的主要步骤：

  1. 实例创建：首先，我们需要使用 new Vue() 创建一个 Vue 实例，并传入一个选项对象，这个对象包含了各种选项，如 data、methods、computed、watch、components、template 等。

  2. 模板编译：如果提供了 template 选项，那么 Vue 将使用其编译器将模板编译成渲染函数。如果没有提供 template 选项，但提供了挂载的元素（通过 el 选项或 .$mount() 方法），那么 Vue 将使用该元素的 HTML 作为模板。如果既没有提供 template 选项，也没有提供挂载元素，那么 Vue 将创建一个空的渲染函数。

  3. 创建渲染函数：Vue 的编译器将模板编译成一个渲染函数。这个渲染函数在被调用时，会返回一个虚拟 DOM 树。

  4. 响应式系统：Vue 将 data 中的数据转换成响应式的，这意味着当这些数据改变时，Vue 将知道需要重新渲染。Vue 使用 ES5 的 Object.defineProperty 方法将 data 中的每个属性转换为 getter/setter，以便在属性被访问和修改时进行依赖跟踪和变更通知。

  5. 挂载：当调用 .$mount() 方法（或者在实例化时提供了 el 选项）时，Vue 将实例挂载到 DOM 上。它会使用渲染函数创建一个虚拟 DOM 树，然后将这个虚拟 DOM 树转换成真实的 DOM，并插入到挂载的元素中。

  6. 更新：当响应式数据发生变化时，Vue 将重新调用渲染函数，生成一个新的虚拟 DOM 树，然后使用 "diffing" 算法找出两个虚拟 DOM 树之间的差异，并将这些差异应用到真实的 DOM 上，从而更新视图。

以上就是 Vue 实例挂载的过程。在这个过程中，还会触发一系列的生命周期钩子，如 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed，我们可以在这些钩子中执行自己的代码。