本文介绍了Vue 3中watch和watchEffect的新特性。通过示例展示了watch如何监听单个或多个数据变化，以及如何监听引用类型。watchEffect作为副作用函数，自动监听所有依赖变化，无需指定属性。文章还对比了两者的区别，并提供了大厂前端面试题文档链接。
页面刚进入的时候并不会执行，值发生改变的时候，才会打印出当前最新值和修改之前的值。
示例1：监听一个数据
import { ref , watch } from “vue”
export default{
setup(){
const mood = ref(“”)
//帧听器
watch(mood,(curVal,preVal)=>{
console.log(‘cur’,curVal);
console.log(‘pre’,preVal);
},{
//配置项
})
return{
mood
}
}
}
watch 也可以监听多个属性值，此时传入的数据变成数组形式，配置项保持不变。
2.2、watch 监听多个属性值
示例2：监听多个属性
watch([mood,target],([curMood,curTarget],[preMood,preTarget])=>{
console.log(‘curMood’,curMood);
console.log(‘preMood’,preMood);
console.log(‘curTarget’,curTarget);
console.log(‘preTarget’,preTarget);
},{
//配置项
})
2.3、watch 监听引用数据类型
watch 监听引用数据类型时，如果只监听其中某个属性时，使用语法如&#
最低0.47元/天 解锁文章
2397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
