Vue 3 父子组件传值 - 子组件 watch 监听执行多次的解决办法

在 Vue 3 中，可以使用'watch'函数来监听父组件传递给子组件的属性，并在属性变化时执行相应的操作。但是，如果没有正确地设置'watch'函数，可能会导致监听执行多次的问题。

以下是解决子组件监听执行多次的几种常见方法：

1. 使用'immediate: true'选项：在'watch'函数中设置'immediate: true'选项可以在组件初始化时立即执行监听函数，并且在后续属性变化时也会执行监听函数。这样可以避免初始化后的多次执行。

watch(() => {
  return props.value;
}, (newValue, oldValue) => {
  // 监听函数逻辑
}, { immediate: true });

2. 使用'ref'包装属性：如果父组件传递给子组件的属性是一个简单类型（如字符串、数字等），可以使用'ref'函数将其包装成一个响应式对象。这样可以确保每次属性变化时都会触发监听函数。

const value = ref(props.value);

watch(value, (newValue, oldValue) => {
  // 监听函数逻辑
});

3. 使用'deep'选项：如果父组件传递给子组件的属性是一个复杂对象（如数组、对象等），可以在'watch'函数中设置'deep: true'选项来深度监听属性的变化。这样可以确保每次属性的任何变化都会触发监听函数。

watch(() => {
  return props.value;
}, (newValue, oldValue) => {
  // 监听函数逻辑
}, { deep: true });

以上是几种常见的解决子组件监听执行多次的方法，具体的选择取决于你的业务需求和组件设计。根据实际情况选择合适的方法来解决问题。