一、监听数组

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 不能检测以下变动的数组：

• 当你利用索引直接设置一个项时，例如：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: {
    hadler (val) {
      console.log(val)
    },
    // 这里是关键，代表递归监听 demo 的变化
    deep: true
  }
},

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

二、 监听对象

1、可以类似上面数组的第三点 2、可以直接监听对象中的值

data () {
  return {
    demo: {
      {
        name: "张三",
        age: 18
      },
      {
        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}