watch 对比 watchEffect 的区别 ​

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式

区别 ​

• watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。同时还有以下几点:
  1. 懒执行副作用
  2. 更加明确是应该由哪个状态触发侦听器重新执行
  3. 可以访问所侦听状态的前一个值和当前值
• watchEffect，初始化时会自动执行一次并响应式的追踪其依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确

停止侦听器 ​

在 setup()或 <script setup> 中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止，因此，在大多数情况下，你无需关心怎么停止一个侦听器。 一个关键点是，侦听器必须是同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。

<script setup>
import { watchEffect } from 'vue'

// 它会自动停止
watchEffect(() => {})

// ...这个则不会！
setTimeout(() => {
  watchEffect(() => {})
}, 100)

// 手动停止，调用返回的函数
const unwatch = watchEffect(() => {})
unwatch()
</script>