Vue原理解析（三）：初始化时created以前作了什么？

上一篇：Vue原理解析（二）：初始化时beforeCreate以前作了什么？

让咱们继续this._init()的初始化之旅，接下来又会执行这样的三个初始化方法：

initInjections(vm)
initState(vm)
initProvide(vm)
复制代码

5. initInjections(vm): 主要做用是初始化inject，能够访问到对应的依赖。

inject和provide这里须要简单的提一下，这是vue@2.2版本添加的一对须要一块儿使用的API，它容许父级组件向它以后的全部子孙组件提供依赖，让子孙组件不管嵌套多深均可以访问到，很cool有木有~

• provide：提供一个对象或是返回一个对象的函数。
• inject：是一个字符串数组或对象。

这一对API在vue官网有给出两条食用提示：

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

• 大概是由于会让组件数据层级关系变的混乱的缘故，但在开发组件库时会很好使。

provide 和 inject 绑定并非可响应的。这是刻意为之的。然而，若是你传入了一个可监听的对象，那么其对象的属性仍是可响应的。

• 有个小技巧，这里能够将根组件data内定义的属性提供给子孙组件，这样在不借助vuex的状况下就能够实现简单的全局状态管理，仍是很cool的~

app.vue 根组件

export default {
  provide() {
    return {
      app: this
    }
  },
  data() {
    return {
      info: 'hello world!'
    }
  }
}

child.vue 子孙组件

export default {
  inject: ['app'],
  methods: {
    handleClick() {
      this.app.info = 'hello vue!'
    }
  }
}
复制代码

一但触发handleClick事件以后，不管嵌套多深的子孙组件只要是使用了inject注入this.app.info变量的地方都会被响应，这就完成了简易的vuex。更多的示例你们能够去vue的官网翻阅，这里就不码字了，如今咱们来分析下这么cool的功能它到底是怎么实现的~

虽然inject和provide是成对使用的，可是两者在内部是分开初始化的。从上面三个初始化方法就能看出，先初始化inject，而后初始化props/data状态相关，最后初始化provide。这样作的目的是能够在props/data中使用inject内所注入的内容。

咱们首先来看一下初始化inject时的方法定义：

export function initInjections(vm) {
  const result = resolveInject(vm.$options.inject, vm) // 找结果
  
  ...
}
复制代码

vm.$options.inject为以前合并后获得的用户自定义的inject，而后使用resolveInject方法找到咱们想要的结果,咱们看下resolveInject方法的定义：

export function resolveInject (inject, vm) {
  if (inject) {
    const result = Object.create(null)
    const keys = Object.keys(inject)  //省略Symbol状况

    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      const provideKey = inject[key].from
      let source = vm
      while (source) {
        if (source._provided && hasOwn(source._provided, provideKey)) { //hasOwn为是否有
          result[key] = source._provided[provideKey]
          break
        }
        source = source.$parent
      }
    ... vue@2.5后新增设置inject默认参数相关逻辑
    }
    return result
  }
}
复制代码

首先定义一个result返回找到的结果。接下来使用双循环查找，外层的for循环会遍历inject的每一项，而后再内层使用while循环自底向上的查找inject该项的父级是否有提供对应的依赖。

Ps:这里可能有人会有疑问，以前inject的定义明明是数组，这里怎么能够经过Object.keys取值？这是由于上一章再作options合并时，也会对参数进行格式化，如props的格式，定义为数组也会被转为对象格式，inject被定义时是这样的：

定义时：
{
  inject: ['app']
}

格式化后：
{
  inject: {
    app: {
      from: 'app'
    }
  }
}
复制代码

书接上文，source就是当前的实例，而source._provided内保存的就是当前provide提供的值。首先从当前实例查找，接着将它的父组件实例赋值给source，在它的父组件查找。找到后使用break跳出循环，将搜索的结果赋值给result，接着查找下一个。

Ps:可能有人又会有疑问，这个时候是先初始化的inject再初始化的provide，怎么访问父级的provide了？它根本就没初始化阿，这个时候咱们就要再思考下了，由于vue是组件式的，首先就会初始化父组件，而后才是初始化子组件，因此这个时候是有source._provided属性的。

找到了想到的结果以后，咱们补全以前initInjections的定义：

