Vue3
*watch监听 ref 类型的数据, watch的第一个参数是 你要监听的值, 第二个参数是 回调函数 *
watch(num,(newVal,oldVal)=>{
console.log(newVal,oldVal);
})
- watch只能监听到 ref 或者reactive 声明的数据类型,只能监听 proxy对象
监听reactive类型的数据
当我们监听对象的某个属性的时候,watch的
- 第一个参数,是函数的返回值
- 第二个参数是 回调函数
- 第三个参数 是一个选项对象
watch(()=>data.person.age,(newVal,oldVal)=>{
console.log(newVal,oldVal);
},{
deep:true,
immediate:true
})
watch监听多个值 ,以数组的形式
watch([num,()=>data.person.age],([newNum,newAge],[oldNum,oldAge])=>{
console.log('newNum'+newNum,'newAge'+newAge);
})
watchEffect
watchEffect自动监听 不需要传入具体的依赖值,只要页面数据有变化,你在watchEffect里面使用这个数据,就能监听到
watchEffect(()=>{
console.log(data.person.age);
})