Vue3中watch与watchEffect有什么区别？

        Vue3中的watch与watchEffect的区别大致就是watch需要进行显式监听，watchEffect是隐式监听。 具体的分析还需要查看源码进行解析，本文是对于为什么多使用watch而非watchEffect有所解释。

一、Vue3中watch与wacthEffect有什么区别？

        你可以认为他们是同一个功能的两种不同形态，底层的实现是一样的。

                1、watch-显式指定的依赖源，依赖源更新时执行回调函数。

                2、watchEffect-自动收集依赖源，依赖源更新时重新执行自身。

二、watch

        一个generalised的watch API 应该是这样的

watch(
  () => { /* 依赖源收集函数 */ },
  () => { /* 依赖源改变时的回调函数 */ }
)

这里的依赖源函数只会执行一次，回调函数会在每次依赖源改变的时候触发，但是并不对回调函数进行依赖收集。也就是说，依赖源和回调函数之间并不一定要有直接关系。 

三、WatchEffect

        watchEffect相当于将watch的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于watch，watchEffect的回调函数会被立即执行（即{immediate:true}）

watchEffect(
  () => { /* 依赖源同时是回调函数 */ }
)

以下两种用法在行为上基本等价

watchEffect(
  () => console.log(counter.value)
)

watch(
  () => counter.value,
  () => console.log(counter.value),
  { immediate: true }
)

与watch不同的一点是，在watchEffect中依赖源会被重复执行，动态新增加的依赖也会被收集，例如：

const counter = ref(0)
const enabled = ref(false)

watchEffect(() => {
  if (enabled.value)
    console.log(counter.value)
})

// (以下忽略 nextTick)

// watchEffect 会被立即执行，因为 “enabled“ 为 false, 此时仅收集到 “enabled“ 依赖
counter.value += 1 // 无反应

enabled.value = true // Effect 触发，控制台出 "1"
counter.value += 1 // “counter“ 被作为新的依赖被收集，控制台出 "2"

enabled.value = false // 函数被重新执行，无输出
counter.value += 1 // 函数被重新执行，无输出 (虽然 counter 已经没有用了，但是作为依赖还是会触发函数）

顺带一提，computed其实类似一个带输出的同步版本的watchEffect。

四、什么时候用什么？

        推荐在大部分时候用watch 显式的指定依赖以避免不必要的重复触发，也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect适用于一些逻辑相对于简单，依赖源和逻辑强相关的场景。