export function initInjections(vm) {
  const result = resolveInject(vm.$options.inject, vm)

  if(result) { // 若是有结果
    toggleObserving(false)  // 刻意为之不被响应式
    Object.keys(result).forEach(key => {
      ...
      defineReactive(vm, key, result[key])
    })
    toggleObserving(true)
  }
}
复制代码

若是有搜索结果，首先会调用toggleObserving(false)，具体实现不用理会，只用知道这个方法的做用是设置一个标志位，将决定defineReactive()方法是否将它的第三个参数设置为响应式数据，也就是决定result[key]这个值是否会被设置为响应式数据，这里的参数为false，只是在vm下挂载key对应普通的值，不过这样就能够在当前实例使用this访问到inject内对应的依赖项了，设置完毕以后再调用toggleObserving(true)，改变标志位，让defineReactive()能够设置第三个参数为响应式数据（defineReactive是响应式原理很重要的方法，这里了解便可），也就是它该有的样子。以上就是inject实现的相关原理，一句话来讲就是，首先遍历每一项，而后挨个遍历每一项父级是否有依赖。

6. initState(vm): 初始化会被使用到的状态，状态包括props，methods，data，computed，watch五个选项。

首先看下initState(vm)方法的定义：

export function initState(vm) {
  ...
  const opts = vm.$options
  if(opts.props) initProps(vm, opts.props)
  if(opts.methods) initMethods(vm, opts.methods)
  if(opts.data) initData(vm)
  ...
  if(opts.computed) initComputed(vm, opts.computed)
  if(opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
复制代码

如今这里的话只会介绍前面三类状态的初始化作了什么，也就是props，methods，data，由于computed和watch会涉及到响应式相关的watcher，这里先略过。接下来咱们依次有请这三位的初始化方法登场：

6.1 initProps (vm, propsOptions)：

• 主要做用是检测子组件接受的值是否符合规则，以及让对应的值能够用this直接访问。

function initProps(vm, propsOptions) {  // 第二个参数为验证规则
  const propsData = vm.$options.propsData || {}  // props具体的值
  const props = vm._props = {}  // 存放props
  const isRoot = !vm.$parent // 是不是根节点
  if (!isRoot) {
    toggleObserving(false)
  }
  for (const key in propsOptions) {
    const value = validateProp(key, propsOptions, propsData, vm)
    defineReactive(props, key, value)
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}
复制代码

咱们知道props是做为父组件向子组件通讯的重要方式，而initProps内的第二个参数propsOptions，就是当前实例也就是通讯角色里的子组件，它所定义的接受参数的规则。子组件的props规则是可使用数组形式的定义的，不过再通过合并options以后会被格式化为对象的形式：

定义时：
{
  props: ['name', 'age']
}

格式化后：
{
  name: {
    type: null
  },
  age: {
    type: null
  }
}
复制代码

因此在定义props规则时，直接使用对象格式吧，这也是更好的书写规范。

知道了规则以后，接下来须要知道父组件传递给子组件具体的值，它以对象的格式被放在vm.$options.propsData内，这也是合并options时获得的。接下来在实例下定义了一个空对象vm._props，它的做用是将符合规格的值挂载到它下面。isRoot的做用是判断当前组件是不是根组件，若是不是就不将props的转为响应式数据。

接下来遍历格式化后的props验证规则，经过validateProp方法验证规则并获得相应的值，将获得的值挂载到vm._props下。这个时候就能够经过this._props访问到props内定义的值了：

props: ['name'],
methods: {
  handleClick() {
    console.log(this._props.name)
  }
}
复制代码

不过直接访问内部的私有变量这种方式并不友好，因此vue内部作了一层代理，将对this.name的访问转而为对this._props.name的访问。这里的proxy须要介绍下，由于以后的data也会使用到，看下它的定义：

格式化了一下：
export function proxy(target, sourceKey, key) {
  Object.defineProperty(target, key, {
    enumerable: true,
    configurable: true,
    get: function () {
      return this[sourceKey][key]
    },
    set: function () {
      this[sourceKey][key] = val
    }
  })
}
复制代码

其实很简单，只是定义一个对象值的get方法，读取时让其返回另外的一个值，这里就完成了props的初始化。

6.2 initMethods (vm, methods)：

• 主要做用是将methods内的方法挂载到this下。

function initMethods(vm, methods) {
  const props = vm.$options.props
  for(const key in methods) {
    
    if(methods[key] == null) {  // methods[key] === null || methods[key] === undefined 的简写
      warn(`只定义了key而没有相应的value`)
    }
    
    if(props && hasOwn(props, key)) {
      warn(`方法名和props的key重名了`)
    }
    
    if((key in vm) && isReserved(key)) {
      warn(`方法名已经存在并且以_或$开头`)
    }
    
    vm[key] = methods[key] == null
      ? noop  // 空函数
      : bind(methods[key], vm)  //  至关于methods[key].bind(vm)
  }
}
复制代码

methods的初始化相较而言就简单了不少。不过它也有不少边界状况，如只定义了key而没有方法具体的实现、key和props重名了、key已经存在且命名不规范，以_或$开头，至于为何不行，咱们第一章的时候有说明了。最后将methods内的方法挂载到this下，就完成了methods的初始化。

6.3 initData (vm)：

• 主要做用是初始化data，仍是老套路，挂载到this下。有个重要的点，之因此data内的数据是响应式的，是在这里初始化的，这个你们得有个印象~。

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm) // 经过data.call(vm, vm)获得返回的对象
    : data || {}
  if (!isPlainObject(data)) { // 若是不是一个对象格式
    data = {}
    warn(`data得是一个对象`)
  }
  const keys = Object.keys(data)
  const props = vm.$options.props  // 获得props
  const methods = vm.$options.methods  // 获得methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (methods && hasOwn(methods, key)) {
      warn(`和methods内的方法重名了`)
    }
    
    if (props && hasOwn(props, key)) {
      warn(`和props内的key重名了`)
    } else if (!isReserved(key)) { // key不能以_或$开头
      proxy(vm, `_data`, key)
    }
  }
  observe(data, true)
}
复制代码

