Vue挂载本质是将实例转为真实DOM并插入页面的过程，涵盖初始化响应式、编译模板生成VNode、patch渲染及后续响应式更新。
Vue 的挂载过程，本质是把一个 Vue 实例（或组件）从 JavaScript 对象变成真实 DOM 并插入页面的过程。这个过程紧密串联生命周期钩子与虚拟 DOM 的创建、补丁（patch）、渲染逻辑，理解它，就掌握了 Vue 响应式渲染的核心脉络。
new Vue() 后发生了什么？—— 初始化与数据响应化
调用 new Vue(options) 时，Vue 内部会执行一系列初始化操作：
- 合并配置（props、data、methods、computed、watch 等），处理选项式 API 的规范性
- 初始化事件系统（$on/$emit）、生命周期状态（_isMounted、_isDestroyed 等内部标志）
- 对 data 执行响应式转换：通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持属性读写，建立依赖收集与派发更新机制
- 初始化计算属性（computed）、侦听器（watch）、指令（directives）等
此时还没有任何 DOM，el 还未被处理，$el 为 null，beforeCreate 和 created 钩子在此阶段触发。
挂载入口：$mount 做了哪些事？
当调用 vm.$mount(el)（或自动挂载时），Vue 开始进入 DOM 渲染流程：
立即学习“前端免费学习笔记（深入）”；
- 若传入了 el，则缓存原 DOM 节点；若未传，会等待后续手动调用或配合 render 函数/模板编译
- 如果 options 中没有提供 render 函数，但有 template 或 el 内的 HTML，则调用编译器（compiler）将模板字符串编译为 render function
- 最终确保实例拥有一个可执行的 render() 函数，它返回一个 VNode（虚拟节点） 对象
这一步完成后，beforeMount 钩子被调用，此时 $el 还是旧的（或 null），VNode 尚未渲染。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
首次渲染：从 VNode 到真实 DOM
mountComponent 是核心入口，它启动了真正的挂载循环：
- 创建一个 Watcher（渲染 watcher），负责监听响应式数据变化，并在变化时重新执行 render()
- 首次执行 render()，生成一颗完整的 初始 VNode 树（包含嵌套组件、指令、插槽等抽象结构）
- 调用 patch()（也叫 __patch__），将初始 VNode 树“打补丁”到空容器（或旧 DOM）上：
→ 若目标为空（首次挂载），则执行 createElm 递归创建真实 DOM 元素
→ 组件节点会触发子组件的初始化与挂载流程（递归）
→ 指令（如 v-model、v-show）和组件的 mounted 钩子在此阶段同步触发
当 patch 完成，真实 DOM 插入页面，mounted 钩子被调用，$el 正式可用。
后续更新：响应式驱动的差异更新
挂载完成后，数据变化会触发已建立的响应式依赖链：
- setter 触发依赖通知（notify），唤醒对应的 渲染 Watcher
- Watcher 执行 update，再次调用 render() 得到 新 VNode
- 再次调用 patch(oldVNode, newVNode)，进行 diff 算法比对：
→ 跳过静态节点（v-once）、复用 key 相同的元素
→ 递归对比子节点，最小化 DOM 操作（增删改查）
→ 更新文本、属性、class、style、事件绑定等
整个过程不重新生成整棵 DOM，只更新必要部分，这就是虚拟 DOM 带来的性能保障。
理解挂载过程，关键不是记住每一步函数名，而是看清三条主线如何交织：生命周期钩子标记阶段、响应式系统提供更新驱动、虚拟 DOM 提供高效渲染路径。它们共同构成 Vue “数据驱动视图”的底层契约。
