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