vue3 watch 详解

Vue3中的`watch`与Vue2中的`watch`有一些重要的变化。在Vue3中，`watch`仍然允许我们监视响应式数据的变化，并对变化做出相应的操作。不过，Vue3引入了一个新的API——`watchEffect`来取代Vue2中的`watch`。

在Vue3中，`watch`可以通过以下几种方式使用：

1. **基础用法**：可以使用`watch`方法来监视一个响应式数据的变化，并在变化发生时执行回调函数。示例如下：

import { watch } from 'vue';

watch(() => {
  // 监视的响应式数据
  return state.value;
}, (newVal, oldVal) => {
  // 响应式数据发生变化时执行的回调函数
  console.log(`new value: ${newVal}, old value: ${oldVal}`);
});

2. **立即执行**：可以通过在`watch`选项中设置`immediate`为`true`，使得监听函数会在初始创建时立即执行一次。示例如下：

watch(() => {
  // 监视的响应式数据
  return state.value;
}, (newVal, oldVal) => {
  // 响应式数据发生变化时执行的回调函数
  console.log(`new value: ${newVal}, old value: ${oldVal}`);
}, { immediate: true });

3. **深度监听**：可以通过设置`deep`为`true`来进行深度监听，以便检测对象内部值的变化。示例如下：

watch(() => {
  // 监视的响应式数据
  return state.obj;
}, (newVal, oldVal) => {
  // 响应式数据发生变化时执行的回调函数
  console.log(`new value: ${newVal}, old value: ${oldVal}`);
}, { deep: true });

此外，Vue3还引入了`watchEffect`，它可以轻松地监视响应式数据的变化，并在其变化时执行回调函数。与`watch`不同的是，`watchEffect`不需要显式指定要监视的数据，它会自动追踪代码中使用的响应式数据，并在其变化时触发。示例如下：

import { watchEffect } from 'vue';

watchEffect(() => {
  // 使用到的响应式数据
  console.log(state.value);
});

需要注意的是，在Vue3中，`watch`和`watchEffect`都是基于副作用函数实现的，所以它们可以在组件渲染期间多次执行。

以上是Vue3中`watch`和`watchEffect`的详细说明，希望能对你有所帮助！如有其他问题，请继续提问。