vue使用watch监听对象中的属性

vue提供了一个watch方法，可以监听data内的相应数据变动，触发相应的方法。
例如监听对象的变化：

data: function() {
        return {
            objArr: [{ id: 1, name: '李四' }],
        }
    },

监听对象objArr的变化：

watch: {
        // 如果是要对数组列表项的内容是否发生改变做监听，则需要加上一个【deep:true】属性。
        objArr: {
            handler(newVal, oldVal) {
                // do something
            },
            // 这个属性表示深度监听，可以监听到对象、数组的内容变化。
            deep: true,
        },
    },

使用deep: true就会监听对象的每一个属性，如果要监听对象的某个属性，可以这样写。

'objArr.name': {
          handler: function() {
               //do something
           },
       },

还可以巧用计算属性来实现

computed: {
    getName: function() {
        return this.objArr.name
    },
},
watch: {
      getName: {
          handler: function() {
              //do something
          },
      },
  },