本文详细介绍了在 Vue.js 中如何使用 watch 监听属性变化，特别是针对普通数据类型和对象数据类型的监听。对于普通数据类型，可以直接定义监听函数；而对于对象数据类型，需要使用深度监听（deep: true）来确保对象内部属性的改变也能触发监听。文中通过实例代码展示了如何设置深度监听，并在对象属性变化时执行特定操作。
watch事件监听：在使用watch监听属性时若监听普通数据类型 使用简便写法即可 若监听对象数据类型则需要使用深度监听
1.监听普通数据类型
watch:{
// msg:function(){
// console.log("我发生改变了")
// }
// 注意：要监听data中哪个属性，函数名就必须是谁
msg(newVal,oldVal){
// newVal参数为改变后的值 oldVal表示原来值
console.log(newVal,oldVal)
console.log("我发生改变了")
},
// 使用这种简单的写法无法监听对象数据
num(){
console.log("我改变了")
},
isShow(){
console.log("监听到布尔值发生改变了")
},
// 如何监听对象数据?
user(){
console.log("监听到对象发生改变了")
}
// "user.name":function(){
// console.log("监听到对象发生改变了")
// }
}
2.监听对象属性（要开启深度监听）
new Vue({
el:"#app",
data:{
user:{
name:"张三",
age:18
},
num:1
},
methods: {
getFcy(){
console.log("我叫小冯，余生多多指教")
}
},
watch:{
// es5的各式监听对象属性的改变
// "user.age":function(){
// console.log("age发生改变了")
// },
// 监听对象发生数据改变
user:{
// handler 执行函数
handler:function(newVal){
console.log("user对象发生改变了")
console.log(newVal)
this.getFcy();
},
// deep 深度 是否开启深度监听 true则开启 false则关闭 默认为false
deep:true,
// vue实例初始化时是否执行监听函数，若为true则执行 为false则不执行 默认为false
immediate:false
},
num:{
handler(){
console.log("num发生改变了")
},
deep:true
}
}
})
扫一扫
1060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
