Vue的watch监听函数

### Vue.js 中 `watch` 监听函数的使用方法

在 Vue.js 中，`watch` 是一种用于响应数据变化的强大工具。当被监视的数据发生变化时，会触发相应的回调函数执行特定逻辑。

#### 基本用法

对于简单的数据属性监听，可以直接指定要监控的数据名称作为键，并提供一个处理新旧值差异的回调函数：

export default {
  data() {
    return {
      message: "Hello"
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`);
    }
  }
}

#### 对象属性监听

如果目标是一个复杂对象，则需注意默认情况下仅监测顶层属性变动；若希望深入追踪嵌套结构内的更改，则应启用深度模式[^1]：

export default {
  data() {
    return {
      user: {
        firstName: "",
        lastName: ""
      }
    };
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log("User object has been modified");
      },
      deep: true // 启用深层监听
    }
  }
};

#### 动态创建监听器并控制其生命周期

有时应用程序逻辑要求能够灵活地开启或关闭某些监听关系，在这种场合下可以利用实例方法 `$watch()` 来实现更精细的操作[^2]:

methods: {
  startWatchingMyProperty() {
    this.unwatch = this.$watch(
      "myProperty",
      function (newValue, oldValue) {
        console.log(`${this.myProperty} changed`);
      }.bind(this),
      { immediate: true } // 可选参数：立即触发一次handler
    );
  },

  stopWatchingMyProperty() {
    if (typeof this.unwatch === "function") {
      this.unwatch();
    }
  }
},
mounted() {
  this.startWatchingMyProperty();
},
beforeDestroy() {
  this.stopWatchingMyProperty();
}