个人名片
🎓作者简介:java领域优质创作者
🌐个人主页:码农阿豪
📞工作室:新空间代码工作室(提供各种软件服务)
💌个人邮箱:[2435024119@qq.com]
📱个人微信:15279484656
🌐个人导航网站:www.forff.top
💡座右铭:总有人要赢。为什么不能是我呢?
- 专栏导航:
码农阿豪系列专栏导航
面试专栏:收集了java相关高频面试题,面试实战总结🍻🎉🖥️
Spring5系列专栏:整理了Spring5重要知识点与实战演练,有案例可直接使用🚀🔧💻
Redis专栏:Redis从零到一学习分享,经验总结,案例实战💐📝💡
全栈系列专栏:海纳百川有容乃大,可能你想要的东西里面都有🤸🌱🚀
目录
Vue.js入门系列(三十五):setup
函数的注意点、计算属性、watch
与 watchEffect
的使用
引言
在 Vue 3 中,组合式 API 提供了更灵活的状态管理和逻辑复用能力,其中 setup
函数是核心部分。我们不仅需要掌握 setup
的使用,还需要理解它的一些特殊注意点。与此同时,计算属性 (computed
) 和监听器 (watch
) 仍然是 Vue 3 中不可或缺的工具,它们在 Vue 3 中有了更灵活的应用方式。在本文中,我们将深入探讨 setup
的两个注意点、computed
的用法、以及 watch
和 watchEffect
的高级使用技巧。
一、setup
的两个注意点
setup
是 Vue 3 中最重要的组合式 API 之一。它用于初始化组件的逻辑和状态,返回的对象将直接暴露给模板。尽管使用非常灵活,但有两个重要的注意点需要掌握。
1.1 setup
中的生命周期
setup
函数是在组件实例创建之前调用的,因此我们无法在 setup
函数中直接访问 this
或组件实例相关的属性和方法。要使用生命周期钩子,我们需要通过 Vue 3 提供的组合式 API,例如 onMounted
、onUpdated
等。
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
// 生命周期钩子
onMounted(() => {
console.log('Component is mounted');
});
return { count };
}
};
在这个例子中,onMounted
替代了 Vue 2 中的 mounted
钩子,用于在组件挂载后执行代码。
1.2 setup
的执行时机
setup
函数会在组件实例化时同步调用,它的返回值决定了组件的可用状态和方法。需要注意的是,setup
返回的数据和方法会直接暴露给模板,无需通过 this
访问。
export default {
setup() {
const message = ref('Hello, Vue 3!');
return { message };
}
};
在模板中:
<template>
<div>{{ message }}</div>
</template>
通过这种方式,我们可以在模板中直接访问 setup
返回的数据和方法。
二、computed
计算属性
2.1 什么是 computed
?
computed
是一种基于其他状态派生出的状态。与普通的数据属性不同,计算属性具有缓存功能,只有当其依赖的响应式数据发生变化时,计算属性才会重新计算。
2.2 在 Vue 3 中使用 computed
在 Vue 3 中,我们通过 import { computed }
来创建计算属性。
import { ref, computed } from 'vue';
export default {
setup() {
const number1 = ref(5);
const number2 = ref(10);
const sum = computed(() => {
return number1.value + number2.value;
});
return { number1, number2, sum };
}
};
在这个例子中,sum
是一个计算属性,它根据 number1
和 number2
的值动态计算结果。计算属性的好处在于,它会自动根据依赖的值进行缓存和更新。
2.3 计算属性的使用场景
计算属性常用于以下场景:
- 依赖多个数据属性的派生状态。
- 需要避免不必要的重新计算的场景,例如复杂的计算逻辑。
- 用于格式化显示的数据,如日期格式化、价格计算等。
三、watch
监视器
3.1 什么是 watch
?
watch
是 Vue 提供的一个功能,用于监听响应式数据的变化,并执行特定的副作用操作。它常用于响应式数据发生变化时进行异步操作、数据验证等场景。
3.2 watch
监视 ref
定义的数据
在 Vue 3 中,watch
用于监视由 ref
定义的响应式数据。
import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
return { count };
}
};
在这个例子中,watch
会监视 count
的变化,当 count.value
发生变化时,watch
会触发并记录新的值和旧的值。
3.3 watch
监视 reactive
定义的数据
当使用 reactive
创建对象时,watch
也可以监视对象内部的属性变化。
import { reactive, watch } from 'vue';
export default {
setup() {
const state = reactive({ name: 'Alice', age: 25 });
watch(() => state.age, (newAge, oldAge) => {
console.log(`Age changed from ${oldAge} to ${newAge}`);
});
return { state };
}
};
这里我们通过 watch
监视 state.age
的变化,而不是整个对象的变化。这种方式更加灵活,可以精确监控某个具体的属性。
3.4 watch
中 value
的问题
当我们使用 watch
来监听 ref
或 reactive
对象时,需要注意对于 ref
,我们监听的是 .value
,而 reactive
对象则是直接监听其属性。
const myValue = ref(0);
watch(myValue, (newValue) => {
console.log(newValue); // 无需 .value,直接监听 myValue
});
对于 reactive
对象:
watch(() => reactiveObject.someProp, (newVal) => {
console.log(newVal);
});
四、watchEffect
函数
4.1 什么是 watchEffect
?
watchEffect
是 Vue 3 新引入的一个函数,它会立即执行传入的副作用函数,并且在其中的响应式数据变化时自动重新执行。与 watch
不同的是,watchEffect
不需要手动指定依赖,它会自动追踪函数中的所有响应式数据。
4.2 使用 watchEffect
import { ref, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watchEffect(() => {
console.log(`Count is now: ${count.value}`);
});
return { count };
}
};
在这个例子中,watchEffect
会立即执行一次,并在 count.value
发生变化时再次执行。它非常适合用来追踪多个响应式数据的变化,而不需要显式声明依赖。
4.3 watchEffect
的特点
- 自动依赖追踪:不需要手动声明依赖,Vue 会自动追踪函数中的所有响应式数据。
- 立即执行:
watchEffect
会在初次调用时立即执行副作用函数。 - 适合副作用操作:常用于需要基于多个响应式数据进行副作用操作的场景。
五、总结
通过本文的学习,你应该掌握了以下关键点:
setup
函数的注意点:理解了setup
的生命周期限制和它的执行时机,掌握了在setup
中使用生命周期钩子的方法。computed
计算属性:学会了在 Vue 3 中使用computed
来创建具有缓存功能的计算属性,避免不必要的重新计算。watch
监视器:理解了如何通过watch
监视ref
和reactive
定义的数据,并解决了监听值时遇到的问题。watchEffect
函数:掌握了watchEffect
的自动依赖追踪机制,适合处理自动追踪多个响应式数据的副作用操作。
这些知识为你开发 Vue 3 应用提供了更强大的工具,帮助你更好地管理和追踪状态变化。在接下来的博客中,我们将继续深入探讨 Vue 3 的更多高级特性和应用场景。如果你有任何疑问或需要进一步讨论,欢迎在评论区留言。感谢你的阅读,期待在下一篇博客中继续与大家分享更多 Vue.js 和 Vue 3 的开发技巧与经验!