vue--计算属性

在 Vue.js 中，计算属性（Computed Property）是一种特殊的属性，它基于现有的数据计算出一个新的值，并且会根据其依赖的数据进行自动更新。计算属性主要用于将复杂的逻辑和变量计算封装为属性，以便在模板中直接使用。以下是使用计算属性的一般步骤：

1.在 Vue 实例的 computed 对象中定义计算属性，每个计算属性都可以有一个自定义的函数。

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

 

 

2.提供一个计算属性的函数，函数会在计算属性被访问时自动执行，并返回计算的结果。
3.在模板中使用计算属性，在模板中可以像访问普通数据属性一样访问计算属性。

下面是一个简单的示例：

<template>
  <div>
    <p>原始价格：{{ price }}</p>
    <p>优惠价格：{{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.1
    };
  },
  computed: {
    discountedPrice() {
      return this.price - (this.price * this.discount);
    }
  }
};
</script>

 

在上述示例中，我们定义了两个数据属性 price 和 discount，以及一个计算属性 discountedPrice。计算属性 discountedPrice 使用 price 和 discount 的值计算出一个新的值，即优惠后的价格。当 price 或 discount 的值发生变化时，discountedPrice 会自动更新。
计算属性是基于它们的依赖进行缓存的，这意味着在依赖项没有发生变化时，计算属性会立即返回之前的结果，而不会重新计算。
计算属性还可以带有 setter 方法，用于响应属性的变化并更新相关数据。例如：

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(value) {
      const parts = value.split(' ');
      this.firstName = parts[0];
      this.lastName = parts[1];
    }
  }
}

在模板中使用计算属性时，只需要像访问普通属性一样使用它们，在模板中不需要调用函数或者使用括号。Vue 会自动处理计算属性的调用和更新。
计算属性是 Vue.js 中非常有用的特性，它使你能够将复杂的计算逻辑封装为简洁的属性，并且能够实时响应数据的变化。通过使用计算属性，你可以使模板更加简洁和可读，并且能够自动处理数据的更新和依赖管理。