Vue 3 watchEffect教程
Vue 3 watchEffect教程
简介
Vue 3 引入了 Composition API,其中 watchEffect
是一个非常强大的工具,用于响应式地追踪依赖项的变化。本文将详细介绍 watchEffect
的使用方法和相关概念。
什么是 watchEffect?
watchEffect
是 Vue 3 的 Composition API 中的一个函数,用于自动追踪其回调函数中使用的响应式状态,并在状态变化时重新执行回调函数。
watchEffect的基本使用
引入 watchEffect
在组件中使用 watchEffect
之前,需要先从 Vue 中引入它:
import { watchEffect, reactive } from 'vue';
使用 watchEffect
watchEffect
接收一个回调函数作为参数,这个回调函数会被立即执行一次,并且每当其依赖的响应式状态变化时,都会重新执行。
export default {
setup() {
const state = reactive({
count: 0
});
watchEffect(() => {
console.log(`count is now: ${state.count}`);
});
// 测试 count 的变化
state.count++;
}
};
在上面的例子中,count
的变化会在控制台打印出相应的值。
watchEffect的高级用法
响应特定响应式状态
watchEffect
允许你指定一个包含响应式引用的数组,来告诉 Vue 应该追踪哪些响应式状态。
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue 3'
});
watchEffect(() => {
console.log(`count: ${state.count}, name: ${state.name}`);
});
// 只有 count 发生变化时,才会触发
state.count++;
}
};
执行副作用的清理
watchEffect
返回一个停止函数,可以用来停止副作用的自动重新运行,或者执行清理操作。
export default {
setup() {
const intervalRef = ref();
const stop = watchEffect(() => {
intervalRef.value = setInterval(() => {
console.log('Interval running');
}, 1000);
});
// 执行一些操作后停止 watchEffect
setTimeout(() => {
stop(); // 停止 watchEffect
clearInterval(intervalRef.value); // 清理定时器
}, 5000);
}
};
使用 watchEffect 作为响应式引用
通过将 watchEffect
作为响应式引用,可以在其他响应式操作中使用它。
export default {
setup() {
const state = reactive({
count: 0
});
const effect = watchEffect(() => {
console.log(`count is now: ${state.count}`);
});
// 在需要的时候手动触发 effect
state.count++;
}
};
watchEffect与Vue 2的watch选项的区别
Vue 2 中的 watch
是一个组件选项,而 Vue 3 中的 watchEffect
是一个函数。watchEffect
提供了更灵活的副作用处理方式,并且与 Vue 3 的 Composition API 更加契合。
结语
通过本文的介绍,你应该对 Vue 3 中的 watchEffect
有了基本的了解。watchEffect
是 Vue 3 响应式系统的核心功能之一,能够极大地简化副作用的处理逻辑,提高代码的可读性和可维护性。在实际开发中,合理使用 watchEffect
将使你的 Vue 应用更加强大和灵活。