TOC
provide / inject
provide / inject Vue.js 2.2.0 版本后新增的 API.
还发出了这样的警告provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
我们这次的目标就是让该 API 实现响应式。为了了解这个 API 为什么无法响应式呢，我们先来看看源码
走进初始化
export function initProvide(vm: Component) {
const provide = vm.$options.provide
if (provide) {
vm._provided = typeof provide === 'function' ? provide.call(vm) : provide
}
}
export function initInjections(vm: Component) {
const result = resolveInject(vm.$options.inject, vm)
if (result) {
toggleObserving(false)
Object.keys(result).forEach(key => {
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
defineReactive(vm, key, result[key], () => {
warn(
`Avoid mutating an injected value directly since the changes will be ` +
`overwritten whenever the provided component re-renders. ` +
`injection being mutated: "${key}"`,
vm
)
})
} else {
defineReactive(vm, key, result[key])
}
})
toggleObserving(true)
}
}
接着我们来看看初始化的顺序
vm._self = vm
initLifecycle(vm) // 初始化一些实例上的值
initEvents(vm) // 将父组件的事件监听回到绑定子组件的_events上
initRender(vm) // 给实例增加上关于render的属性
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm) // 对Props进行迁移，并对方法 计算属性 data 进行解剖和响应绑定
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
从以上的信息我们可以了解到，Provide无法响应式的真正原因其实就是没有加依赖收集，所以无论你如何调用$watch，都是无效的，你都无法以任何的形式进行监听。接着我们发现Provide的初始化发生在state之后，并且Provide支持函数的方式进行导入，所以我们可以在这里做一些文章
利用Data
我来演示一下我的方法
首先是父组件，利用data来为foo对象增加依赖收集机制，紧接着在provide完成初始化之后，对_provide.foo进行监听，这时候data中的foo中的dep就会增加依赖到这个新生成的watcher中。接下来，我们需要在子组件中使用他
export default {
data() {
return {
foo: {
a: 1
}
};
},
provide() {
return {
foo: this.foo
};
},
created() {
this.$watch(
"_provide.foo",
function() {
console.log("changne");
},
{
deep: true
}
);
},
}
<template>
<div class="hello">
{{foo.a}}
</div>
</template>
export default {
name: "HelloWorld",
inject: ["foo"],
components: {
anode
},
created() {
setInterval(() => {
this.foo.a = Date.now();
}, 1000);
}
};
其实在完成这一步之后，我们的foo正在被两个watcher所监听，分别是父组件中触发的$watch,已经子组件中的render watcher . 这样一但子组件修改foo.a 这两个watcher都会接收到更新。
如此，我们的目的就达到了，但是在这里提醒大家，使用这个东西前，你最好清楚的明白你需要什么，以及你到底做了什么。
我想到用这个东西的需求是，我需要写一个需要保存用户进度，角色等级的一个H5小游戏，如此，在父组件中声明一个比较大的笔记本对象，然后子组件修改这个笔记本对象中的内容，在父组件中进行观察者模式监听，并且利用防抖函数不停的存到后端。在局势可以掌控的情况下，我认为这种模式会带来一定的便利。
tip: 这里提醒一下各位 这种方法实际用起来其实并不好用 我更加推荐直接provide父对象的实例 在子组件中直接修改父对象实例上的属性,主要原因还是上面这种方法一但遇到异步，就需要在data里建立一个引用嵌套层。