vue watch实现
在 Vue 中实现 watch 的几种方法
Vue 的 watch 用于监听数据变化并执行回调函数，以下是常见的实现方式：
选项式 API 中的 watch
在选项式 API 中，watch 是一个对象，键是需要监听的数据属性，值是对应的回调函数或配置对象。
export default {
data() {
return {
count: 0,
user: { name: 'Alice' }
};
},
watch: {
// 监听基本类型数据
count(newVal, oldVal) {
console.log(`count 从 ${oldVal} 变为 ${newVal}`);
},
// 监听对象属性（深层监听）
user: {
handler(newVal, oldVal) {
console.log('user 对象变化', newVal);
},
deep: true // 开启深层监听
},
// 监听对象的特定属性
'user.name'(newVal) {
console.log('user.name 变化:', newVal);
}
}
};组合式 API 中的 watch
在 setup() 或 <script setup> 中，使用 watch 函数：
import { ref, watch } from 'vue';
const count = ref(0);
const user = ref({ name: 'Alice' });
// 监听 ref 基本类型
watch(count, (newVal, oldVal) => {
console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});
// 监听 ref 对象（深层监听）
watch(
user,
(newVal) => {
console.log('user 变化:', newVal);
},
{ deep: true }
);
// 监听对象的特定属性
watch(
() => user.value.name,
(newVal) => {
console.log('user.name 变化:', newVal);
}
);立即执行的 watch
通过 immediate: true 让回调在监听开始时立即执行一次：
watch(
() => user.value.name,
(newVal) => {
console.log('立即执行:', newVal);
},
{ immediate: true }
);监听多个数据源
使用数组监听多个数据源，回调参数接收对应数组形式的新旧值：
watch(
[count, () => user.value.name],
([newCount, newName], [oldCount, oldName]) => {
console.log(`count: ${newCount}, name: ${newName}`);
}
);watchEffect 的替代方案
watchEffect 自动追踪依赖，适合无需明确指定监听源的场景：
import { watchEffect } from 'vue';
watchEffect(() => {
console.log('count 或 user.name 变化:', count.value, user.value.name);
});注意事项
- 深层监听：对象或数组需设置
deep: true才能监听嵌套属性变化。 - 性能：避免过度使用
deep，可能影响性能。 - 清理副作用：回调中若有异步操作，可通过
onInvalidate清理（watchEffect和watch均支持）。
