vue实现watch
在 Vue 中实现 watch 监听数据变化
Vue 的 watch 功能用于监听数据变化并执行相应的回调函数。可以通过选项式 API 或组合式 API 实现。
选项式 API 中的 watch
在选项式 API 中，watch 是一个对象，键是需要监听的属性名，值是对应的回调函数或配置对象。
export default {
data() {
return {
count: 0,
user: {
name: 'Alice',
age: 25
}
}
},
watch: {
// 监听基本数据类型
count(newVal, oldVal) {
console.log(`count 从 ${oldVal} 变为 ${newVal}`);
},
// 监听对象属性
'user.name'(newVal, oldVal) {
console.log(`user.name 从 ${oldVal} 变为 ${newVal}`);
},
// 使用配置对象
user: {
handler(newVal, oldVal) {
console.log('user 对象变化', newVal, oldVal);
},
deep: true, // 深度监听
immediate: true // 立即执行
}
}
}组合式 API 中的 watch
在组合式 API 中，watch 是一个函数，可以监听单个或多个数据源。
import { ref, watch, reactive } from 'vue';
export default {
setup() {
const count = ref(0);
const user = reactive({
name: 'Alice',
age: 25
});
// 监听 ref
watch(count, (newVal, oldVal) => {
console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});
// 监听 reactive 对象的属性
watch(
() => user.name,
(newVal, oldVal) => {
console.log(`user.name 从 ${oldVal} 变为 ${newVal}`);
}
);
// 监听多个数据源
watch(
[() => user.name, count],
([newName, newCount], [oldName, oldCount]) => {
console.log('多个数据变化', newName, newCount);
}
);
// 深度监听和立即执行
watch(
() => user,
(newVal, oldVal) => {
console.log('user 对象变化', newVal, oldVal);
},
{ deep: true, immediate: true }
);
return { count, user };
}
}watchEffect 的使用
watchEffect 是组合式 API 中的另一种监听方式，它会立即执行一次，并自动追踪其依赖。
import { ref, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watchEffect(() => {
console.log('count 的值是:', count.value);
});
return { count };
}
}停止监听
在组合式 API 中，watch 和 watchEffect 会返回一个停止监听的函数。
const stop = watch(count, (newVal) => {
console.log('count 变化:', newVal);
});
// 停止监听
stop();性能注意事项
- 避免过度使用
deep，深度监听会增加性能开销。 - 对于大型对象或数组，考虑监听特定属性而非整个对象。
- 在组件卸载时，手动停止不需要的监听以避免内存泄漏。
通过以上方法，可以在 Vue 中灵活地监听数据变化并执行相应逻辑。
