Vue源码学习之initInjections和initProvide

Vue源码学习之initInjections和initProvide

在进行源码阅读之前先让我们了解一个概念：provide/inject，这个是Vue在2.2.0版本新增的一个属性，按照Vue官网的说法，它的作用是：

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

简而言之就是由祖先组件提供了一个provide，provide里的属性可供所有的后代组件通过inject注入并调用，官网实例如下：

// 父级组件提供 'foo'
var Provider = {
   
  provide: {
   
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
   
  inject: ['foo'],
  created () {
   
    console.log(this.foo) // => "bar"
  }
  // ...
}

initInjections

该方法在初始化data/props之前被调用，主要作用是初始化vue实例的inject，让我们一行一行地看代码吧！

const result = resolveInject(vm.$options.inject, vm)

首先就是一个对inject进行处理的方法resolveInejct，让我们看下这个方法的实现。

const result = Object.create