vue3中的watch和watch effect的区别

在Vue3中，watch和watchEffect都是用来监听数据变化的方法，但它们之间有一些区别。

1. watch：
- watch是一个选项，可以在组件的选项对象中定义。
- watch需要指定要监听的数据和回调函数。
- 当监听的数据发生变化时，回调函数会被触发。
- 回调函数接收两个参数：新值和旧值。
- 可以通过设置immediate选项来立即执行回调函数。

2. watchEffect：
- watchEffect是一个函数，可以在组件的setup函数中使用。
- watchEffect会自动追踪其内部使用的响应式数据，并在数据变化时重新运行。
- watchEffect不需要指定要监听的数据，它会自动追踪使用的响应式数据。
- watchEffect的回调函数没有参数，可以直接访问响应式数据。
- watchEffect会在组件初始化时立即执行一次，并在每次响应式数据变化时重新执行。

下面是一个示例代码，演示了watch和watchEffect的使用：

// watch示例
watch('data', (newValue, oldValue) => {
  console.log('data changed:', newValue, oldValue);
}, { immediate: true });

// watchEffect示例
watchEffect(() => {
  console.log('data changed:', data.value);
});