Vue源码 -- new Vue()

187 阅读1分钟

new Vue ()都做了哪些事

  1. 调用原型上的_init(options)

    1. 把vue实例赋值给vm

    2. 调用mergeOptions, 合并options(用户传递的,构造函数原有的,父级构造函数的options属性)

      1. 构造函数原有的Vue.options

        // 相当于
        Vue.options.components = {}
        Vue.options.directives = {}
        Vue.options.filters = {}
        
      2. 调用extend把一些内置组件扩展到Vue.options.components上

        • 内置组件有<keep-alive><transition><transition-group>

      不同选项有不同的合并策略

    3. 为vue实例初始化一些属性,事件,响应式数据等,顺序如下。除了初始化,在适当的时机调用了callHook触发生命周期的钩子函数

      initLifecycle(vm)       // 初始化生命周期
      initEvents(vm)        // 初始化事件
      initRender(vm)         // 初始化渲染
      callHook(vm, 'beforeCreate')  // 调用生命周期钩子函数
      initInjections(vm)   //初始化injections
      initState(vm)    // 初始化props,methods,data,computed,watch
      initProvide(vm) // 初始化 provide
      callHook(vm, 'created')  // 调用生命周期钩子函数
      
    4. 判断用户是否传入el,传入了则调mount进入模板编译和挂载阶段。如果没有则需要用户手动执行mount进入模板编译和挂载阶段。如果没有则需要用户手动执行mount才进入下一生命周期。

  2. 执行initMixin(Vue)

    1. 将_init挂在vue原型上

总结: 主要就是合并配置,调用初始化函数,触发生命周期钩子函数,调用$mount开启下一阶段