这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
vue3 watch的和vue2的watch功能上是一样的 但是写法上区别还是挺大的 先看vue2的写法
{
data: function() {
return {
name: '',
}
}
watch: {
name: function(old,newval) { // 监听
},
name: { // 深度监听
deep:true,
handler: function() {
}
}
}
}
vue3的watch写法 watch hook 其实可以传入3个参数，咱们先介绍两个，前两个参数其实传入的是一个回调函数callback，第一个参数需要我们return返回我们需要监听的数据，第两个回调函数是用来监听的并且返回老数据和新数据，可以看下简单的写法
import { ref,
reactive,
watch,
h} from 'vue' // 解构出hook
setup() { // hook 都需要卸载setup函数里
let count= ref(0)
watch(()=>{ // 第一种监听方式
return count.value // 返回监听的数据
},(newvalue,oldvalue)=>{ // 如果数据变化了会触发此函数
console.log(newvalue)
})
// 第两种监听方式
watch(count,()=>{}) // 只适用于基本数据类型 对象不行
}
可以简单看下代码截图和打印截图
打印的
vue3监听对象方式
import { ref,
reactive,
watch,
h} from 'vue' // 解构出hook
setUp() {
let rea =reactive({ name: '1' })
// 监听错误写法
watch(rea.name,()=>{}) // 会警告
// 正确写法
watch(()=>rea.name,(newvalue,oldvalue)=>{})
}
代码截图
log日志
vue3 watch监听多个属性的情况
import { ref,
reactive,
watch,
h} from 'vue' // 解构出hook
setup() {
let c =ref("gggggg")
let a = ref("hhhhhh")
// 监听a和c
watch(()=>{ // 监听多个需要加value
return [ c.value,a.value ]
},([newc,newa],[oldc,olda])=>{
})
}
代码截图
日志截图
watch和watchEffect有部分相似的地方
watch也可以返回一个停止的句柄函数 stop = watch() 执行stop() 停止监听 watch也有取消副作用函数，简单看下
watch(()=>{},(newvalue,oldvalue,onInvalidate)=>{
onInvalidate(()=>{
console.log('dasda')
})
})
watch第三个参数也是顺序及调试方法也watch一样
watch(()=>{},(newvalue,oldvalue,onInvalidate)=>{
onInvalidate(()=>{
console.log('dasda')
})
},{ // 第三个参数
flush: "pre"
onTrack() {},
onTrigger() {},
})
watch和watchEffect相似的部分就不给大家过多的介绍了和watchEffect一样，大家可以看下面的文章 watchEffect简单介绍3
