作用

和 Vue 2 中的 watch 作用基本一致，用来监视数据的变化。

/**
 * @param source 监听来源，被监视的数据
 * @param callback 监视的回调函数
 * @param options 配置对象（deep、immediate等等.....）
 */
watch(
  source,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  },
  { deep: true }
);

侦听数据源类型

Vue 3 中的 watch 只能监视以下四种数据：

1. ref 定义的数据。
2. reactive 定义的数据。
3. 函数返回一个值（叫做 getter 函数）。
4. 一个包含上述内容的数组。

常见场景

我们可以总结为以下几种情况：

情况一、ref() 定义的基本类型

监视 ref() 定义的基本类型数据，直接写数据名即可，监视的是其 value 值的改变。

import { ref, watch } from "vue";
let sum = ref(0);
const stopWatch = watch(sum, (newValue, oldValue) => {
  console.log("sum 变化了：", newValue, oldValue);
  if (newValue >= 10) {
    stopWatch();
  }
});
sum.value += 1;

情况二、ref() 定义的对象

监视 ref() 定义的对象类型数据：直接写数据名，监视的是对象的 地址值，若想监视对象内部的数据，要手动开启深度监视 deep: true。

• 若修改的是 ref 定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们指向同一个对象。
• 若修改整个 ref 定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

import { ref, watch } from "vue";
// 数据
let person = ref({ name: "张三", age: 18 });
watch(
  person,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  },
  { deep: true }
);
person.value.name += "~";
person.value.age += 1;
person.value = { name: "李四", age: 90 };

情况三、reactive() 定义的对象

监视 reactive() 定义的对象类型数据，是默认开启了深度监视的。意思就是，即便没有配置 deep: true, 默认也是深度监听。

import { reactive, watch } from "vue";
let obj = reactive({
  a: {
    b: {
      c: 666,
    },
  },
});
watch(obj, (newValue, oldValue) => {
  console.log("Obj变化了", newValue, oldValue);
});
Object.assign(person, { name: "李四", age: 80 });
obj.a.b.c = 888;

情况四、监听响应式对象的某个属性

监视 ref() 或 reactive() 定义的对象类型数据中的 某个属性，注意点如下：

1. 若该属性值 不是对象类型，需要写成函数形式。
2. 若该属性值是 是对象类型，可直接监听，也可写成函数，建议写成函数。

import { reactive, watch } from "vue";

// 数据
let person = reactive({
  name: "张三",
  age: 18,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
});
// 监视某个基本类型的属性
watch(
  () => person.name,
  (newValue, oldValue) => {
    console.log("person.name变化了", newValue, oldValue);
  }
);
// 监视某个对象类型的属性，可以直接监听，也可以通过函数来监听
watch(
  // person.car, // 直接监听
  () => person.car, // 通过函数监听
  (newValue, oldValue) => {
    console.log("person.car变化了", newValue, oldValue);
  },
  { deep: true }
);
person.name += "~";
person.age += 1;
person.car.c1 = "奥迪";
person.car.c2 = "大众";
person.car = { c1: "雅迪", c2: "爱玛" };

情况五、监听多个数据源

import { reactive, watch } from "vue";

// 数据
let person = reactive({
  name: "张三",
  age: 18,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
});
// 监视上述的多个数据源
watch(
  [() => person.name, person.car],
  (newValue, oldValue) => {
    console.log("person.car变化了", newValue, oldValue);
  },
  { deep: true }
);
person.name += "~";
person.car.c1 = "奥迪";
person.car.c2 = "大众";
person.car = { c1: "雅迪", c2: "爱玛" };

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24