监听string
export default {
name: "jianting",
data() {
return {
msg: "1223"
};
},
watch: {
msg: function(newVal, oldVal) {
// TO DO
console.log("newVal:", newVal);
console.log("oldVal:", oldVal);
}
},
methods: {
stringClick() {
this.msg = Math.random() * 100;
}
}
};
</script>
监听对象中的属性
data() {
return {
obj: {
name: "Tony",
age: 50,
children: [
{
name: "小明",
age: 12
},
{
name: "小花",
age: 5
}
]
}
};
},
....
watch: {
obj: {
handler: function(newVal, oldVal) {
// TO DO
},
deep: true,
immediate: true
},
"obj.name": function(newVal, oldVal) {
// TO DO
}
},
.....
watch监听对象的时候,需要加deep:true,只有这样才能深入底层去实时监听,没有加的话,对象是监听不到变化的,添加immediate时会在侦听开始之后被立即调用
监听路由
watch: {
$route: {
handler: function(val, oldVal) {
console.log(val);
},
// 深度观察监听
deep: true,
immediate: true
}
}