什么是 computed 属性？
在 Vue.js 中，computed 属性是一种计算属性，它是一个函数，返回一个计算结果。computed 属性是基于其依赖属性的值进行计算，并且只有在依赖属性发生变化时，才会进行重新计算。
computed 属性的特点
- 更充分利用缓存
computed 属性能够缓存其计算结果，只有在依赖属性改变的情况下才会重新计算，这样可以充分利用计算机内存，提高应用程序的性能。
- 更加灵活
computed 属性是基于其依赖属性进行计算的，这样能够允许我们进行多种复杂的操作，如数据筛选、数据过滤、数据处理等等。
- 更加易于维护
computed 属性能够将某一段逻辑抽象成一个计算属性，使得代码更加简洁易懂，能够提高代码的可维护性。
computed 属性的使用
下面我们通过一个实例来详细了解 computed 属性的使用。
假设我们有一个数据列表，列表中存储了每个人的姓名、年龄、身高和体重。现在我们需要计算出每个人的 BMI 值，然后将其显示在一个分栏表格中。
// javascriptcn.com 代码示例
<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
<th>体重</th>
<th>BMI</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in dataList" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.height }}</td>
<td>{{ item.weight }}</td>
<td>{{ item.bmi }}</td>
</tr>
</tbody>
</table>
</div>
</template>在上面的代码中，我们使用了一个 v-for 指令来遍历 dataList 数组，将数组中的每个元素都显示在表格中。通过添加一个 computed 属性，我们可以计算出每个人的 BMI 值，并将其添加到列表中。
// javascriptcn.com 代码示例
<script>
export default {
data() {
return {
dataList: [
{ name: '张三', age: 20, height: 1.8, weight: 70 },
{ name: '李四', age: 21, height: 1.75, weight: 65 },
{ name: '王五', age: 22, height: 1.9, weight: 80 },
],
};
},
computed: {
bmiList() {
return this.dataList.map((item) => {
const bmi = item.weight / (item.height * item.height);
return { ...item, bmi };
});
},
},
};
</script>可以看到，我们在 computed 属性中定义了一个 bmiList 属性，该属性返回一个新数组，该数组包含每个人的姓名、年龄、身高、体重和 BMI 值。在返回结果时，我们使用了 data 中的 dataList 数组，并通过 map 方法对其进行了处理。
最后，在模板中，我们将 item.bmi 替换为 {{ item.bmi }}，这样就可以将计算出的 BMI 值显示在分栏表格中了。
总结
本文介绍了 Vue.js 中的 computed 属性，包括 computed 属性的定义、特点以及使用方法。通过实例的演示，我们可以看到 computed 属性在数据处理方面的强大功能，它能够更加灵活地处理数据，提高代码的可维护性和性能。在开发过程中，我们应该充分利用 computed 属性，将某一段逻辑抽象成一个计算属性，使代码更加简洁易懂。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653e16447d4982a6eb7a9863