vue2初始化过程

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.$options
  
  if (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.data
  data = vm._data = typeof data === 'function' 
    ? getData(data, vm) 
    : data || {}
  
  // 代理 data 到 vm 实例上
  const keys = Object.keys(data)
  let i = keys.length
  while (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.template
    if (template) {
      // 编译模板
      const { render, staticRenderFns } = compileToFunctions(
        template,
        {...}
      )
      options.render = render
      options.staticRenderFns = staticRenderFns
    }
  }
  
  return mount.call(this, el, hydrating)
}

4. 完整的初始化流程总结

1. 合并配置：合并构造函数选项和实例选项
2. 初始化生命周期：建立组件关系，初始化 $parent、$children 等
3. 初始化事件：处理父组件传递的事件
4. 初始化渲染：创建 $slots、$scopedSlots，定义 $createElement
5. 调用 beforeCreate 钩子
6. 初始化注入：处理 inject 选项
7. 初始化状态（核心步骤）：
   • 初始化 props
   • 初始化 methods
   • 初始化 data（响应式处理）
   • 初始化 computed
   • 初始化 watch
8. 初始化提供：处理 provide 选项
9. 调用 created 钩子
10. 挂载：如果存在 el 选项，自动调用 $mount 方法

这个过程建立了 Vue 实例的响应式系统，为后续的数据变化侦测和视图更新奠定了基础。