VUE使用WATCH監聽數組或對象的總結

一、監聽數組

　　1.watch能監聽到數組的push的改變,例如

data () {
    return {
        demo: [1,2]
    }
},

　mounted (){

　　　　window.myVue = this

　},

watch: {
    demo(val){
        console.log(val)
    }
},

myVue.demo.push(3)  //[1,2,3]

　　2.watch 不能檢測以下變動的數組：

1. • 當你利用索引直接設置一個項時，例如：myVue.demo[1] = 5
   • 當你修改數組的長度時，例如：myVue.demo.length = 2

　　這時候你可以刪除原有鍵，再 $set 一個新的，這樣就可以觸發watch

myVue.$set(myVue.demo,0,8)  // [8,2,3]

　　3.更復雜一點，你想對數組嵌套對象進行監聽的時候，這時就需要深度監聽

data () {
    return {
        demo:[
             {
                  name:'張三',
                  age:18
             },
　　　　　　　　{
                  name:'李四',
                  age:20
             }
        ]
    }
},
mounted (){
　　window.myVue = this
},
watch: {
    demo: {
      handler (val) {
        console.log(val)
      },
      // 這里是關鍵，代表遞歸監聽 demo 的變化
      deep: true
    }
},

myVue.demo[0].age = 30  //[{name:'張三',age:30},{name:'李四',age:20}]

二、監聽對象

　　1.可以類似上面數組的第3點

　　2.可以直接監聽對象中的值

data () {
    return {
        demo:{
              name: '張三',
              child: {
                  name: '李四',
                  age: 20
              }
        }
    }
},
mounted (){
　　window.myVue = this
},
watch: {
    'demo.child': {
      handler: function (val) {
        console.log(val)
      },
      deep: true
    },
　　// 或者

　　　'demo.name' (val) {

      　　console.log(val)

    　}

},

myVue.demo.name = '王二'  //王二 

myVue.demo.age = '80' //{name:'李四',age:80}