千家信息网

Vue.js中provide/inject怎么实现响应式数据更新

发表于:2025-02-04 作者:千家信息网编辑
千家信息网最后更新 2025年02月04日,今天小编给大家分享一下Vue.js中provide/inject怎么实现响应式数据更新的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读
千家信息网最后更新 2025年02月04日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组件:

Child组件

GrandSon组件:

以上就是"Vue.js中provide/inject怎么实现响应式数据更新"这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注行业资讯频道。

0