学习vue源码（18）三探生命周期之初始化provide与inject
上篇文章学习vue源码（17）再探生命周期之初始化实例属性及事件讲解了初始化阶段的
initLifecycle(vm)
initEvents(vm)
initRender(vm)
即beforeCreate钩子函数触发前对实例 属性和事件的初始化。
// src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
……
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
}
这一次来讲解 created钩子函数触发前，beforeCreate触发后 的initInjections和initProvide，可能你会问为什么initState为什么不一起讲呢，因为initState也是一个大块头，放到后面单独讲一下。
概念解析
成对出现：provide和inject是成对出现的
作用：用于父组件向子孙组件传递数据
使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
使用
provide和inject需要配合使用，是多层级组件的通信方式。相信，面试问vue组件间有哪些通信方式，就会提到这个。（什么？你说你不知道。。。，那正好可以了解下，下次有得说了）
简单的说，当组件的引入层次过多，我们的子孙组件想要获取祖先组件的资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情
provide和inject需要配合使用，它们的含义如下:
provide:一个对象或返回一个对象的函数，该对象包含可注入起子孙的属性，可以使用ES6的Symbols作为key(只有原生支持Symbol才可以)
inject:inject 选项应该是一个字符串数组或一个对象，该对象的 key 代表了本地绑定的名称，value 为其 key (字符串或 Symbol) 以在可用的注入中搜索。
来个例子理解一下
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<title>Documenttitle>
head>
<body>
<div id="app"><child>child>div>
<script>
Vue.component('child',{
inject:['message'],
template:'{{message}}
'
})
new Vue({
el:'#app',
provide:{message:'Hello Vue!'}
})
script>
body>
html>
输出:Hello Vue!,对应的DOM节点渲染为:
是不是感觉和props的传值差不多，当然这不是 provide/inject该干的事情，我们在中间再嵌套一层组件就知道他的用处了，例如:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app"><test>test>div>
<script>
Vue.component('child',{
inject:['message'],
template:'{{message}}
'
})
Vue.component('test',{
template:`
provide/injec就是做这个用的，多层嵌套时用起来不要太爽噢
源码分析
provide
// src/core/instance/inject.js
export function initProvide (vm: Component) {
const provide = vm.$options.provide
if (provide) {
vm._provided = typeof provide === 'function'
? provide.call(vm)
: provide
}
}
provide 是向下传递数据的选项。这里先拿到 provide 选项中的内容，如果有 provide 选项，将 provide 选项传递给 vm._provided 变为 Vue 实例全局数据。
这里看一下例子更清楚，下例中传入数据 foo，数据内容为 bar。
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
inject
// src/core/instance/inject.js
export function initInjections (vm: Component) {
const result = resolveInject(vm.$options.inject, vm)
if (result) {
observerState.shouldConvert = false
Object.keys(result).forEach(key => {
defineReactive(vm, key, result[key])
})
observerState.shouldConvert = true
}
}
简化后的源码可以看到，首先通过 resolveInject 方法获取 inject 选项搜索结果，如果有搜索结果，遍历搜索结果并为其中的数据添加 setter 和 getter。
接着来看下 resolveInject 方法：
export function resolveInject (inject: any, vm: Component): ?Object {
if (inject) {
const result = Object.create(null)
// 获取 inject 选项的 key 数组
const keys = hasSymbol
? Reflect.ownKeys(inject).filter(key => {
/* istanbul ignore next */
return Object.getOwnPropertyDescriptor(inject, key).enumerable
})
: Object.keys(inject)
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 && provideKey in source._provided) {
result[key] = source._provided[provideKey]
break
}
source = source.$parent
}
if (!source) {
if ('default' in inject[key]) {
const provideDefault = inject[key].default
result[key] = typeof provideDefault === 'function'
? provideDefault.call(vm)
: provideDefault
} else if (process.env.NODE_ENV !== 'production') {
warn(`Injection "${key}" not found`, vm)
}
}
}
return result
}
}
获取 inject 选项的 key 数组
遍历 key 数组，通过向上冒泡来查找 provide 中是否有 key 与 inject 选项中 from 属性同名的
如果有，则将这个数据传递给 result；
如果没有，检查 inject 是否有 default 选项设定默认值或者默认方法，如果有则将默认值返传给 result，最终返回 result 对象。
所以，inject 的写法应该是有 default 默认值的：
const Child = {
inject: {
foo: { default: 'foo' }
}
}
或者是有 from 查找键和 default 默认值的：
const Child = {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}
或者为 default 默认值设定一个工厂方法：
const Child = {
inject: {
foo: {
from: 'bar',
default: () => [1, 2, 3]
}
}
}
好吧，我承认这就是引用的官网的三个例子~ 不过意思到就好啦。