Vue中watch的高级用法

1、深度监听（deep）： 当需要监听一个嵌套对象内部属性的变化时，可以设置deep: true。

data() {
  return {
    nestedObj: {
      a: 1,
      b: {
        c: 2,
        d: [3, 4]
      }
    }
  };
},
watch: {
  // 使用深度监听
  nestedObj: {
    handler(newNestedObj, oldNestedObj) {
      console.log(newNestedObj);
    },
    deep: true
  }
}

当nestedObj内的任意层级属性发生变化，比如nestedObj.b.c = 3或者nestedObj.b.d.push(5)，都会触发handler函数。

2、immediate： 通过设置immediate: true，可以在定义watcher时立即执行一次handler函数，而不只是在值发生改变时才执行。

data() {
  return {
    initialValue: 0, // 从服务器获取的数据或者是一个默认值
    computedValue: null // 这是我们基于initialValue计算出的值，需要在初始和后续变化时更新
  };
},
created() {
  // 如果没有使用immediate，这里可能需要手动触发一次计算逻辑
  // this.updateComputedValue();
},
watch: {
  // 使用immediate选项
  initialValue: {
    handler(newVal, oldVal) {
      this.computedValue = newVal * 2; // 示例：简单地将初始值乘以2作为计算结果
      console.log('Initial or updated value:', newVal, ', Computed value:', this.computedValue);
    },
    immediate: true // 开启后，会在watcher绑定后立即执行handler函数
  }
}

由于设置了immediate: true，当组件实例创建并开始挂载（即created钩子执行）时，watch中的handler函数会立刻执行一次，即使initialValue尚未发生变化。这意味着首次加载页面时，我们将根据initialValue的初始值来计算并设置computedValue的值。随后，每当initialValue发生变化时，handler函数都会再次被执行。

3、处理多个属性变化（数组形式）： 可以同时监听多个属性，并使用同一个handler来处理这些属性的变化。

data() {
  return {
    propA: 'Initial A',
    propB: 'Initial B'
  };
},
watch: {
  ['propA', 'propB']: function(newValues, oldValues) {
      const [newPropA, newPropB] = newValues;
      const [oldPropA, oldPropB] = oldValues;

    // 可以根据新的值执行相应的逻辑
    // ...
  }
},

4、异步监听器：如果需要在数据变化后进行异步操作，可以将handler声明为返回Promise的函数，Vue将会等待Promise解决或拒绝后再进行下一个状态更新。

data() {
  return {
    // 定义异步属性
    asyncProp: '初始值',
    // 定义一个状态变量来跟踪异步操作是否完成
    asyncOperationStatus: ''
  };
},
watch: {
  async asyncProp(newValue, oldValue) {
    // 等待异步操作完成
    await this.performAsyncOperation(newValue);

    // 在异步操作完成后可以执行其他逻辑
    console.log('异步操作已结束。');
  }
},
methods: {
  // 模拟一个异步操作（例如API调用或长时间计算）
  async performAsyncOperation(newValue) {
    // 使用setTimeout模拟2秒的延迟
    await new Promise((resolve) => setTimeout(resolve, 2000));

    // 打印出新值，表示异步操作已使用该值完成
    console.log('使用新值：“' + newValue + '”完成异步操作。');
  }
}

5、 函数式监听器：直接提供一个函数作为watch对象的键，而不是一个字符串，这样可以动态决定要监听哪个属性。

data() {
  return {
    selectedMetric: 'metricA',
    metricsData: {
      metricA: { value: 0 },
      metricB: { value: 50 },
      // 更多指标...
    }
  };
},
watch: {
  // 动态监听当前选中的度量指标的数据变化
  [function () {
    return `metricsData.${this.selectedMetric}.value`;
  }]: function(newValue, oldValue) {
    console.log('Selected metric value changed:', oldValue, '->', newValue);
    // 在这里执行与选定指标值变化相关的逻辑
  }
}