Vue3 计算属性学习笔记

计算属性是Vue中的一个重要概念，对于Vue组件中经常需要根据数据进行一些运算得到新的值或者对数据进行筛选和排序等操作时非常有用。

什么是计算属性

计算属性是Vue实例的一种属性，它是通过对已有的数据进行计算得出新值的一种方式。相较于直接在模板中写逻辑，使用计算属性可以使得代码更加清晰可读，同时也方便了测试和维护。

在Vue3中，我们可以使用computed函数来定义计算属性，其语法如下：

javascriptCopy Code
const app = Vue.createApp({
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    // 计算属性名称
    doubleCount() {
      // 计算属性的计算逻辑
      return this.count * 2;
    },
  },
});

在上面的例子中，我们定义了一个计算属性doubleCount，该属性根据count这个响应式数据进行计算，返回count的两倍。当count的值发生变化时，doubleCount也会自动更新。

除了基本的计算操作外，computed还经常用于对数据进行筛选和排序。下面是一个例子，演示了如何使用computed对数组中的元素进行过滤：

javascriptCopy Code
const app = Vue.createApp({
  data() {
    return {
      todos: [
        { text: "学习Vue", done: true },
        { text: "写博客", done: false },
        { text: "看电影", done: false },
      ],
      filter: "all",
    };
  },
  computed: {
    filteredTodos() {
      if (this.filter === "all") {
        return this.todos;
      } else if (this.filter === "done") {
        return this.todos.filter((todo) => todo.done);
      } else if (this.filter === "undone") {
        return this.todos.filter((todo) => !todo.done);
      }
    },
  },
});

在上面的例子中，我们定义了一个filteredTodos计算属性，该属性根据filter的值对todos数组进行过滤，返回一个新的数组。当filter或者todos的值发生变化时，filteredTodos也会自动更新。

计算属性的缓存机制

Vue的计算属性具有缓存机制，也就是说如果计算属性所依赖的数据没有发生变化，那么计算属性的值就会被缓存起来，不会重复计算。

这个功能可以在一定程度上提高应用的性能，但是也需要注意一些问题。例如，如果我们在计算属性中调用了一个耗时很长的函数，那么当依赖数据发生变化时，可能会出现页面卡顿的情况。此时，最好将耗时的逻辑放在方法中执行，而不是在计算属性中。

实例

下面是一个使用计算属性的实例，该实例计算了一个数的平方和：

htmlCopy Code
<template>
  <div>
    <div>数列: {{ numbers }}</div>
    <div>数列平方和: {{ sumOfSquares }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5],
    };
  },
  computed: {
    sumOfSquares() {
      return this.numbers.reduce((acc, cur) => acc + cur * cur, 0);
    },
  },
};
</script>

在上面的例子中，我们定义了一个数据numbers，它包含了一个数组。然后我们定义了一个计算属性sumOfSquares，该属性根据numbers数组中的元素计算出每个元素的平方，并将结果累加起来。最后将结果显示在页面上。

这个例子演示了如何使用计算属性对数据进行复杂的计算操作。