Vue3+Vite+TypeScript+Pinia 4：揭开计算属性 computed 的神秘面纱

4.1 computed 概述

计算属性是 Vue3 中用于声明响应式计算值的一种机制。它允许您根据其他响应式数据的变化而动态计算和返回一个新的值。计算属性的值会随着依赖的响应式数据变化而自动更新，因此您可以轻松地将计算结果用于模板中。

4.2 computed 使用场景

计算属性通常用于以下场景：

• 格式化数据：例如，您可以使用计算属性将数字格式化为货币字符串或将日期格式化为可读的字符串。
• 过滤数据：您可以使用计算属性来过滤数据，例如，从数组中提取满足特定条件的项目。
• 组合数据：您可以使用计算属性来组合来自不同来源的数据，例如，将来自多个 API 请求的结果组合成一个对象。
• 派生数据：您可以使用计算属性来派生新的数据，例如，计算购物车中商品的总价。

4.3 Vue2 与 Vue3 语法对比

在 Vue2 中，计算属性使用 computed 选项声明，而在 Vue3 中，计算属性使用 computed() 函数声明。

Vue2：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

Vue3：

computed() {
  return {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}

4.4 computed 缓存特性

计算属性具有缓存特性，这意味着只有当依赖的响应式数据发生变化时，才会重新计算该计算属性的值。这可以显著提高应用程序的性能，因为无需在每次组件重新渲染时都重新计算所有计算属性的值。

4.5 computed 的 get 与 set

计算属性可以定义 get 和 set 函数。get 函数用于返回计算属性的值，而 set 函数用于设置计算属性的值。

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(newValue) {
      const [firstName, lastName] = newValue.split(' ');
      this.firstName = firstName;
      this.lastName = lastName;
    }
  }
}

在上面的示例中，fullName 计算属性既可以被读取，也可以被设置。您可以使用 this.fullName 来获取计算属性的值，也可以使用 this.fullName = 'John Doe' 来设置计算属性的值。

结语

计算属性是 Vue3 中一种强大的工具，它可以帮助您轻松地管理和计算数据。通过掌握计算属性的用法，您可以编写出更简洁、更高效的 Vue3 代码。