在 Vue 中，computed 计算属性是一种非常有用的特性。通过 computed 计算属性，我们可以将复杂的逻辑分离出来，使得模板中的代码更加简洁易懂。本文将介绍 computed 计算属性的应用场景，并提供示例代码以便读者更好地理解。
什么是 computed 计算属性？
在 Vue 组件中，computed 是一种声明式的计算属性，它根据一些已知的数据来计算出新的数据。
computed 计算属性只有在它所依赖的数据发生变化时才会重新计算。这使得我们可以将那些可能会影响到组件渲染的耗时操作放置到 computed 属性里面，从而提高组件的性能。
computed 计算属性的应用场景
下面是 computed 计算属性的一些常见应用场景：
数据格式化
当我们需要对数据进行格式化时，computed 计算属性是十分有用的。例如，我们需要将一个数字转换为货币格式。假设我们有如下数据：
data() {
return {
price: 10000,
};
},我们可以使用 computed 计算属性将价格转换为货币格式：
computed: {
formattedPrice() {
return `￥${(this.price / 100).toFixed(2)}`;
},
},然后在模板中使用 formattedPrice：
<p>价格：{{formattedPrice}}</p>过滤和排序
有时候我们需要根据某些条件来过滤或者排序数据。例如，我们想要显示一个数字数组中的所有奇数。假设我们有如下数据：
data() {
return {
numbers: [1, 2, 3, 4, 5],
};
},我们可以使用 computed 计算属性来过滤出所有的奇数：
computed: {
oddNumbers() {
return this.numbers.filter((number) => number % 2 !== 0);
},
},然后在模板中使用 oddNumbers：
<ul>
<li v-for="number in oddNumbers" :key="number">{{number}}</li>
</ul>同样的，我们也可以使用 computed 计算属性来对数据进行排序。
表单验证
表单验证是 Web 开发中必不可少的一部分。Vue 中提供了丰富的表单验证工具，但有时候我们需要自定义一些验证规则。这时候 computed 计算属性就可以派上用场了。
例如，我们有一个表单，里面包含一个输入框和一个按钮。当用户点击按钮时，我们需要验证输入框中的文本是否为有效的电子邮件地址。假设我们有如下数据：
data() {
return {
email: "",
};
},我们可以使用 computed 计算属性来判断 email 是否为有效的电子邮件地址：
computed: {
isEmailValid() {
const emailRegex =
// eslint-disable-next-line no-control-regex
/^[\x00-\x7F]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/i;
return emailRegex.test(this.email);
},
},然后在模板中使用 isEmailValid 来禁用或启用按钮：
<input v-model="email" /> <button :disabled="!isEmailValid">提交</button>
总结
本文介绍了 Vue 中 computed 计算属性的应用场景，并提供了示例代码。通过 computed 计算属性，我们可以将复杂的逻辑分离出来，使得模板中的代码更加简洁易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36864