watchEffect和watch使用场景上怎么区分？

Question

这两个api的使用我是明白的，但我有点分不清什么场景用watchEffect更好呢？

比如这样的场景：监听某个值更新触发事件并在进入页面时就生效。

那这种情况以下两种写法都能实现：

const repo = ref<string | null>(null)
const emit = defineEmits(['handleFilter'])

watch(repo, (value: string | null, prevValue?: string | null) => {
  console.log(value, prevValue)
  emit('handleFilter', value)
}, { immediate: true })

watchEffect(() => {
  console.log(repo.value)
  emit('handleFilter', repo.value)
})

这时候用哪种更合适呢？

Answer 1

一个手动指定依赖，一个自动收集依赖

Answer 2

区别的话文档已经说了https://v3.cn.vuejs.org/api/c...
使用哪种随你喜欢，如果不需要使用先前值并且希望立即执行就用watchEffect，可以少写一点代码。
watch的自由度更高，watchEffect相当于封装了一层