在 Vue.js 的 2.2.0
版本中添加加了 provide 和 inject 选项。他们成对出现,用于父级组件向下传递数据。
和之前一样,初始化的方法都是在 Vue 的 _init
方法中的。
// 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') }
这里找到 initInjections
和 initProvide
方法,这就是 provide
和 inject
的初始化方法了。这两个方法都是在 src/core/instance/inject.js
中。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
先看源码:
// src/core/instance/inject.jsexport 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 选项应该是一个字符串数组或一个对象,该对象的 key 代表了本地绑定的名称,value 为其 key (字符串或 Symbol) 以在可用的注入中搜索。
源码
// src/core/instance/inject.jsexport 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) { // inject 是 :any 类型因为流没有智能到能够指出缓存 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] } } }
好吧,我承认这就是引用的官网的三个例子~ 不过意思到就好啦。
这里我有个疑问,既然在源码中主动去识别了 from 和 default,官网上说是
在
2.5.0
的注入可以通过设置默认值使其变成可选项:
那么如下写法还可用吗?
var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ...}
为此,我们去查查 2.2.0
版本的Vue是怎么写的?
export function initInjections (vm: Component) { const provide = vm.$options.provide const inject: any = vm.$options.inject if (provide) { vm._provided = typeof provide === 'function' ? provide.call(vm) : provide } if (inject) { // inject is :any because flow is not smart enough to figure out cached // isArray here const isArray = Array.isArray(inject) const keys = isArray ? inject : hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject) for (let i = 0; i < keys.length; i++) { const key = keys[i] const provideKey = isArray ? key : inject[key] let source = vm while (source) { if (source._provided && source._provided[provideKey]) { vm[key] = source._provided[provideKey] break } source = source.$parent } } } }
从中可以看到,在这个版本 provide 和 inject 是一起初始化的。之后,将 provide 传给 vm._provide ,在获取 inject 选项的时候代码判断了 inject 是否为数组,如果是数组直接遍历数组,之后查找 provide 的代码差不多。
所以我推测: 在 2.5.0
之后不能再使用数组形式的 inject 来搜索 provide 了。
以上是Vue.js源码学习provide 和 inject的详细内容。更多信息请关注PHP中文网其他相关文章!