跳到主要内容位置

Vue 3.x: 使用 computed 计算属性处理稍复杂的业务逻辑

张旭乾

在上一篇文章的示例里边,我们通过点击一个按钮来展示一个问题的答案,而按钮的文案会根据答案的显示与否,而动态的发生变化。但是呢,这个文案的判断逻辑我们是写在 html 模板里边的,用了一串三目运算符:

<button @click="showAnswer = !showAnswer">
{{ showAnswer ? "隐藏" : "显示" }}答案
</button>

对于只在一个地方使用这个逻辑的时候,可能并没有什么问题,但是如果有多次使用到这个逻辑的地方,那么我们需要反复复制粘贴这个逻辑:

<button @click="showAnswer = !showAnswer">
{{ showAnswer ? "隐藏" : "显示" }}答案
</button>
<!-- 其它地方 -->
<p>{{ showAnswer ? "隐藏" : "显示" }}答案</p>
<p></p>
<p>{{ showAnswer ? "隐藏" : "显示" }}答案</p>
<p>...</p>

计算属性

在 Vue 中,它提供了一个 computed 配置项,可以让我们把一些简单的逻辑定义成一个函数,然后这个函数就可以像使用 data 里的属性一样,直接使用它的名字来获取它的值。这些在 computed 中定义的函数,我们把它们叫作计算属性

// 示例:事件处理和响应性入门
const app = Vue.createApp({
data() {
// ...
},
computed: {
label() {
return this.showAnswer ? "隐藏答案" : "显示答案";
},
},
});

在计算属性的函数里边,我们可以访问 Vue 实例里边的所有内容。这个 Vue 实例,就是我们之前调用 app.mount()之后返回的对象,可以直接使用 this 来访问:

label() {
return this.showAnswer ? "隐藏答案" : "显示答案";
},
// this <- Vue.createApp({}).mount("#app");

Vue 实例中包含从 data() 函数返回的对象里的全部属性,根据这个些属性,我们可以编写一些复杂的逻辑,例如根据状态显示不同的文本,过滤数组,获取数组长度等等,每当它依赖的属性发生变化时,它会重新计算来返回新的值,也就是说计算属性也是响应式的:

// Vue 实例
{
showAnswer: false
}

// computed
label() {
return this.showAnswer ? "隐藏答案" : "显示答案";
},

使用计算属性会比直接在 html 里编写计算逻辑要灵活多了,因为它可以多次复用,并且能像普通 data 中的属性一样,直接使用函数名称就可以使用它的值了,而且当它依赖的属性发生变化时,它也会自动重新计算,返回新的值。

showAnswer: true;
label: 隐藏答案;
showAnswer: false;
label: 显示答案;

示例

我们来编写示例测试一下计算属性。在我们上篇文章的这个项目里边,打开 index.js,在 createApp() 函数的对象参数中,再定义一个 computed 属性:

// 示例:使用 computed 处理稍复杂的业务逻辑
const app = Vue.createApp({
data() {
// ...
},
computed: {},
});
app.mount("#app");

这里注意,computed 是一个对象属性,不是函数,跟 data 不一样。 然后在 computed 对象里边定义一个 label() 函数,在函数里面判断 this.showAnswer 的值,如果是 true,就返回『隐藏答案』,如果是 false 就返回『显示答案』:

computed: {
label() {
return this.showAnswer ? "隐藏答案" : "显示答案";
},
},

之后,回到 index.html 里边,把 这两个标签中间的插值替换为 label,这样就可以简化 button 里的判断逻辑了:

<button @click="showAnswer = !showAnswer">{{ label }}</button>

那么我们再看一下运行结果,这里点击显示答案,按钮就变成了隐藏答案,点击隐藏答案,它就又变成了显示答案。

小结

好了,这个就是 Vue 中 computed 计算属性的定义和使用方法。我们通过给 Vue.createApp() 的参数对象中,添加一个 computed 属性,来定义计算属性,每个计算属性都是一个函数,在函数里边可以进行一些简单的数据计算,并且它能够通过 this 来访问 Vue 实例里的内容,例如 data() 函数返回的对象属性。之后,在 html 模板中,就可以直接使用函数名来访问计算属性的值了。

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买