new Vue() 初始化

250 阅读1分钟

初始化 Vue

先看一下 new Vue() 的初始化,这要从 _init() 说起:

  • 首先每个组件实例 vm 都定义一个 vm._uid 属性,值从 0 开始递增
  • 接着合并 Vue.options && options(new Vue 传入的参数) 挂载到 vm.$options
  • 接着执行 initLifecycle()、initEvents()、initRender()、callHook('beforeCreate') 函数
  • 接着执行 initInjections()、initState()、initProvide()、callHook('created') 函数
  • 接着执行 $mount() 函数
初始化简述:合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化属性: data、methods、props、computed、watcher ...,同时又执行了两个生命周期钩子函数 beforeCreate、created。最后判断若存在 el 属性,则执行 $mount() 函数。

上述重点在于合并配置

image.png

首先介绍上图中 mergeOptions(parent,child) 函数,主要功能就是把两个参数对象合并到一个对象 options 上,最后返回 options。该函数是在初始化过程中调用执行,并且对于 parent/child 不同的 key 有不同的合并策略。

我们所熟知的 Vue.mixin(obj) 函数也是通过 mergeOptions(Vue.options, obj) 函数实现的。并把 obj 合并到 Vue.options 上。

下图是对生命周期钩子函数的合并策略,如下: