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 模板中，就可以直接使用函数名来访问计算属性的值了。