Vue源码解析-Vue初始化流程

• entry-runtime-with-compiler.js (打包入口文件)
  • 扩展了 $mount 方法

      const mount = Vue.property.$mount
    

• web/runtime/index.js
  • 声明补丁函数patch (执行diff)
  • 声明 $mount 方法 (得到要挂载的宿主元素==>执行挂载 mountComponent )
• src/core/index.js
  • 初始化全局API (initGlobalAPI(Vue))
    声明了 use,set,delete,component,nextTick 等方法
• src/core/instance/index.js
  • Vue 构造函数
    • 执行 _init() 方法
    • 实例方法的初始化

      initMixin(Vue)  // 混入 _init()    '(向下关联init.js)
      stateMixin(Vue)  // $set/$delete/$watch
      eventsMixin(Vue) // $emit/$on/$off/$onec
      lifecycleMixin(Vue) // $_update / $forceUpdate
      renderMixin(Vue)  // $nextTick / _render
      

• src/core/instance/init.js

  initLifecycle(vm) // $root / $parent / $children / $refs
  initEvent(vm) //event 在父组件创建,在子组件监听
  initRender(vm)  // slots/$createElement
  callHook => breforeCreate // 组件创建之前的钩子
  initInjections(vm) // 先注入祖辈传递的数据(此时数据为空)
  initState(vm) //组件数据初始化 (包括:data/props/methods/computed/watch等)  (向下关联 state.js)
  initProvide(vm) //后提取数据
  callHook => created
  

• src/core/instance/state.js
  initState() //进行了数据响应式处理