watch:{
//1.监听data数据变化,并输出新旧值
data(newValue,oldValue){//监听data数据变化
console.log(newValue,oldValue)
},
//2.监听data值变化,若变化执行change方法
data: 'change', // 值可以为methods的方法名
//3.在最初绑定值时深度监听一个对象
data: {//监听一个对象
handler(newVal) {
console.log(newVal)
},
deep: true,//普通的watch方法无法监听到对象内部属性的改变,deep属性可以对对象进行深度监听
immediate:true//如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性
},
//4.监听对象中的某一个值
//设置deep:true则可以监听到 data.id 的变化,此时会给 data 的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行 handler,如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性
'data.id': {
handler(newVal, oldVal) {
console.log(newVal)
},
deep: true
}
},
methods: {
change(curVal,oldVal){
console.log(curVal,oldVal)
}
}
vue中watch监听用法
最新推荐文章于 2024-03-30 14:43:12 发布