Vue2 的初始化过程主要包括以下几个核心步骤：
1. 初始化流程概述
// Vue 构造函数
function Vue(options) {this._init(options)
}
2. 初始化阶段
2.1 _init() 方法
Vue.prototype._init = function(options) {const vm = this// 合并配置if (options && options._isComponent) {// 组件配置合并initInternalComponent(vm, options)} else {vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm)}// 初始化生命周期、事件、渲染等initLifecycle(vm) // 初始化生命周期initEvents(vm) // 初始化事件initRender(vm) // 初始化渲染callHook(vm, 'beforeCreate') // 调用 beforeCreate 钩子initInjections(vm) // 初始化注入initState(vm) // 初始化状态（核心）initProvide(vm) // 初始化提供callHook(vm, 'created') // 调用 created 钩子// 挂载if (vm.$options.el) {vm.$mount(vm.$options.el)}
}
2.2 初始化状态 (initState)
function initState(vm) {vm._watchers = []const opts = vm.$optionsif (opts.props) initProps(vm, opts.props)if (opts.methods) initMethods(vm, opts.methods)if (opts.data) {initData(vm) // 初始化 data，进行响应式处理} else {observe(vm._data = {}, true)}if (opts.computed) initComputed(vm, opts.computed)if (opts.watch) initWatch(vm, opts.watch)
}
2.3 响应式系统初始化
function initData(vm) {let data = vm.$options.datadata = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}// 代理 data 到 vm 实例上const keys = Object.keys(data)let i = keys.lengthwhile (i--) {proxy(vm, '_data', keys[i])}// 观察数据observe(data, true)
}
3. 挂载阶段
3.1 $mount 方法
Vue.prototype.$mount = function(el, hydrating) {el = el && query(el)const options = this.$options// 解析 template/el 为 render 函数if (!options.render) {let template = options.templateif (template) {// 编译模板const { render, staticRenderFns } = compileToFunctions(template,{...})options.render = renderoptions.staticRenderFns = staticRenderFns}}return mount.call(this, el, hydrating)
}
4. 完整的初始化流程总结
- 合并配置：合并构造函数选项和实例选项
- 初始化生命周期：建立组件关系，初始化 $parent、$children 等
- 初始化事件：处理父组件传递的事件
- 初始化渲染：创建 $slots、$scopedSlots，定义 $createElement
- 调用 beforeCreate 钩子
- 初始化注入：处理 inject 选项
- 初始化状态（核心步骤）：
- 初始化 props
- 初始化 methods
- 初始化 data（响应式处理）
- 初始化 computed
- 初始化 watch
- 初始化提供：处理 provide 选项
- 调用 created 钩子
- 挂载：如果存在 el 选项，自动调用 $mount 方法
这个过程建立了 Vue 实例的响应式系统，为后续的数据变化侦测和视图更新奠定了基础。