首先经过vm.$options.data获得用户定义的data，若是是function格式就执行它，并返回执行以后的结果，不然返回data或{}，将结果赋值给vm._data这个私有属性。和props同样的套路，最后用来作一层代理，若是获得的结果不是对象格式就是报错了。

而后遍历data内的每一项，不能和methods以及props内的key重名，而后使用proxy作一层代理。注意最后会执行一个方法observe(data, true)，它的做用了是递归的让data内的每一项数据都变成响应式的。

其实不难发现它们仨主要作的事情差很少，首先不要相互之间有重名，而后能够被this直接访问到。

7. initProvide(vm): 主要做用是初始化provide为子组件提供依赖。

provide选项应该是一个对象或是函数，因此对它取值便可，就像取data内的值相似，看下它的定义：

export function initProvide (vm) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}
复制代码

首先经过vm.$options.provide取得用户定义的provide选项，若是是一个function类型就执行一下，获得返回后的结果，将其赋值给了vm._provided私有属性，因此子组件在初始化inject时就能够访问到父组件提供的依赖了；若是不是function类型就直接返回定义的provide。

8. callHook(vm, 'created'): 执行用户定义的created钩子函数，有mixin混入的也一并执行。

终于咱们越过了created钩子函数，仍是分别用一句话来介绍它们主要都干了什么事：

• initInjections(vm)：让子组件inject的项能够访问到正确的值
• initState(vm)：将组件定义的状态挂载到this下。
• initProvide(vm)：初始化父组件提供的provide依赖。
• created：执行组件的created钩子函数

初始化的阶段算是告一段落了，接下来咱们会进入组件的挂载阶段。按照惯例咱们仍是以一道vue容易被问道的面试题做为本章的结束吧~：

面试官微笑而又不失礼貌的问道：

• 请问methods内的方法可使用箭头函数么，会形成什么样的结果？

怼回去：

• 是不可使用箭头函数的，由于箭头函数的this是定义时就绑定的。在vue的内部，methods内每一个方法的上下文是当前的vm组件实例，methods[key].bind(vm)，而若是使用使用箭头函数，函数的上下文就变成了父级的上下文，也就是undefined了，结果就是经过undefined访问任何变量都会报错。

下一篇： Vue原理解析（四）：你知道被你们聊烂了的虚拟Dom是怎么生成的吗？（上）

顺手点个赞或关注呗，找起来也方便~

参考：

Vue.js源码全方位深刻解析

Vue.js深刻浅出

Vue.js组件精讲

剖析 Vue.js 内部运行机制