vue3-watch侦听器

官网

和 vue2用啥不同

多了 flush 配置控制钩子, 加了两个调试的钩子, onTrack onTrigger…

watch一个ref

注意如果是监听一个ref定义的数组, 则需要开启deep

let a = ref(0)
let b = ref([]) 
a.value++  下面的监听函数不会执行(除非设置了immediate: true)
watch(a, (v) => {})
a.value++ // 因为是顺序执行,上面的监听函数就会执行
watch(() => b.value.length, ()=>{}) 
watch(() => a.value, (v) => {}) // 是不是觉得多此一举
watch(() => a.value + 'aa', (v) => {}) // 但这样能提前处理数据, 还是觉得有点多此一举... 这里面传函数的具体使用场景是啥?????
为了方便组合  a.value + b.value...

watch多个ref

watch(() => a.value + b.value, (v) =>{})
watch([a, () => b.value], ([a, b], [oldA, oldB]) =>{})
watch(a.value.name, () => {}) 只监听a里面的name 

watch reactive定义

默认没开启深度watch, 监听整个reactive, 开启deep

watch(obj, (v) =>{}) 这样默认深度监视
watch(() => obj, (v) =>{}) 需要手动开启deep
watch(() => obj.name, (v) =>{}) 监听某个属性
watch(() => ({...obj}), (v) =>{}) 监视多个属性(但只监视第一层...)

侦听路由

watch(() => route.path, () =>{})

watchEffect 副作用函数

立即执行的, 不像watch 默认是惰性的…
先执行onValidate

const count = ref(0)
watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(() => {
  count.value++
}, 1000)

0
执行了onInvalidate
1

const stop = watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
  console.log('jjb')
})

setTimeout(() => {
    stop()  相当于手动调一下 onInvalidate 
}, 1000)

组件卸载的时候会调用onInvalidate 
可以用来销毁定时器或者事件监听.
利用watchEffect作一个防抖节流（如取消请求) 取消请求怎么做??
dialog弹窗, 检测到id变化, 我们可以重置初始参数...

一个有趣的bug

const obj1 = reactive({
  name: '1',
})
const obj2 = reactive({
  name: '2',
})
watch(obj1, (v) => {
  console.log(v)
  obj2.name = '222'
})
obj1.name = '111'  // js 按顺序执行的, 上面的那个监听能执行没问题, 但是下面的监听也执行了.
watch(obj2, (v) => {
  console.log(v)
})

---

vue2的watch

watch(){
	a(v){

	}
	a: {
		handler(){},
		deep: true,
		immediate: true
	}
}

浅谈vue3的watchEffect