🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
摘要:
本文将深入比较Vue 3中的watchEffect与Vue 2中的watch选项,分析它们的用法、执行机制及适用场景,帮助开发者更好地理解Vue的响应式系统。
引言:
Vue的响应式系统是其核心特性之一,它允许开发者轻松地追踪数据变化并执行相应的操作。在Vue 3中,watchEffect作为新的API被引入,与Vue 2中的watch选项有着不同的使用方式和特性。下面,我们将探讨这两者的区别。🔍
正文:
一、🌟Vue 2中的watch选项
- 定义与用法
在Vue 2中,watch选项用于观察和响应Vue实例上的数据变动。开发者需要明确指定要监视的数据源。
export default {
data() {
return {
question: '',
};
},
watch: {
question(newVal, oldVal) {
// 当question变化时,执行此函数
}
}
};
- 执行时机
watch选项仅在指定的数据源发生变化时才会执行回调函数。
二、🚀Vue 3中的watchEffect
- 定义与用法
watchEffect是Vue 3中Composition API的一部分,它不需要明确指定要监视的数据源,而是自动追踪其回调函数中所依赖的数据。
import { ref, watchEffect } from 'vue';
export default {
setup() {
const question = ref('');
watchEffect(() => {
// 此函数会立即执行,并在question变化时重新执行
console.log(`Question is: ${question.value}`);
});
return {
question
};
}
};
- 执行时机
watchEffect在组件初始化时立即执行,并在其依赖的数据发生变化时重新执行。
三、🔍watchEffect与watch选项的区别
- 依赖自动收集
- watchEffect:自动追踪回调函数中的依赖。
- watch选项:需要明确指定监视的数据源。
- 执行时机
- watchEffect:组件初始化时立即执行,并在依赖变化时重新执行。
- watch选项:仅在指定的数据源发生变化时执行。
- 回调参数
- watchEffect:无法直接获取变化前后的值。
- watch选项:可以接收变化前后的值作为回调函数的参数。
- 清理副作用
- watchEffect:可以在回调函数中返回一个清理函数,用于在下次执行前或停止监听时进行清理。
- watch选项:可以在回调函数中添加清理逻辑,但机制略有不同。
总结:
watchEffect与Vue 2的watch选项在依赖追踪、执行时机和用法上存在显著差异。watchEffect提供了更灵活的依赖自动收集机制,而watch选项则更适合于需要明确知道数据变化前后值的场景。了解这些差异,将有助于开发者根据具体需求选择合适的响应式追踪方法。🚀
参考资料:
- Vue 3官方文档 - watchEffect
- Vue 2官方文档 - watch选项