Vue3 watch 侦听器 | watchEffect

watch

watch(数据源, 回调, option)

在回调函数中执行 effect 副作用

支持的数据源：

1. 一个 ref (包括计算属性)
2. 一个响应式对象
3. 一个 getter 函数
4. 多个数据源组成的数组

对于引用类型 默认不监听属性变化，除非设置deep选项，而 reactive 不需要设置 deep
引用类型 的newvalue 和 oldvalue 值一致
如果要监听引用类型的属性 可以用函数返回的写法

option 属性	作用
deep	是否对 对象的属性 进行侦听 （对象中对象的属性也会被侦听）
immediate	是否立即以表达式的当前值触发回调
flush	pre 在渲染前调用回调（默认） post 将回调推迟到渲染之后 sync一旦值发生变化，回调将被同步调用

watch 与 computed 的区别

watch 允许执行异步操作 (如访问一个 API)
限制我们执行该操作的频率，并在得到最终结果前，设置中间状态。
computed 计算属性无法做到的。

源码

经过一系列判断
最终会调用 doWatch

watchEffect

参数传入一个函数。
返回 停止监听的函数

会立即执行传入的一个函数
自动追踪其中依赖，在依赖变更时重新运行该函数

对于有多个依赖项的侦听器来说，使用 watchEffect() 可以消除手动维护依赖列表的负担。

对于副作用直接使用数据源（不包括旧值），且在第一次加载就会执行，
则可以直接使用 watchEffect 取代 watch。写法上更简洁。

调用 watchEffect() 返回的函数可以手动停止监听 （正常会在组件卸载时停止）

watch 与 watchEffect 区别：
watch 只追踪明确侦听的数据源，不会追踪任何在回调中访问到的东西。
watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。自动追踪所有能访问到的响应式属性。代码往往更简洁，但有时其响应性依赖关系会不那么明确。

watchPostEffect() watchSyncEffect() 仅 flush 选项不同