watch监听

https://v2.cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8

在 Vue 2 中，watch 可以用来监听多种数据类型的变化。以下是 watch 能监听的一些常见数据类型：

基本数据类型：如 String、Number、Boolean 等。当被监听的响应式数据发生变化时，watch 会触发。
对象：watch 可以监听整个对象的变化。如果对象的属性发生变化，即使对象引用没有变，watch 也能检测到（需要使用 deep: true 选项来深度监听）。
数组：watch 可以监听数组的变化，包括数组元素的添加、删除和元素值的变化（同样需要使用 deep: true 选项来深度监听）。
计算属性 (Computed Properties)：watch 也可以用来监听计算属性的变化。当计算属性依赖的响应式数据发生变化，导致计算属性的值变化时，watch 会触发。
Vue 实例的属性：watch 可以监听 Vue 实例中的 data 属性、computed 属性以及 props。
Vuex 状态管理中的数据：如果你在项目中使用 Vuex，可以使用 watch 来监听 Vuex store 中的 state 或 getters。

watch 的基本语法如下：

new Vue({
  // ... 其他选项
  watch: {
    // 监听一个响应式数据
    someData(newVal, oldVal) {
      // 响应式数据 someData 变化时的操作
    },
    // 深度监听一个对象或数组
    'someObject': {
      handler(newVal, oldVal) {
        // 对象 someObject 变化时的操作
      },
      deep: true
    },
    // 使用字符串方法监听深层嵌套的数据
    'someObject.deepProperty': function(newVal, oldVal) {
      // someObject.deepProperty 变化时的操作
    },
    // 监听计算属性
    someComputedProperty(newVal, oldVal) {
      // 计算属性 someComputedProperty 变化时的操作
    }
  }
});

在使用 watch 时，你可以选择监听的方式是深度监听 (deep: true) 还是仅监听引用变化。对于对象和数组，如果你想检测内部属性或元素的变化，深度监听是必须的。如果不使用深度监听，那么只有对象或数组引用的变化才会触发 watch。注意深度监听可能会带来性能开销，因为它会递归地遍历被监听的对象或数组的所有属性。

其他

"itemNodeInfo": {
  handler: function(newValue, oldValue) {
    console.log("更新前：", oldValue + ",更新后：", newValue);
    this.taskInfoMap();
  },
  deep: true
}

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})