当前位置：首页 > news >正文

vue2初始化过程

news 2026/5/12 3:18:18

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 方法