<div>
<input type="text" v-model="first">
</div>
new Vue({
el: '#root',
data: {
first: '11'
},
watch: {
first(newName, oldName) {
console.log(newName, oldName);
}
}
})
上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化后打印新值和旧值
watch: {
first: {
handler(newName, oldName) {
console.log('一开始就执行了');
},
immediate: true
}
}
解释:
watch 最初绑定的时候是不会执行的,要等到数据改变时才执行监听。
immediate:true代表wacth 里声明了之后立即执行 执行handler的函数
<div>
<span>obj.name: {{obj.name}}</span>
<span>obj.age: {{obj.age}}</span>
<p>obj.age: <input type="text" v-model="obj.age"></p>
</div>
new Vue({
el: '#root',
data: {
obj: {
name: 'hahha',
age: 16
}
},
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.age changed');
},
immediate: true,
deep: true
}
}
})
解释
当不存在deep:true;时,在输入框中输入数据视图改变obj.a的值时,我们发现是无效的,
默认情况下 handler 只监听obj这个属性它的引用的变化,我们只有给obj赋值的时候它才会监听到。Vue 不能检测到对象内部属性的添加或删除。
watch 属性 deep,代表是否深度监听,deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
watch: {
'obj.age': {
handler(newName, oldName) {
console.log('obj.age changed');
},
immediate: true,
}
}
watch: {
'$route'(to,from){
console.log(to);
console.log(from);
if(to.path=="/news/detailMessage"){
console.log("消息详情");
}
}
},
'$route.query.categoryId':{
handler(val, oldVal){
this.messageSeach = '',
this.pageSize= 12,
this.pageNo= 1,
this.getMessage()
},
deep:true
}