如何检测 vue 中的 props 变化

在 Vue 中，我们可以通过 props 来将数据从父组件传递给子组件。但当父组件的数据发生变化时，我们如何在子组件中检测到这个变化呢？本文将介绍两种方法来检测 props 变化。

Watcher 监听

在 Vue 中，我们可以使用 watch 来监听一个数据的变化。同样地，我们也可以通过 watch 来监听 props 的变化。我们只需要在子组件中定义一个 watch：

export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('props 变化了：', newVal)
    }
  }
}

这里我们监听了 message 这个 props 变化，并在回调函数中打印了新的值。这样，当父组件中的 message 数据发生变化时，就会触发这个 watch。

需要注意的是，我们通常需要在 watch 中深度监听 props，以避免由于对象或数组的引用不变造成的监听不到变化的情况。这可以通过设置 deep 为 true 来实现。

watch: {
  message: {
    handler: function (newVal, oldVal) {
      console.log('props 变化了：', newVal)
    },
    deep: true
  }
}

Computed 计算属性

除了 watch，我们也可以使用计算属性来实现对 props 变化的监听。我们需要定义一个计算属性来返回 props 值：

export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  computed: {
    messageComputed: function () {
      return this.message
    }
  }
}

此时，当父组件中的 message 发生变化时，计算属性 messageComputed 也会被重新计算，从而触发响应式更新。我们也可以在计算属性中进行其他的逻辑处理。

总结

以上，我们介绍了使用 watch 和计算属性两种方法来检测 props 的变化。它们各有优劣，使用时需要考虑场景和需求，并做出合适的选择。