监听数组、对象

 侦听属性（Watch Property)

        使用watch来定义一个或多个数据的监听器，在数据发生变化时执行相应的操作。

watch: {
  // 监听单个属性
  propertyName(newVal, oldVal) {
    console.log(newVal)
    // 在属性发生变化时执行相应的操作，最初绑定时不回执行，oldVal为undefined
  },

  // 监听多个属性、对象、数组
  'propName1, propName2': {
    handler(newVals, oldVals) {
      // 在多个属性中的任何一个发生变化时执行相应的操作
    },
    immediate: true, // 可选，设置为 true 时，在初始渲染时立即触发回调函数，默认为 false。
    deep: true // 可选，深度监听对象或数组的变化，开销会比较大，默认false。
  }

  // 监听对象某项属性
  'objectName.propertyName': {
    handler(newVal, oldVal) {
      // 在对象的某一项发生变化时执行相应的操作
    },
    // deep: true //不需要了
  }
}

注：

        监听数组的变化时，Vue 默认无法直接监听数组的长度变化的，会侦听数组的变异方法（包括 push、pop、shift、unshift、splice、sort 和 reverse），以及使用索引进行直接更改的操作（例如 vm.items[0] = newValue）。如果在数组中使用其他非变异方法（例如 filter、slice 等）进行操作，watch 选项将无法侦听到变化。

       监听对象的变化时，Vue 默认会侦听对象的变异方法（如使用 arr.$set 或 Vue.set 方法添加或删除属性）。如果通过其他方式进行对象属性的变更，例如直接赋值或使用 Object.assign 方法，watch 选项将无法侦听到变化。

计算属性（Computed Property）

        计算属性具有缓存机制，只在依赖的响应式数据发生变化时才重新计算 。

computed: {
  propertyName() {
    // 计算属性的逻辑
  }
},