1. 监听数据变化,当数据发生变化时,调用函数进行数据处理
- data中的普通值则用普通监听即可
- 针对对象的监听修改要使用深度监听
- 如果接受父组件传来的属性值,需要初次即执行函数,则设置immediate属性为true
new Vue({
el:"#root",
data:{
inputValue:'',
list:[1,2,3],
Person:{
name:'小明',
age:'12',
sex:'boy',
class:'3'
}
},
props:['barData'],
watch:{
//普通监听
inputValue(newValue,oldValue){
//...
},
list(newList,oldList){
//...
},
barData:{
handler(newBar,oldBar){
//...
},
immediate:true //初次绑定值时,也会执行函数
},
Person:{
handler(newPerson,oldPerson){
//...
},
deep:true //深度监听整个对象
},
Person.age:{
handler(newAge,oldAge){
//...
},
deep:true //深度监听Person对象中的属性age
}
}
})
2. 监听路由的变换
watch: {
'$route' (to, from)
{
//...当路由发生变化时,执行的方法
//to:新路由
//from:旧路由
this.handleSearch(this.$const.searchType.base)
}
}