vue.js官方文档：
首先假设我们在祖辈时候传入进来是个动态的数据，官方不是说如果你传入了一个可监听的对象，那么其对象还是可响应的么？
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组件：
<template> <div> Parent组件 <br/> <button type="button" @click="changeName">改变name</button> <br/> Parent组件中 name的值: {{name}} <Child v-bind="{name: 'k3vvvv'}" /> </div> </template> <style scoped> .parent-container { padding: 30px; border: 1px solid burlywood; } </style> <script> import Child from './Child' export default { name: 'Parent', data () { return { name: 'Kevin' } }, methods: { changeName (val) { this.name = 'Kev' } }, provide: function () { return { nameFromParent: this.name, getReaciveNameFromParent: () => this.name } }, // provide: { // nameFromParent: this.name, // getReaciveNameFromParent: () => this.name // }, components: { Child } } </script>
Child组件
<template> <div> Child组件 <br/> <GrandSon /> </div> </template> <style scoped> .child-container { padding: 30px; border: 1px solid burlywood; } </style> <script> import GrandSon from './GrandSon' export default { components: { GrandSon } } </script>
GrandSon组件：
<template> <div> Grandson组件 <br/> {{nameFromParent}} <br/> {{reactiveNameFromParent}} </div> </template> <style scoped> .grandson-container { padding: 30px; border: 1px solid burlywood; } </style> <script> export default { inject: ['nameFromParent', 'getReaciveNameFromParent'], computed: { reactiveNameFromParent () { return this.getReaciveNameFromParent() } }, watch: { 'reactiveNameFromParent': function (val) { console.log('来自Parent组件的name值发生了变化', val) } }, mounted () { console.log(this.nameFromParent, 'nameFromParent') } } </script>
结果:
来自于reactiveNameFromParent ，随着祖先组件变化而变化了