vue 计算属性的使用

Vue中的计算属性是一种特殊的属性，可以根据其他属性的值进行计算，并返回一个新的值。计算属性的使用可以通过在Vue的配置项中添加computed字段来定义。语法如下：

computed: {
计算属性名() {
return 值;
}
}

在模板中可以通过双花括号的方式调用计算属性，例如{{ 计算属性名 }}。计算属性会在相关响应式依赖发生改变时重新求值，并且会进行缓存，只有在相关依赖发生改变时才会重新计算。这与使用methods选项定义的函数不同，函数每次都会执行函数体进行计算。[2][3]

举个例子，假设我们有两个变量num1和num2，我们想要计算它们的和，可以使用计算属性来实现。在data中定义num1和num2的初始值，然后在computed中定义一个名为num的计算属性，返回num1和num2的和。在模板中可以通过{{ num }}来调用计算属性，它会自动计算并返回num1和num2的和。[2]

export default {
  data() {
    return {
      num1: 10,
      num2: 20,
    };
  },
  computed: {
    num() {
      return this.num1 + this.num2;
    },
  },
};

这样，当num1或num2的值发生改变时，num会自动重新计算并更新。[2]