2025-11-05 Vue3中watch的用法

1、前言

目前新的前端项目，几乎都使用Vue3了，和Vue2相比，有很多的不同，其中watch的用法是其中的一种。或许是我自己在Vue2中使用的不够精，但感觉 Vue3中的watch更好用一些。

2、内容

• 最基础的用法

import { ref, watch } from 'vue';

const count = ref(0);

// 监听 ref
const stop = watch(count, (newVal, oldVal) => {
  console.log('count changed', oldVal, '=>', newVal);
});

// 停止监听
stop();

• 使用getter监听

import { reactive, watch } from 'vue';

const state = reactive({ a: 1, b: 2 });

// 通过 getter 观察 reactive 的某个字段
watch(() => state.a, (newVal, oldVal) => {
  console.log('state.a changed', oldVal, '=>', newVal);
});

• 监听多个

import { ref, watch } from 'vue';

const a = ref(1);
const b = ref(2);

// sources 可以是数组，回调接收解构后的数组
watch([a, b], ([newA, newB], [oldA, oldB]) => {
  console.log(newA, newB);
});

• watchEffect 自动判断依赖

import { ref, watchEffect } from 'vue';

const count = ref(0);

const stop = watchEffect((onInvalidate) => {
  console.log('effect run, count =', count.value);

  // 可选清理
  const id = setTimeout(() => {}, 1000);
  onInvalidate(() => clearTimeout(id));
});

watchEffect 在首次注册时会立即运行（默认）。
提供 onInvalidate 用于注册清理函数（例如取消异步任务）。
在第一次运行时打印 count 的当前值，并设置了一个定时器 id。然后通过 onInvalidate 注册了清除该定时器的函数。
当 count 改变（或 stop 被调用）时，Vue 会先执行 clearTimeout(id)（清除上一次的定时器），然后再重新运行 effect（打印新值并创建新定时器）。

Enjoy!