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

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

首先了解Vue.js中provide/inject的基本用法:

官方的说明大家可以打开上面的链接去看,说通俗点,就是可以用来父辈们给祖孙传值,请看清楚,这里说的是可以隔代传值,传统的props只能父传子,不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,这就是它最大的特性。

基本用法:

provide 选项应该是:一个对象或返回一个对象的函数
inject 选项应该是:一个字符串数组,或 一个对象,对象的 [key] 是本地的绑定名
代码执行顺序:
data
provide
created//在这个阶段$el还未生成,在这先处理privide的逻辑,子孙组件才可以取到inject值
mounted

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

parent父页面:

export default {
  data(){
    return { fonnB: 'old word '}  
  },
provide() {
    return   { foo: this.fonnB }
  },
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 {
    data(){
      return {
        fonnB: 'old word'
      }  
    },
    provide() {
     return   { foo: this.fonnB }
    },
    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,数据也是响应式的,但为什么没更新,有点疑惑,如果有大佬知道能解释清楚的可以探讨。

但是,但是,但是!实际需求肯定没有这么简单,往往我们需要的是共享父组件里面的动态数据,这些数据可能来自于接口 或者 store。 就是说父组件里面的数据发生变化之后,需要同步到子孙组件里面。这时候该怎么做呢?

我想的是将一个函数赋值给provide的一个值,这个函数返回父组件的动态数据,然后在子孙组件里面调用这个函数。
实际上这个函数存储了父组件实例的引用,所以每次子组件都能获取到最新的数据。代码长下面的样子:
Parent组件:

<template>
    <div class="parent-container">
      Parent组件
      <br/>
      <button type="button" @click="changeName">改变name</button>
      <br/>
      Parent组件中 name的值: {{name}}
      <Child  v-bind="{name: 'k3vvvv'}" />
    </div>
</template>
<script>
import Child from './Child'
export default {
  name: 'Parent',
  data () {
    return {
      name: 'Kevin'
    }
  },
  methods: {
    changeName (val) {
      this.name = 'New Kevin'
    }
  },
  provide () {
    return {
      nameFromParent: this.name,
      getReaciveNameFromParent: () => this.name
    }
  },
  // provide: {
  // nameFromParent: this.name,
  // getReaciveNameFromParent: () => this.name
  // },
  components: {
    Child
  }
}
</script>

Child组件

<template>
  <div class="child-container">
    Child组件
    <br/>
    <GrandSon />
  </div>
</template>
<script>
import GrandSon from './GrandSon'
export default {
  components: {
    GrandSon
  }
}
</script>

GrandSon组件:

<template>
  <div class="grandson-container">
    Grandson组件
    <br/>
    {{nameFromParent}}
    <br/>
    {{reactiveNameFromParent}}
  </div>
</template>
<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 ,随着祖先组件变化而变化了