Skip to content

Vue计算属性

对于下拉选择器的options，可以使用计算属性

实现方式

 computed: {
    userOptions() {
      return this.userList.map(item => ({
        label: item.name,
        value: item.id
      }))
    }
 }
  1. 获取 this.userList （一个包含用户信息的数组）。
  2. 遍历 userList 中的每个用户对象。
  3. 对于每个用户对象，创建一个新对象，新对象包含 label 和 value 属性，其中 label 的值是用户的 name，value 的值是用户的 id。
  4. 最终返回一个由这些新对象组成的新数组。

使用计算属性而不是普通方法的原因

普通方法被调用时，它都会重新执行 map 操作，没有缓存机制。如果你的组件因为其他数据变化而频繁重新渲染，或者在模板中多次调用 getUserOptions()，就会造成不必要的性能开销。

  1. 缓存（Caching）机制：

    计算属性是基于其依赖进行缓存的。这意味着只要计算属性的依赖（在这个例子中是 this.userList）没有改变，userOptions 就会立即返回上一次计算的结果，而不会重新执行其函数。

    如果 userList 没有变化，即使你多次访问 userOptions，它也只会被计算一次，大大提高了性能。

    普通方法（Methods）：每次调用方法，它都会重新执行函数，无论其依赖是否改变。如果在一个复杂模板中频繁调用方法来处理数据，会导致不必要的重复计算，从而影响性能。

  2. 响应式（Reactivity）：

    计算属性是响应式的。当它们所依赖的数据（例如 userList）发生变化时，计算属性会自动重新求值，并且任何使用 userOptions 的模板或组件都会自动更新。 这使得数据和视图之间的同步变得非常简洁和高效。

  3. 可读性和维护性：

    将复杂的数据转换逻辑封装在计算属性中，使得模板更加简洁和易读。模板只负责显示 userOptions，而不必关心如何生成这些选项。

    将逻辑集中在一个地方，也方便后续的维护和修改。如果 userOptions 的生成逻辑需要调整，只需要修改计算属性的定义即可，而不需要修改模板中所有使用它的地方。

  4. 声明式编程：

    计算属性鼓励声明式编程风格。你声明了 userOptions 应该如何根据 userList 计算得出，而不是命令式地一步步执行操作。这使得代码更易于理解和推理。

适用场景

  • 计算属性适合用于从现有响应式数据派生出新数据的情况。 比如过滤列表、排序列表、格式化数据、聚合数据等。
  • 方法适合用于执行副作用操作，或者需要接受参数的情况。 比如点击按钮提交表单、发送网络请求等。
  • 在这个例子中，userOptions 是从 userList 派生出来的一个新列表，用于UI展示，完全符合计算属性的使用场景。