本文共 906 字，大约阅读时间需要 3 分钟。

Vue中，provide和inject机制实现了跨组件的通信。但有一个关键问题：数据并不是直接响应式的（设计上如此）.

为什么会这样设计？

这背后的原因在于，希望避免数据的混乱。就像props一样，子组件无法直接修改父组件的数据。这有助于保持数据的一致性和可控性.

代码层面讲

假设父组件代码如下：

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

当我们以这种方式书写代码时，this.foo和this.baz都会被浅拷贝，导致子组件注入的数据失去响应式特性。但由于只是浅拷贝，属性仍然保持响应式状态。

例如：

// 父组件
provide() {
  return {
    baz: this.baz,
  };
},
// 子组件
inject: ['baz'];

子组件中的baz.hello仍然是响应式的.

如何实现整体响应式数据？

如果希望所有数据都保持响应式，可以参考以下方法：

// 父组件
provide() {
  return {
    reactiveMsg: () => this.msg,
  };
},

子组件：

inject: ['reactiveMsg'],
computed: {
  computedProperty() {
    return this.reactiveMsg();
  },
},
watch: {
  computedProperty() {
    console.log('数据改变了');
  },
}

这种方式通过返回一个函数来提供响应式数据，整体数据的响应式状态得以保留.

优势

这种方法的好处在于，computedProperty是一个计算属性，无法直接修改其值。这有助于防止数据混乱.

通过深入理解Vue的设计意图，可以更好地利用这些工具来构建高效且可靠的Vue应用.