data:{
a:1,
b:{
c:1 }
},
watch:{
a(val, oldVal){//普通的watch監聽 console.log("a: "+val, oldVal);
},
b:{//深度監聽,可監聽到對象、數組的變化 handler(val, oldVal){
console.log("b.c: "+val.c, oldVal.c);//但是這兩個值打印出來卻都是壹樣的 },
deep:true }
}
})
vm.a=2
vm.b.c=2
a是壹個普通的值,當a的值變化時會被監聽到,b是壹個對象,不能直接像a那麽寫,需要深度監聽才能捕捉到,但是當我想去捕捉b對象中某壹個值的變化時卻發現,打印出來的兩個值是不壹樣的
這樣就只能知道對象發生變化卻不知道具體哪個值發生了變化,如果想監聽對象某壹個值得變化可以利用計算屬性computed
var vm=new Vue({
data:{
b:{
c:1 }
},
watch:{
newValue(val, oldVal){
console.log("b.c: "+val, oldVal);
}
},
computed: {
newValue() {
return this.b.c
}
}
})
vm.b.c=2
用watch去監聽computed計算過的值就可以直接知道是哪個對應的值發生了變化
watch: { // 監聽路由傳值變化,當頁面不重新加載的時候需要加載不同模型
$route () {
? this.sceneName = this.$route.query.sceneName
? window.TTS.addObjectToScene(this.sceneName)
}
? }