vue3 监听组件props

在Vue 3中，可以通过使用`watch`或`watchEffect`函数来监听组件的props。这些函数可以接受一个回调函数作为参数，当组件的props发生变化时，回调函数将被调用。

以下是一个使用`watch`函数监听组件props的示例：

import { watch } from 'vue';

export default {
  setup() {
    const myProp = ref('');

    watch(
      () => this.myProp,
      (newVal, oldVal) => {
      // 当myProp发生变化时执行的回调函数
      console.log(`myProp值变化为：${newVal}, 之前值为：${oldVal}`);
    },
    { deep: true } // 可以选择深度监听对象属性的变化
  }
}

在这个示例中，我们创建了一个名为`myProp`的引用，并通过`watch`函数监听它。当`myProp`的值发生变化时，回调函数将被调用，并打印出新的值和之前值的变化情况。你可以根据需要自定义回调函数的逻辑。

另外，Vue 3还引入了响应式系统的增强功能，例如使用`watchEffect`函数来更简洁地监听组件的props。下面是一个使用`watchEffect`函数的示例：

import { watchEffect } from 'vue';

export default {
  setup() {
    const myProp = ref('');

    watchEffect(() => {
      // 当myProp发生变化时执行的回调函数
      console.log(`myProp值变化为：${myProp.value}`);
    });
  }
}

在这个示例中，我们使用`watchEffect`函数来监听`myProp`的值变化。当`myProp`的值发生变化时，回调函数将被调用，并打印出新的值。这种方式更加简洁，并且可以更好地处理异步操作。

需要注意的是，监听组件的props时需要注意性能问题，尤其是在大型项目中。如果props的数量和变化频率较高，可能会导致性能问题。因此，应该谨慎使用监听组件props的功能，并确保在必要时进行性能优化。