this.$watch如何使用

请注意，前文提到的 `this.$watch` 是 Vue 2.x 版本的用法，在 Vue 3.x 版本中已被移除。如果你使用的是 Vue 3.x，你可以使用 `watch` 函数或 `watchEffect` 函数来替代。

在 Vue 2.x 中，`this.$watch` 的用法如下：

this.$watch('propertyName', (newValue, oldValue) => {
  // 监听到属性变化时的回调函数
});

其中，`propertyName` 是要监听的属性名，通过字符串形式传入。

示例代码：

export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  mounted() {
    this.$watch('message', (newValue, oldValue) => {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    });
  }
};

在上述代码中，我们通过 `this.$watch` 监听了 `message` 属性的变化。当 `message` 属性发生变化时，回调函数会被触发，并打印出新旧值。

需要注意的是，在组件销毁之前，我们应该清除对属性的监听。Vue 2.x 中，我们可以通过返回一个清除函数来实现：

const unwatch = this.$watch('propertyName', (newValue, oldValue) => {
  // 监听到属性变化时的回调函数
});

// 在适当的时候调用清除函数
unwatch();

这样可以在不需要监听时手动清除监听。