watch侦听器:用来监听数据产生变化后调用该函数
watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作如下:
immediate : true | false : 添加该方法代表当刷新页面时会立即自动触发一次 handler 函数
deep : true | false 监听对象中每个属性值的变化
handler: 其值是一个回调函数, 即监听到变化时应该执行的函数
const vm = new vue({
el:'#app',
data:{
username : ''
info:{
name : '',
user : ''
}
},
watch:{ //当监听的数据发生变化事触发该事件
username(newVal,oldVal){ // 两种写法 第一种
//newVal : 是变化后的值 。oldVal 是变化之前的值
}
username:{ //第二种方法是添加 immediate 自动触发一次
//侦听器的处理函数
handler(newVal,oldVal){
//处理条件
},
immediate : true
},
//对象数据监听
info:{
//侦听器的处理函数
handler(newVal){ //该对象中任何值发生变化都会触发一次该侦听器
//处理条件
},
deep : true
}
//如果只想监听对象中单个属性的变化,可以按如下方法操作
'info.name'(newVal, oldVal){ //单一对象的获取方法
}
'info.name':{ //单一对象的获取方法
handler(newVal){ //该对象中任何值发生变化都会触发一次该侦听器
//处理条件
}
}
}
})