一、整体流程概览
当我们执行new Vue({ ... })时，Vue 会经历初始化 → 编译模板 → 挂载 DOM三个阶段。整个过程由_init方法驱动，最终通过$mount完成视图渲染。
核心路径：
new Vue()→_init()→initState()→$mount()→mountComponent()→_render()→_update()→ 真实 DOM
二、详细步骤解析
1. 构造函数与_init初始化
源码位置：src/core/instance/index.js
functionVue(options){if(!(thisinstanceofVue)){warn('Vue is a constructor and should be called with the `new` keyword')}this._init(options)}- 调用
_init是整个实例化的起点。 - 在此之前，Vue 原型上已通过 mixin 注入了各类方法：
initMixin→ 定义_initstateMixin→$set,$delete,$watcheventsMixin→$on,$emitlifecycleMixin→_update,$destroyrenderMixin→_render
2._init中的关键操作
源码位置：src/core/instance/init.js
Vue.prototype._init=function(options){constvm=this;vm._uid=uid++;vm._isVue=true;// 合并配置（处理 mixins / extends）if(options&&options._isComponent){initInternalComponent(vm,options);}else{vm.$options=mergeOptions(resolveConstructorOptions(vm.constructor),options||{},vm);}// 初始化代理（开发环境）if(process.env.NODE_ENV!=='production'){initProxy(vm);}else{vm._renderProxy=vm;}vm._self=vm;// 初始化生命周期、事件、渲染initLifecycle(vm);initEvents(vm);initRender(vm);callHook(vm,'beforeCreate');// 初始化依赖注入（inject / provide）initInjections(vm);// 在 data/props 之前initState(vm);// 初始化 props, methods, data, computed, watchinitProvide(vm);// 在 data/props 之后callHook(vm,'created');// 如果有 el，自动挂载if(vm.$options.el){vm.$mount(vm.$options.el);}}✅关键结论：
beforeCreate时：data / props 尚未初始化，无法访问；created时：数据已响应式化，但DOM 还未生成，不能操作$el；- 挂载由
$mount触发。
3. 数据初始化：initState与initData
源码位置：src/core/instance/state.js
exportfunctioninitState(vm){vm._watchers=[];constopts=vm.$options;if(opts.props)initProps(vm,opts.props);if(opts.methods)initMethods(vm,opts.methods);if(opts.data)initData(vm);if(opts.computed)initComputed(vm,opts.computed);if(opts.watch)initWatch(vm,opts.watch);}functioninitData(vm){letdata=vm.$options.data;data=vm._data=typeofdata==='function'?getData(data,vm):data||{};// 校验 data 为纯对象if(!isPlainObject(data)){/* warn */}constkeys=Object.keys(data);constprops=vm.$options.props;constmethods=vm.$options.methods;// 属性名冲突检查（data vs props/methods）for(leti=keys.length-1;i>=0;i--){constkey=keys[i];if(props&&hasOwn(props,key)){/* warn */}elseif(!isReserved(key)){proxy(vm,'_data',key);// 通过 this.key 访问 vm._data[key]}}// 响应式化observe(data,true/* asRootData */);}✅重点：
- 组件中
data必须是函数（避免多实例共享对象）； - 通过
proxy实现this.message→this._data.message； - 最终调用
observe将 data 转为响应式（基于Object.defineProperty）。
4. 挂载阶段：$mount与模板编译
源码位置：src/platforms/web/entry-runtime-with-compiler.js
Vue.prototype.$mount=function(el,hydrating){el=el&&query(el);if(el===document.body||el===document.documentElement){warn('Do not mount Vue to <html> or <body>');returnthis;}constoptions=this.$options;if(!options.render){lettemplate=options.template;if(template){// 处理 string / element 类型的 template}elseif(el){template=getOuterHTML(el);// 从 el 提取 HTML}if(template){// 编译 template → render 函数const{render,staticRenderFns}=compileToFunctions(template,{},this);options.render=render;options.staticRenderFns=staticRenderFns;}}// 调用真正的 mountreturnmount.call(this,el,hydrating);}✅关键点：
- 若无
render函数，则尝试从template或el提取模板； - 通过
compileToFunctions将模板编译为render函数； - 编译三步：HTML → AST → render 字符串 → render 函数。
5. 渲染组件：mountComponent
源码位置：src/core/instance/lifecycle.js
exportfunctionmountComponent(vm,el,hydrating){vm.$el=el;if(!vm.$options.render){vm.$options.render=createEmptyVNode;// 警告：运行时版本缺少编译器}callHook(vm,'beforeMount');// 定义更新函数letupdateComponent=()=>{vm._update(vm._render(),hydrating);};// 创建渲染 Watcher（核心！）newWatcher(vm,updateComponent,noop,{before(){if(vm._isMounted&&!vm._isDestroyed){callHook(vm,'beforeUpdate');}}},true/* isRenderWatcher */);hydrating=false;if(vm.$vnode==null){vm._isMounted=true;callHook(vm,'mounted');}returnvm;}✅核心机制：
- 创建一个渲染 Watcher，监听响应式数据变化；
- 初次执行
updateComponent→ 触发首次渲染； - 数据变更时，自动触发
beforeUpdate→ 重新_render→_update。
6. 生成 VNode 与更新 DOM
_render：生成虚拟 DOM
Vue.prototype._render=function(){const{render}=this.$options;letvnode;try{vnode=render.call(this._renderProxy,this.$createElement);}catch(e){/* error handling */}// 校验 vnode 合法性returnvnode;}_update：将 VNode 转为真实 DOM
Vue.prototype._update=function(vnode,hydrating){constvm=this;constprevVnode=vm._vnode;vm._vnode=vnode;if(!prevVnode){// 初次挂载vm.$el=vm.__patch__(vm.$el,vnode,hydrating,false);}else{// 更新vm.$el=vm.__patch__(prevVnode,vnode);}}__patch__是平台相关方法（Web 端为patch函数），负责VNode diff + DOM 操作。
三、总结：挂载全过程
| 阶段 | 关键动作 | 生命周期钩子 |
|---|---|---|
| 初始化 | 合并配置、初始化 props/data/methods/watch | beforeCreate→created |
| 编译 | template → AST → render 函数 | — |
| 挂载 | 创建渲染 Watcher，首次执行_render+_update | beforeMount→mounted |
| 更新 | 数据变化 → 触发 Watcher → 重新渲染 | beforeUpdate→updated |
💡一句话概括：
Vue 实例挂载的本质是——将响应式数据通过 render 函数生成 VNode，再通过 patch 算法高效更新到真实 DOM 上，整个过程由一个渲染 Watcher驱动。
参考文献
- 博客园：Vue 实例化过程
- Vue 2.x 源码 GitHub
- Vue 3 中文文档（对比参考）
 空间增强注意力模块提升遮挡目标特征学习能力)
