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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章