vue3快速入门-watch与watchEffect

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

watch(watchSource, callback, options?)

侦听源，这个参数可以为以下几种：

1. 一个ref
2. 一个响应式对象
3. 一个有返回值的函数
4. 以上类型值组成的数组

侦听源发生变化时调用的回调函数, 这个回调函数接收三个参数：新值、旧值
以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。
当侦听多个来源时，回调函数接受两个数组，分别对应侦听源数组中的新值和旧值。

这个可选参数是一个对象，支持以下选项：

1. immediate： 在侦听器创建时立即触发回调, 第一次调用时旧值是 undefined
2. deep: 如果侦听源是对象，强制深度遍历，以便在深层级变更时启动回调
3. flush: 调整回调函数的刷新时机
4. onTrack / onTrigger: 调试侦听器的依赖

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

watchEffect(callback)

页面加载后立即运行这个回调函数，同时响应式地追踪其依赖，并在依赖更改时重新执行

1. watchEffect只需传递一个回调，不需要传递需要侦听的数据，它默认主动执行一次收集依赖;
   而watch至少需要传递两个参数，需要侦听的数据和回调函数
2. watchEffect是立即执行的，在页面初始化时会默认执行一次回调函数来收集依赖;
   而watch是惰性的，不会立即执行回调，但可以通过配置immediate让它默认执行一次
3. watchEffect获取不到更改前的值; 而watch可以获取到更改前后的值

// 只要count发生变化就会执行一次回调
const count = ref(0);
watchEffect((newV) => {
    console.log('watchEffect回调触发', count.value);
})
count.value++;

// 只要count发生变化就会执行一次回调
const count = ref(0);
const countWatch = watchEffect((newV) => {
  console.log("watchEffect回调触发", count.value);
});
count.value++;
onMounted(() => {
  countWatch();  // 停止侦听
});