Vue中的Provide/Inject 实现响应式数据

Vue中， Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的（设计如此）。

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的

以上引用自官网

可能之所以这样设计，是为了避免数据的混乱。就如同props不能被子组件直接修改一样。

从代码角度讲

  data() {
    return {
        foo: 'foo',
        bar: 'bar'
        baz: {hello: 'world'}
    }
  },
  provide() {
    return {
      foo: this.foo,
      bar: this.bar,
    }
  },

当我们以如上的形式书写代码的时候，其实相当于对this.foo和this.baz做了一层浅拷贝，固当子组件inject的时候已经丢失了响应式功能了。但由于仅仅是浅拷贝，所以响应式对象的属性仍旧是响应式的。

  // 父组件
  provide() {
    return {
      baz: this.baz,
    }
  },
  // 子组件baz.hello仍旧是响应式的。
  inject: ['baz']