彻底理解computed是否能传参

2023-12-18 05:58:05

揭秘 Computed 属性：Vue.js 中的派生数据计算神器

计算属性是 Vue.js 中一个极其强大的工具，它允许你计算和缓存派生数据。想象一下，你有一个列表，你想计算它的总和。或者，你有一个对象，你想将它的属性转换为另一种格式。这就是 computed 属性大显身手的地方！

计算属性的本质

与 data 属性和 methods 方法不同，计算属性的值不是直接定义的。相反，它是基于其他属性的值计算得出的。计算属性本质上是一个函数，接收其他属性的值作为输入，然后返回一个新的值。

示例：

computed: {
  fullName: {
    // getter 函数
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    // setter 函数（可选）
    set(newValue) {
      // 根据新的值更新 firstName 和 lastName
    }
  }
}

在这个示例中，fullName 计算属性计算了 firstName 和 lastName 属性的值，并返回它们的连接。如果 firstName 或 lastName 的值发生改变，fullName 的值也会自动更新。

传递参数给 Computed 属性

一个不为人知但非常有用的特性是 computed 属性可以接受参数。这些参数可以是其他属性的值或外部传入的值。

示例：

computed: {
  uppercase: {
    get(string) {
      return string.toUpperCase();
    }
  }
}

在这个示例中，uppercase 计算属性接受一个字符串参数，并返回它的全部大写版本。

最佳时机：使用 Computed 属性

计算属性特别适合用于以下场景：

计算派生数据，例如列表的总和或对象的格式转换
优化性能，通过缓存经常使用的值
简化代码，将复杂计算封装在计算属性中

与其他 Vue 属性的比较

特征	Computed 属性	Data 属性	Methods 方法
值来源	计算得到	直接定义	直接定义
触发执行	属性值发生变化时	手动调用	手动调用
缓存	可缓存	不可缓存	不可缓存

常见问题解答

Computed 属性比 Methods 方法更优吗？

这取决于具体情况。如果计算是频繁执行的，使用 computed 属性可以提高性能。
Computed 属性需要 setter 函数吗？

setter 函数是可选的。只有当需要更新派生数据时才需要它。
可以使用 Vuex 代替 Computed 属性吗？

Vuex 主要用于管理全局状态，而 computed 属性用于计算和缓存组件内部的数据。
如何避免 Computed 属性的过度使用？

只有在真正需要派生数据时才使用 computed 属性。过度使用可能会导致性能问题。
可以使用 Computed 属性来响应外部事件吗？

不，computed 属性只能响应内部属性的变化。要响应外部事件，可以使用 methods 方法或 Vuex。