巧用Vue.js 计算属性 computed，轻松完成值转换

2024-02-24 11:04:03

Vue.js 计算属性 computed：化繁为简的值转换利器

在构建复杂的 Vue.js 应用时，我们常常需要对数据进行各种转换，例如将日期格式化、将数字转换为货币格式等等。如果直接在模板中进行这些操作，代码会变得冗长且难以维护。这时，Vue.js 的计算属性 computed 就派上用场了。它就像一个数据转换的魔法师，能够将复杂的操作隐藏起来，让你的代码简洁而优雅。

computed 本质上是一个函数，但它与 methods 方法不同。computed 的结果会被缓存，只有当它依赖的数据发生变化时才会重新计算。这种惰性计算机制极大地提高了应用的性能，尤其是在处理大量数据时效果显著。

如何使用 computed

使用 computed 非常简单，只需要在 Vue 组件中定义一个 computed 属性，并将需要进行转换的操作放在一个函数中即可。例如，假设我们需要将一个字符串类型的日期转换为更友好的格式：

<template>
  <div>
    格式化后的日期：{{ formattedDate }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateString: '2023-10-27'
    }
  },
  computed: {
    formattedDate() {
      const date = new Date(this.dateString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}年${month}月${day}日`;
    }
  }
}
</script>

在这个例子中，formattedDate 就是一个计算属性。它依赖于 dateString 数据，当 dateString 发生变化时，formattedDate 也会自动更新。在模板中，我们可以像访问普通数据一样访问 formattedDate，Vue.js 会自动获取它计算后的结果。

computed 的优势

除了简洁易用之外，computed 还具有以下优势：

提高性能： 由于 computed 的结果会被缓存，避免了不必要的重复计算，从而提升了应用的性能。
增强代码可读性： 将数据转换逻辑封装在 computed 中，使代码更加清晰易懂，方便维护。
简化模板代码： 在模板中可以直接使用 computed 的结果，避免了复杂的表达式，使模板更加简洁。

computed 的应用场景

computed 的应用场景非常广泛，例如：

格式化数据： 将日期、数字、货币等数据格式化为更易读的格式。
过滤数据： 根据特定条件筛选数据，例如只显示状态为“已完成”的任务。
计算数据： 计算数据的总和、平均值、最大值、最小值等。
组合数据： 将多个数据组合成一个新的数据，例如将姓和名组合成完整的姓名。

computed 与 methods 的区别

虽然 computed 和 methods 都可以用来处理数据，但它们之间有一些重要的区别：

计算方式： computed 是惰性计算，只有当依赖的数据发生变化时才会重新计算；而 methods 是每次调用都会重新执行。
返回值： computed 必须返回一个值；而 methods 可以返回任何值，也可以不返回值。
使用场景： computed 适用于需要缓存结果的场景，例如数据转换、数据过滤等；而 methods 适用于需要执行特定操作的场景，例如发送网络请求、操作 DOM 元素等。