Vue 计算属性

• 计算属性（Computed properties）与数据属性类似，只是它们依赖于其他属性。
• 计算属性像方法一样编写，但它们不接受任何输入参数。
• 当依赖项发生变化时，计算属性会自动更新，而当发生某些事情时，方法会被调用，例如事件处理。
• 当输出依赖于其他内容的内容时，会使用计算属性。

计算属性是动态的

计算属性的最大优点是它是动态的，这意味着它会根据例如一个或多个数据属性的值而变化。

计算属性是 Vue 实例中我们将学习的第三个配置选项。我们已经看到的前两个配置选项是 “数据(data)” 和 “方法(methods)”。

与 “数据(data)” 和 “方法(methods)” 一样，计算属性在 Vue 实例中也有一个保留名称：'computed'。

语法

const app = Vue.createApp({
  data() {
    ...
  },
  computed: {
    ...
  },
  methods: {
    ...
  }
})

计算属性 ‘yes’ 或 ‘no’

假设我们想要一个表单来创建购物清单中的商品，并且我们想要标记新商品是否重要。当复选框被选中时，我们可以添加 true 或 false 反馈，就像我们之前在实例中所做的那样：

实例

输入元素是动态的，因此文本反映了状态。

<input type="checkbox" v-model="chbxVal"> {{ chbxVal }}

data() {
  return {
    chbxVal: false
  }
}

然而，如果你问某人某件事是否重要，他们很可能会回答 是 或 否 ，而不是 true 或 false。因此，为了使我们的表格更符合正常语言（更直观），我们应该在复选框上使用 是 或 否 作为反馈，而不是 true 或 false。

你猜怎么着，计算属性是帮助我们做到这一点的完美工具。

实例

通过计算属性 'isImportant'，我们现在可以在打开和关闭复选框时自定义对用户的文本反馈。

<input type="checkbox" v-model="chbxVal"> {{ isImportant }}

data() {
  return {
    chbxVal: false
  }
},
computed: {
  isImportant() {
    if(this.chbxVal){
      return 'yes'
    }
    else {
      return 'no'
  }
}

计算属性对比方法

计算属性和方法都被写成函数，但它们不同：

• 方法在从 HTML 调用时运行，但当依赖项更改时，计算属性会自动更新。
• 计算属性的使用方式与我们使用数据属性的方式相同，但它们是动态的。