vue watchEffect

一见如故

• 开发思维模式的转变（不再是生命周期的思维，而是副作用思维）
• '副作用’做了什么，及其触发时机；'清除副作用’做什么，及其触发时机

---

副作用思维

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

• 把组件看成一个纯净的渲染函数，把一个状态渲染成UI UI = fn(state)
• 除了渲染UI之外所有的事都是副作用，eg：异步请求、定时器、操作dom…
• 写副作用的代码不一定要有被监听的响应数据

自定义副作用的触发时机

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

watchEffect清除副作用

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

'清除副作用’触发时机

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

watchEffect手动停止监听

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

watchEffect调试

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