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

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

官方的說明大家可以打開上面的鏈接去看，說通俗點(diǎn)，就是可以用來父輩們給祖孫傳值，請(qǐng)看清楚，這里說的是可以隔代傳值，傳統(tǒng)的props只能父?jìng)髯?，不論子組件有多深，只要調(diào)用了inject那么就可以注入provider中的數(shù)據(jù)。而不是局限于只能從當(dāng)前父組件的prop屬性來獲取數(shù)據(jù)，這就是它最大的特性。

基本用法：

provide 選項(xiàng)應(yīng)該是：一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)
inject 選項(xiàng)應(yīng)該是：一個(gè)字符串?dāng)?shù)組，或 一個(gè)對(duì)象，對(duì)象的 [key] 是本地的綁定名
代碼執(zhí)行順序：
data
provide
created//在這個(gè)階段$el還未生成，在這先處理privide的邏輯，子孫組件才可以取到inject值
mounted

首先假設(shè)我們?cè)谧孑厒魅脒M(jìn)來是個(gè)動(dòng)態(tài)的數(shù)據(jù)，官方不是說如果你傳入了一個(gè)可監(jiān)聽的對(duì)象，那么其對(duì)象還是可響應(yīng)的么？

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)
  }
}

結(jié)果:

通過上面方式，經(jīng)過驗(yàn)證，子組件頁面都沒辦法實(shí)現(xiàn)響應(yīng)更新this.foo的值?？赡芪覀儗?duì)官方理解還是有誤，下面通過網(wǎng)上資料和自己構(gòu)思實(shí)現(xiàn)了響應(yīng)式數(shù)據(jù)更新

示例（結(jié)果仍不可行）
很明顯上面再父組件定時(shí)器內(nèi)我們是改變了數(shù)據(jù)源，這個(gè)時(shí)候我們就在想，我們改變的數(shù)據(jù)到底有沒有傳入到子孫組件中，那么要驗(yàn)證這個(gè)問題，我們不妨可以在子孫組件中手動(dòng)寫set 函數(shù)，computed 本身就只相當(dāng)于一個(gè)get函數(shù)，當(dāng)然，你也可以試試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); // 這里計(jì)算屬性依舊是old words
        }, 2000);
      }
  }

通過computed，我們都知道data中有g(shù)et/set，數(shù)據(jù)也是響應(yīng)式的，但為什么沒更新，有點(diǎn)疑惑，如果有大佬知道能解釋清楚的可以探討。

但是，但是，但是！實(shí)際需求肯定沒有這么簡(jiǎn)單，往往我們需要的是共享父組件里面的動(dòng)態(tài)數(shù)據(jù)，這些數(shù)據(jù)可能來自于接口 或者 store。 就是說父組件里面的數(shù)據(jù)發(fā)生變化之后，需要同步到子孫組件里面。這時(shí)候該怎么做呢？

我想的是將一個(gè)函數(shù)賦值給provide的一個(gè)值，這個(gè)函數(shù)返回父組件的動(dòng)態(tài)數(shù)據(jù)，然后在子孫組件里面調(diào)用這個(gè)函數(shù)。
實(shí)際上這個(gè)函數(shù)存儲(chǔ)了父組件實(shí)例的引用，所以每次子組件都能獲取到最新的數(shù)據(jù)。代碼長(zhǎng)下面的樣子：
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值發(fā)生了變化', val)
    }
  },
  mounted () {
    console.log(this.nameFromParent, 'nameFromParent')
  }
}
</script>

結(jié)果:

來自于reactiveNameFromParent ，隨著祖先組件變化而變化了