vue3入门教程：计算属性

计算属性的基本用法

计算属性是通过computed函数创建的，它接受一个getter函数作为参数，并返回一个只读的响应式ref对象。该ref对象通过.value属性暴露getter函数的返回值。

<template><div><p>原始数据: {{ count }}</p><p>计算属性: {{ doubleCount }}</p><button @click="increment">增加</button></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const doubleCount = computed(() => count.value * 2);const increment = () => {count.value++;};return {count,doubleCount,increment,};},
};
</script>

在这个例子中，doubleCount是一个计算属性，它依赖于count变量。当count的值改变时，doubleCount的值会自动重新计算。

可写的计算属性

虽然计算属性默认是只读的，但你可以通过提供一个对象给computed函数，该对象包含get和set方法来创建一个可写的计算属性。

<template><div><p>姓名: {{ fullName }}</p><button @click="changeName">修改姓名</button></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const firstName = ref('张');const lastName = ref('三');const fullName = computed({get() {return firstName.value + ' ' + lastName.value;},set(value) {const nameArr = value.split(' ');firstName.value = nameArr[0];lastName.value = nameArr[1];},});const changeName = () => {fullName.value = '李 四';};return {fullName,changeName,};},
};
</script>

在这个例子中，fullName是一个可写的计算属性。当你修改fullName的值时，set方法会被调用，并更新firstName和lastName的值。

计算属性的调试

在开发环境中，你可以向computed函数传入第二个参数，该参数是一个对象，包含onTrack和onTrigger两个函数。这两个函数分别用于追踪计算属性的依赖和触发计算属性的重新计算。

<template><div><p>计数: {{ count }}</p><p>双倍计数: {{ doubleCount }}</p><button @click="increment">增加</button></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const doubleCount = computed(() => count.value * 2, {onTrack(e) {console.log('计算属性追踪依赖:', e);},onTrigger(e) {console.log('计算属性触发更新:', e);},});const increment = () => {count.value++;};return {count,doubleCount,increment,};},
};
</script>

在这个例子中，当count的值变化时，onTrack和onTrigger函数会被调用，并输出相关的调试信息。

计算属性的最佳实践

1. 避免在getter中执行异步操作或修改其他状态：计算属性的getter函数应该只根据依赖项计算值，不应该有其他副作用。
2. 谨慎使用可写的计算属性：虽然Vue3允许创建可写的计算属性，但在大多数情况下，你应该优先考虑使用普通的数据属性。
3. 利用计算属性的缓存机制：计算属性只有在依赖项发生变化时才会重新计算，这可以显著提高性能。

通过掌握Vue3组合式API中的计算属性，你可以更高效地管理和处理组件中的派生数据。