Vue3 中 watch 和 watchEffec t的区别及使用场景

在Vue 3中，watch和watchEffect是用于监听响应式数据变化的两个重要API。它们在使用方式和功能上有一些区别，下面将从不同方面进行比较。

1. 使用方式

watch的使用方式是通过在组件选项中定义一个watch对象，然后在其中定义需要监听的响应式数据和回调函数。例如：

watch: {count(newValue, oldValue) {// 响应式数据count发生变化时执行的回调函数console.log('count发生变化：', newValue, oldValue);}
}

而watchEffect则是直接在组件内部使用，它会自动追踪组件中使用的响应式数据，并在数据变化时执行回调函数。例如：

watchEffect(() => {// 响应式数据发生变化时执行的回调函数console.log('响应式数据发生变化');
});

2. 监听ref定义的响应式数据

watch可以直接监听ref定义的响应式数据，例如：

watch(count, (newValue, oldValue) => {console.log('count发生变化：', newValue, oldValue);
});

而watchEffect也可以监听ref定义的响应式数据，但是不需要显式地指定要监听的数据，它会自动追踪使用的响应式数据。

3. 监听reactive定义的响应式数据

watch可以监听reactive定义的响应式数据，但需要使用toRefs函数将reactive对象转换为ref对象，例如：

const state = reactive({count: 0
});watch(toRefs(state), (newValue, oldValue) => {console.log('count发生变化：', newValue.count, oldValue.count);
});

watchEffect同样可以监听reactive定义的响应式数据，无需额外处理。

4. 监听多个响应式数据

watch可以同时监听多个响应式数据，通过将需要监听的数据以数组的形式传递给watch函数，例如：

watch([count, name], ([countValue, nameValue], [countOldValue, nameOldValue]) => {console.log('count和name发生变化：', countValue, nameValue, countOldValue, nameOldValue);
});

watchEffect则无法直接监听多个响应式数据，需要通过在回调函数内部使用多个响应式数据来实现。

5. 监听对象中某个属性的变化

watch可以监听对象中某个属性的变化，通过在对象属性名前加上字符串插值'$'来指定要监听的属性，例如：

watch({'$user.name': (newValue, oldValue) => {console.log('user.name发生变化：', newValue, oldValue);}
});

watchEffect则无法直接监听对象中某个属性的变化，需要通过在回调函数内部使用对象属性来实现。

6. 深度监听（deep）

watch可以通过设置deep选项来进行深度监听，即递归监听对象内部的变化，例如：

watch(obj, (newValue, oldValue) => {console.log('obj发生变化：', newValue, oldValue);
}, { deep: true });

watchEffect默认会进行深度监听，无需额外设置。

7. 默认执行（immediate）

watch可以通过设置immediate选项来在初始渲染时立即执行回调函数，例如：

watch(count, (newValue, oldValue) => {console.log('count发生变化：', newValue, oldValue);
}, { immediate: true });

watchEffect默认会在初始渲染时立即执行回调函数，无需额外设置。

综上所述，watch和watchEffect在使用方式和功能上有一些区别。根据具体需求选择合适的API进行使用，可以更好地实现对响应式数据的监听和处理。

以上就是关于Vue 3中watch和watchEffect的区别的介绍，希望对你有所帮助！

参考文档：Vue 3 Composition API - Watch、Vue 3 Composition API - watchEffect