Vue.js中provide/inject如何实现响应式数据更新-创新互联

这篇文章主要介绍了Vue.js中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的值。可能我们对官方理解还是有误，下面通过网上资料和自己构思实现了响应式数据更新

示例（结果仍不可行）

很明显上面再父组件定时器内我们是改变了数据源，这个时候我们就在想，我们改变的数据到底有没有传入到子孙组件中，那么要验证这个问题，我们不妨可以在子孙组件中手动写set 函数，computed 本身就只相当于一个get函数，当然，你也可以试试watch

parent父页面：

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

  },

 }

child子页面：

export default {
  inject:['foo'],
  data(){
   return {
    childfooOld: this.foo
   } 
  },
  computed:{
    chilrdfoo() {
      return this.foo
    }
  },
 created () {
    console.log(this.foo)
    // -> 'old word'
    setTimeout(() => {
      console.log(this.chilrdfoo); // 这里计算属性依旧是old words
    }, 2000);
   }
 }

通过computed，我们都知道data中有get/set，数据也是响应式的，但为什么没更新，有点疑惑，如果有大佬知道能解释清楚的可以探讨。

但是，但是，但是！实际需求肯定没有这么简单，往往我们需要的是共享父组件里面的动态数据，这些数据可能来自于data 或者 store。 就是说父组件里面的数据发生变化之后，需要同步到子孙组件里面。这时候该怎么做呢？
我想的是将一个函数赋值给provide的一个值，这个函数返回父组件的动态数据，然后在子孙组件里面调用这个函数。
实际上这个函数存储了父组件实例的引用，所以每次子组件都能获取到最新的数据。代码长下面的样子：

Parent组件：

 .parent-container {
  padding: 30px;
  border: 1px solid burlywood;
 }

Child组件

 .child-container {
  padding: 30px;
  border: 1px solid burlywood;
 }

GrandSon组件：

 .grandson-container {
  padding: 30px;
  border: 1px solid burlywood;
 }

感谢你能够认真阅读完这篇文章，希望小编分享的“Vue.js中provide/inject如何实现响应式数据更新”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!