在 Vue 中provide和inject是响应式的吗？

Vue 2月前 255

当我们在使用Vue.js时，可能会遇到父组件需要将数据传递给子组件的情况，而子组件需要使用到该数据。Vue.js提供了两个API，即provide和inject，可以帮助我们实现这一过程。那么在Vue.js中，provide和inject是否是响应式的呢？本文将对这一问题进行详细讲解并举例说明。

1、provide和inject的使用

首先，我们来了解下provide和inject这两个API的使用方法。

首先，在父组件中使用provide进行数据传递，如下所示：

provide: {
  name: 'Vue.js',
  author: 'Evan You',
  version: '2.6.11'
}

在子组件中使用inject进行数据接收，如下所示：

inject: ['name', 'author', 'version'],
mounted () {
  console.log(this.name) // Vue.js
  console.log(this.author) // Evan You
  console.log(this.version) // 2.6.11
}

2、provide和inject是否是响应式的

在Vue.js中，data、computed、watch等属性的改变都是可以触发视图更新的。那么，provide和inject是否也能实现响应式呢？

简单来说，provide和inject都不属于响应式属性。当provide提供的值发生变化时，inject并不会自动更新。因此，如果在需要响应式的场景中使用provide和inject，需要通过Vue.js提供的其它API来实现。

我们可以通过在provide中提供一个对象，这样inject接收到的就是一个响应式对象，如下所示：

provide () {
  return {
    data: this.data
  }
},
data () {
  return {
    data: {
      message: 'Hello Vue.js'
    }
  }
},

使用inject接收响应式对象的方法如下：

inject: ['data'],
mounted () {
  console.log(this.data.message) // Hello Vue.js
  this.data.message = 'Hello World'
  console.log(this.data.message) // Hello World
}

在这个例子中，当data中的数据发生变化时，inject就能够实现响应式更新。当然，这只局限于提供的对象是响应式对象的情况下。如果提供的是一个普通对象，并不会使inject具有响应式特性。