Vue中的 provide 和 inject 如何实现响应式传值？

官方文档对于provide和inject的说明：传送门.

由文档可以得知，这对选项必须搭配使用才能有效果

**使用场景：**当父组件需要给子孙组件共享父组件的数据时，在父组件中通过 provide 返回一个对象，在子孙组件中通过 inject:[key] (key是父组件provide对象绑定的key) ，如此就可以在子孙组件中共享父组件的数据

在使用场景中，肯定是希望父组件的数据一旦发生改变，子孙组件获取到的也是父组件更新后的数据。那么，怎么实现父组件与子孙组件所绑定的数据动态响应呢？

-------------------parent.vue----------------------
provide(){
    return {
   // keyName: {name:this.name}, // value 是对象才能实现响应式，也就是引用类型
      keyName: this.changeValue // 通过函数的方式也可以[注意，这里是把函数作为value，而不是this.changeValue()]
   // keyName: 'test' value 如果是基本类型，就无法实现响应式
    }
  },
data(){
  return {
	name:'张三'
}
  },
  methods: {
  	changeValue(){
  		this.name = '改变后的名字-李四'
  	}
  }  
  -------------grandson.vue-----------------
  inject:['keyName']
  create(){
	console.log(this.keyName) // 改变后的名字-李四
}