watch与watchEffect的区别

相同点

在Vue 3中，watch和watchEffect都是用于响应式数据的变化，但是它们之间有一些区别

watch

是一个选项API,在组件的选项中使用，可监听指定的数据变化，并执行毁掉函数。

1. 它需要指定监控的数据和变化；
2. 当被监听的数据发生改变时，会自动调用。
3. watch提供了更多的控制选项，可以设置深度监听等

watchEffect

是一个函数API,在组件的setup函数或生命周期函数中使用。它会自动追踪依赖的响应式数据，并在数据变化时执行回调函数
1.watchEffect不需要显示指定要监听的数据，它会自动跟踪函数内部使用的响应数据。
2.一般用于异步操作或者更新UI

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
  </div>
</template>
 
<script>
import { reactive, watch, watchEffect } from 'vue';
 
export default {
  setup() {
    const state = reactive({
      count: 0,
    });
 
    // 使用 watch 监听 count 的变化
    watch(
      () => state.count,
      (newVal, oldVal) => {
        console.log(`count 变化，新值为 ${newVal}，旧值为 ${oldVal}`);
      }
    );
 
    // 使用 watchEffect 响应式地追踪 count
    watchEffect(() => {
      state.double = state.count * 2;
    });
 
    return {
      count: state.count,
      double: state.double,
    };
  },
};
</script>```
使用 watch 函数，我们监听了 count 的变化，并在每次变化时执行回调函数。
通过 watchEffect 函数，我们自动追踪了 count 的依赖，并在其变化时更新了 state.double 的值。

要选择使用watch还是watchEffect，取决于具体的场景和需求。

如果需要对响应式数据进行细粒度的控制，例如只监听特定的属性、需要手动停止监听等，那么使用watch会更加合适。

如果只是需要自动追踪响应式数据并触发副作用，例如执行异步操作或者更新UI，那么使用watchEffect会更加方便。

总之，watch和watchEffect都是非常有用的响应式API，开发者可以根据具体的需求选择使用哪一个。另外，在使用watch和watchEffect时，需要注意避免多余的计算和渲染，以提高应用的性能和响应速度。