vue计算属性

计算属性（Computed）是 Vue.js 提供的一个用于处理常见的计算逻辑的特殊属性。通过定义计算属性，我们可以在模板中直接使用它们，并且它们会根据依赖的数据自动更新。这样可以将复杂的逻辑封装起来，使得页面逻辑更加清晰和可维护。

计算属性的定义格式如下：

computed: {
  propertyName: function () {
    // 计算逻辑
    return result;
  }
}

其中 propertyName 是计算属性的名称，function () {} 是计算属性的 getter，用来计算和返回属性的值。

下面是一个具体的示例，假设有一个数组 list，我们需要计算和返回这个数组的总长度：

data: {
  list: [1, 2, 3, 4, 5]
},
computed: {
  listLength: function () {
    return this.list.length;
  }
}

在模板中，我们可以直接使用 listLength 属性来获取数组的总长度：

<p>The length of list is: {{ listLength }}</p>

当 list 数组发生变化时，listLength 属性会自动更新，模板中的值也会更新。

除了 getter，计算属性还可以有 setter。如果需要在模板中使用计算属性并且需要改变它的值，就需要使用 setter。下面是一个带有 setter 的计算属性示例，该属性用于获取和设置数组的第一个元素：

data: {
  list: [1, 2, 3, 4, 5]
},
computed: {
  firstItem: {
    get: function () {
      return this.list[0];
    },
    set: function (newValue) {
      this.list[0] = newValue;
    }
  }
}

在模板中，我们可以通过 v-model 指令来绑定计算属性：

<input v-model="firstItem">
<p>The first item is: {{ firstItem }}</p>

这样，当输入框的值发生改变时，firstItem 的 setter 会被触发，list 数组的第一个元素也会被更新。

总结：

• 计算属性通过定义 getter 和（可选）setter 来处理数据的计算逻辑；
• 计算属性会根据依赖的数据自动更新；
• 在模板中可以直接使用计算属性，无需手动调用；
• 计算属性还可以通过 setter 来改变其值。