vue使用监听

watch

• watch(source, (n, o) => {}, {immediate: true}) //source为响应式数据
• 监听对象的单一属性，source要用回调函数返回的形式

watch(() => obj.attr,() => {}, {})

---

watchEffect

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

• 副作用思维

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

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

• 自定义副作用的触发时机

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

• watchEffect清除副作用

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

• '清除副作用’触发时机

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

• watchEffect手动停止监听

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

• watchEffect调试

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