Vue 实例挂载过程中发生了什么？

描述了 Vue 实例从初始化到 mounted 的整个生命周期过程，包括数据响应式、DOM 挂载和虚拟 DOM 渲染。

Vue 中等 生命周期 DOM渲染 DOM

Vue 实例挂载是将实例与 DOM 元素关联的关键过程，主要分为以下阶段：

  1. 实例初始化：
    • 通过 new Vue() 创建实例，执行 _init 方法初始化生命周期、事件系统、渲染功能（initLifecycle, initEvents, initRender）。
    • 调用 beforeCreate 钩子，此时数据和响应式系统尚未初始化。
  2. 响应式数据处理：
    • 初始化 data/props/computed，建立响应式数据（调用 initState）。
    • 执行 created 钩子，此时已可访问数据，但 DOM 未挂载。
  3. 模板编译：
    • 检查是否有 template 选项：若存在，将其编译为渲染函数；若无且未提供 render 函数，则使用 el 的 outerHTML 作为模板。
    • 优先级：render 函数 > template > el 的 DOM 结构。
  4. 执行挂载（$mount）：
    • 调用 vm.$mount 方法（可显式调用或通过 el 自动触发）。
    • 触发 beforeMount 钩子，此时虚拟 DOM 已构建但未插入页面。
  5. 创建并渲染虚拟 DOM：
    • 调用 render 函数生成虚拟 DOM（Virtual DOM）。
    • 对比虚拟 DOM 与页面 DOM，生成真实 DOM 插入挂载点（如 el: '#app'）。
  6. 挂载完成：
    • 触发 mounted 钩子，此时实例已完全挂载，页面可见完整渲染结果。
    • 建立数据与视图的双向绑定（响应式依赖追踪）。

注意点：

  • 手动挂载时可省略 el 选项，改为显式调用 vm.$mount(’#app’)。
  • 编译阶段仅存在于完整版 Vue（包含编译器），Runtime Only 版本需预编译模板。