vue3监听

一、watch

// source一定要是响应数据ref或者reactive
watch(source, (n, o) => {
    ...
}, {
    immediate: true,
    deep: true    // source是个reactive，默认是开启深度监听的
})

// 监听对象的单一属性
watch(() => obj.attr,() => {}, {})

二、watchEffect（副作用函数）

watchEffect(onInvalidate => {用户自定义副作用}, {flush: 'post',onTrack(e){},onTrigger(e){}})

特点：

1、非惰性，副作用函数会默认调用一次，就跟设置了immediate：true一样

2、不可访问旧值

开发思维模式的转变（不再是生命周期的思维，而是副作用思维）：

1、把组件看成一个纯净的渲染函数，把一个状态渲染成UI        UI = fn(state)

2、除了渲染UI之外所有的事都是副作用，eg：异步请求、定时器、操作dom...

3、写副作用的代码不一定要有被监听的响应数据

需关键掌握：

1、'副作用'做什么，及其触发时机

2、'清除副作用'做什么，及其触发时机

1、自定义副作用的触发时机

a、一旦运行，立即监听，副作用函数会调用一次
b、副作用中的多个状态的改变，vue会合并成一次去执行监听器
c、vue内部有个更新dom的副作用函数（update），自定义副作用函数在update之前执行；
这就导致自定义副作用函数第一次调用是拿不到dom；
可以通过设置flush：'post'，让自定义副作用函数在update之后执行（'pre'是默认值）

2、watchEffect手动停止监听

目的在于：让副作用停止执行
const stop = watchEffect(onInvalidate => {副作用})
const clickHandler = () => { stop() }

3、watchEffect清除副作用

watchEffect(onInvalidate => {
   副作用
   onInvalidate(() => {
        清除副作用的操作，如：
        num = 0、清除定时器、中断可能错误的请求
   })
},{})

'清除副作用'的触发时机:
1、副作用即将重新执行时（有两层理解）
    a、'清除副作用'在'副作用'前面执行
    b、'副作用'第一次执行时，'清除副作用'还没有调用过
2、监听器被停止时
3、组件被销毁时

4、watchEffect调试

watchEffect((() => {}, {
    // 追踪依赖时，一个依赖只触发一次
    onTrack(e) {},
    // 依赖改变时
    onTrigger(e) {}
})