Vue.js中如何通过provideinject实现响应式数据更新示例？

本文共计1021个文字，预计阅读时间需要5分钟。

Vue.js 官方文档：https://cn.vuejs.org/v2/api/

vue.js官方文档：cn.vuejs.org/v2/api/#provide-inject

首先假设我们在祖辈时候传入进来是个动态的数据，官方不是说如果你传入了一个可监听的对象，那么其对象还是可响应的么？

parent父页面：

export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word '} } created() { setTimeout(()=>{ this.fonnB = 'new words'; // 这里仅仅foonB变化了，foo没有变化 this._provided.foo="new words"; // 这里foo变化了，但子组件获得的foo 依旧是old words console.log( this._provided); },1000) }, }

child子页面：

export default { inject:['foo'], data(){ return { chilrfoo: this.foo } }, created() { setTimeout(()=>{ // 子组件获得的foo 依旧是old words console.log( this.foo) },2000) } }

结果:

通过上面方式，经过验证，子组件页面都没办法实现响应更新this.foo的值。