vue中的computed

目录

一：介绍

二：例子演示

---

一：介绍

在 Vue.js 中，computed 属性是一种特殊类型的属性，它允许你声明依赖于其他数据属性的值。computed 属性的值是通过一个函数计算得出的，这个函数可以在其依赖的数据发生变化时重新计算。这使得 computed 属性成为响应式的，并且可以缓存它们的值，只有在其依赖的数据发生改变时才会重新计算。

computed 属性非常适合于执行复杂逻辑或者数据转换，并且你希望缓存结果以提高性能。与在模板内使用复杂表达式不同，使用 computed 属性可以使模板代码更清晰和易于维护。

下面是一个简单的 Vue 组件示例，展示了如何使用 computed 属性：

二：例子演示

<template>  
  <div>  
    <input v-model.number="price" type="number" placeholder="输入价格">  
    <input v-model.number="quantity" type="number" placeholder="输入数量">  
    <select v-model="taxRate">  
      <option value="0.05">5%</option>  
      <option value="0.1">10%</option>  
      <option value="0.15">15%</option>  
      <option value="0.2">20%</option>  
    </select>  
  
    <p>总价（不含税）: {{ subtotal }}</p>  
    <p>税费: {{ tax }}</p>  
    <p>总价（含税）: {{ total }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      price: 0, // 商品价格  
      quantity: 0, // 商品数量  
      taxRate: 0.05 // 税率，默认为 5%  
    };  
  },  
  computed: {  
    subtotal() {  
      // 计算商品总价（不含税）  
      return this.price * this.quantity;  
    },  
    tax() {  
      // 计算税费  
      return this.subtotal * this.taxRate;  
    },  
    total() {  
      // 计算总价（含税）  
      // 这里我们直接依赖于 subtotal 和 tax，当它们任何一个变化时，total 都会重新计算  
      return this.subtotal + this.tax;  
    }  
  }  
};  
</script>

在这个例子中，我们有一个简单的购物车商品计算场景。用户可以输入商品的价格和数量，以及选择一个税率。我们定义了三个 computed 属性：

subtotal：计算商品的总价（不含税），它依赖于 price 和 quantity 数据属性。
tax：计算税费，它依赖于 subtotal 和 taxRate 数据属性。注意，尽管 tax 没有直接依赖于 price 和 quantity，但由于它依赖于 subtotal，当 price 或 quantity 变化时，tax 也会重新计算。
total：计算总价（含税），它直接依赖于 subtotal 和 tax。
这个例子展示了 computed 属性的一个关键特点：它们是缓存的，并且只有当它们依赖的数据属性发生变化时才会重新计算。在这个例子中，如果你改变 price 或 quantity，所有相关的 computed 属性（subtotal、tax 和 total）都会自动更新，而不需要额外的代码来触发这些更新。这使得 computed 属性非常适合处理复杂的、需要响应式更新的逻辑。