Vue 3 的 watch 默认在数据变化后执行回调，首次触发时 oldValue 为 undefined；监听 ref 或 getter 返回值可正确获取新旧值；监听对象属性需用箭头函数包装；监听多个值时新旧值按数组顺序对应。
Vue 3 的 watch 默认就能拿到变化前后的旧值和新值，但前提是使用方式正确、且监听目标符合响应式规则。
watch 回调函数的两个参数就是新值和旧值
当你监听一个 ref 或通过 getter 函数返回的响应式值时，回调函数接收两个参数：
-
第一个参数：变化后的新值（
newValue） -
第二个参数：变化前的旧值（
oldValue）
例如：
watch(searchText, (newValue, oldValue) => {console.log(`从 "${oldValue}" 变为 "${newValue}"`);
});
只有首次触发时 oldValue 可能是 undefined
watch 默认在数据**发生变化后**才执行回调。所以第一次触发时，还没有“上一次的值”，oldValue 是 undefined。如果你需要初始状态也参与对比，可以加 immediate: true 选项，这样组件初始化时就会立即执行一次回调，此时 newValue 是当前值，oldValue 仍是 undefined（因为确实没有历史值）。
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
监听对象属性必须用 getter 函数，否则拿不到 oldValue
直接监听 reactive 对象或 ref 包裹的对象本身，属于浅层监听，且无法稳定获取 oldValue —— 尤其是开启 deep: true 后，oldValue 通常和 newValue 一样（都是 Proxy 实例），失去比较意义。
正确做法是用箭头函数包装属性访问：
const user = ref({ name: '张三', age: 25 });watch(() => user.value.age, (newAge, oldAge) => {
// ✅ 这里 newAge 和 oldAge 是原始值（如 25 → 26）
});
监听多个值时，新旧值按数组结构对应
当传入数组作为 source，回调函数的第一个参数是新值数组，第二个是旧值数组，顺序与 source 中一致：
const a = ref(1);const b = ref('x');
watch([a, b], ([newA, newB], [oldA, oldB]) => {
console.log(`a: ${oldA}→${newA}, b: ${oldB}→${newB}`);
});
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
