Vue 3 中的计算属性（Computed Properties）详解

目录

Vue 3 中的计算属性（Computed Properties）详解

引言

什么是计算属性？

创建和使用计算属性

示例 1：基本用法

示例 2：带有 getter 和 setter 的计算属性

计算属性 vs 方法

---

Vue 3 中的计算属性（Computed Properties）详解

引言

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它以其易用性和灵活性著称。在 Vue 3 中，计算属性（Computed Properties）是一个非常强大且常用的功能，它允许开发者基于其他数据属性来创建依赖性的值，并且当这些依赖的数据发生变化时，自动更新。本文将深入探讨 Vue 3 中计算属性的概念、使用方法以及其优势。

什么是计算属性？

计算属性是 Vue 提供的一种特殊的属性类型，它能够根据其他数据的变化而自动生成新的值。相比于直接在模板中编写复杂的表达式，计算属性提供了更好的代码可读性和维护性，并且性能更优，因为 Vue 能够智能地跟踪计算属性的依赖关系，在相关数据变化时才重新计算。

创建和使用计算属性

在 Vue 组件中定义计算属性非常简单。你只需要在组件选项中的 computed 属性里声明它们即可。下面通过几个示例来说明如何创建和使用计算属性。

示例 1：基本用法

假设我们有一个输入框用于搜索过滤列表项，可以使用计算属性来动态生成过滤后的结果：

<template><div><input v-model="searchQuery" placeholder="Search..." /><ul><li v-for="(item, index) in filteredItems" :key="index">{{ item }}</li></ul></div>
</template><script setup>
import { ref, computed } from 'vue';const items = ref(['apple', 'banana', 'orange', 'grape']);
const searchQuery = ref('');// 定义计算属性
const filteredItems = computed(() => {return items.value.filter(item =>item.toLowerCase().includes(searchQuery.value.toLowerCase()));
});
</script>

在这个例子中，filteredItems 是一个计算属性，它依赖于 items 和 searchQuery 的值。每当 searchQuery 发生改变时，filteredItems 就会重新计算以返回更新后的列表。

示例 2：带有 getter 和 setter 的计算属性

有时我们需要不仅获取计算属性的结果，还希望能够在某些情况下修改它的值。这时可以通过为计算属性提供 getter 和 setter 方法来实现双向绑定。

<script setup>
import { ref, computed } from 'vue';const firstName = ref('John');
const lastName = ref('Doe');// 定义带有 getter 和 setter 的计算属性
const fullName = computed({get: () => `${firstName.value} ${lastName.value}`,set: newValue => {[firstName.value, lastName.value] = newValue.split(' ');}
});
</script>

在此示例中，fullName 计算属性不仅可以读取全名字符串，还可以设置新名字，这将同时更新 firstName 和 lastName。

计算属性 vs 方法

虽然两者都可以用来处理逻辑并返回结果，但它们之间有一些关键区别：

• 缓存：计算属性会基于其依赖的数据进行缓存。只有在其依赖的数据发生变化时才会重新计算。而方法则每次触发都会执行。
• 性能：由于计算属性有缓存机制，所以在大型应用或复杂逻辑下，使用计算属性往往能带来更好的性能表现。
• 适用场景：如果你需要对一些值做一次性转换或者简单的计算，那么使用方法可能更加直观；但是当你需要频繁访问某个计算结果并且该结果依赖于多个状态时，计算属性通常是更好的选择。