和 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
}
}