watch 和 watchEffect 异同

watchEffect 立即运行一个函数，然后被动地追踪它的依赖，当这些依赖改变时重新执行该函数。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

count.value++
// -> logs 1

watch 侦测一个或多个响应式数据源并在数据源变化时调用一个回调函数。

const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

重点

1. watchEffect 立即运行一个函数，然后被动地追踪它的依赖，当这些依赖改变时重新执行该函数。watch 侦测一个或多个响应式数据源并在数据源变化时调用一个回调函数。
2. watchEffect(effect)是一种特殊 watch，传入的函数既是依赖收集的数据源，也是回调函数。如果我们不关心响应式数据变化前后的值，只是想拿这些数据做些事情，那么 watchEffect 就是我们需要的。watch 更底层，可以接收多种数据源，包括用于依赖收集的 getter 函数，因此它完全可以实现 watchEffect 的功能，同时由于可以指定 getter 函数，依赖可以控制的更精确，还能获取数据变化前后的值，因此如果需要这些时我们会使用 watch。
3. watchEffect 在使用时，传入的函数会立刻执行一次。watch 默认情况下并不会执行回调函数，除非我们手动设置 immediate 选项。
4. 从实现上来说，watchEffect(fn)相当于 watch(fn,fn,{immediate:true})