Vue 3.x: 使用 computed 计算属性处理稍复杂的业务逻辑
2022年8月 · 预计阅读时间: 3 分钟
在上一篇文章的示例里边,我们通过点击一个按钮来展示一个问题的答案,而按钮的文案会根据答案的显示与否,而动态的发生变化。但是呢,这个文案的判断逻辑我们是写在 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 模板中,就可以直接使用函数名来访问计算属性的值了。