Vue.js功法之练气初期：复习知识点之计算属性（Computed Properties）

计算属性（Computed Properties）

计算属性是Vue.js中一个重要的概念，它允许你基于已有的数据进行运算得到一个新值。计算属性会缓存其依赖，只有在相关依赖发生改变时才会重新计算。这在处理复杂逻辑或需要频繁访问的数据时非常有用。

为什么使用计算属性？

1. 更清晰的模板代码： 将复杂的逻辑从模板中提取出来，使得模板更加清晰简洁。
2. 缓存机制： 计算属性会根据它的依赖进行缓存，只有在依赖发生变化时才会重新计算，提高性能。

示例代码

假设我们有一个数据对象，表示购物车中的商品：

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="(product, index) in cart" :key="index">
        {{ product.name }} - 单价: {{ product.price }}元
      </li>
    </ul>
    <p>总金额: {{ totalPrice }}元</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart: [
        { name: '商品1', price: 50 },
        { name: '商品2', price: 30 },
        { name: '商品3', price: 80 },
      ],
    };
  },
  computed: {
    // 计算购物车总金额
    totalPrice() {
      return this.cart.reduce((total, product) => total + product.price, 0);
    },
  },
};
</script>