Vue.js中provide/inject实现响应式数据更新的方法示例
vue.js官方文档:https://cn.vuejs.org/v2/api/#provide-inject
首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么?
parent父页面:
exportdefault{ provide(){ return{foo:this.fonnB} }, data(){ return{fonnB:'oldword'} } created(){ setTimeout(()=>{ this.fonnB='newwords';//这里仅仅foonB变化了,foo没有变化 this._provided.foo="newwords";//这里foo变化了,但子组件获得的foo依旧是oldwords console.log(this._provided); },1000) }, }
child子页面:
exportdefault{ inject:['foo'], data(){ return{chilrfoo:this.foo} }, created(){ setTimeout(()=>{ //子组件获得的foo依旧是oldwords console.log(this.foo) },2000) } }
结果:
通过上面方式,经过验证,子组件页面都没办法实现响应更新this.foo的值。可能我们对官方理解还是有误,下面通过网上资料和自己构思实现了响应式数据更新
示例(结果仍不可行)
很明显上面再父组件定时器内我们是改变了数据源,这个时候我们就在想,我们改变的数据到底有没有传入到子孙组件中,那么要验证这个问题,我们不妨可以在子孙组件中手动写set函数,computed本身就只相当于一个get函数,当然,你也可以试试watch
parent父页面:
exportdefault{ provide(){ return{foo:this.fonnB} }, data(){ return{ fonnB:'oldword' } } created(){ setTimeout(()=>{ this.fonnB="newwords"; //这里foo变化了,但子组件获得的foo依旧是oldwords },1000) }, }
child子页面:
exportdefault{ inject:['foo'], data(){ return{ childfooOld:this.foo } }, computed:{ chilrdfoo(){ returnthis.foo } }, created(){ console.log(this.foo) //->'oldword' setTimeout(()=>{ console.log(this.chilrdfoo);//这里计算属性依旧是oldwords },2000); } }
通过computed,我们都知道data中有get/set,数据也是响应式的,但为什么没更新,有点疑惑,如果有大佬知道能解释清楚的可以探讨。
但是,但是,但是!实际需求肯定没有这么简单,往往我们需要的是共享父组件里面的动态数据,这些数据可能来自于data或者store。就是说父组件里面的数据发生变化之后,需要同步到子孙组件里面。这时候该怎么做呢?
我想的是将一个函数赋值给provide的一个值,这个函数返回父组件的动态数据,然后在子孙组件里面调用这个函数。
实际上这个函数存储了父组件实例的引用,所以每次子组件都能获取到最新的数据。代码长下面的样子:
Parent组件:
Parent组件
改变name
Parent组件中name的值:{{name}}
Child组件
Child组件
GrandSon组件:
Grandson组件
{{nameFromParent}}
{{reactiveNameFromParent}}