Vue计算属性computed

在 Vue 中，计算属性（computed properties）是基于已有数据进行计算得出的属性，通常用于需要根据已有的 data 或其他属性来动态计算值时。

基本语法

计算属性通过 Vue 实例的 computed 选项来定义。与方法不同，计算属性会根据它们的依赖缓存值，只有在依赖的 data 改变时才重新计算，从而提高性能。

示例

<template>
  <div>
    <p>原始价格：{{ price }}</p>
    <p>折扣价格：{{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,  // 原始价格
      discount: 0.2  // 折扣率
    };
  },
  computed: {
    // 计算属性：根据价格和折扣计算折扣后的价格
    discountedPrice() {
      return this.price * (1 - this.discount);
    }
  }
};
</script>

解释

1. data: 定义了 price（原始价格）和 discount（折扣率）。
2. computed: 定义了计算属性 discountedPrice，它会根据 price 和 discount 来计算折扣后的价格。
3. {{ discountedPrice }}: 在模板中直接使用 discountedPrice，它会自动计算并返回最新的折扣价格。

计算属性的特点

1. 缓存：计算属性会基于它们的依赖进行缓存，只有在相关数据（如 price 或 discount）发生变化时，计算属性才会重新计算。
2. 访问性：你可以像普通属性一样在模板中直接使用计算属性。
3. 无需手动调用：计算属性会自动更新，无需手动调用。

使用计算属性作为 getter 和 setter

计算属性也可以用作 setter，当你需要同时获取和设置某个值时，计算属性可以提供这两种功能。

<template>
  <div>
    <p>当前全名：{{ fullName }}</p>
    <input v-model="fullName" placeholder="修改全名">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    // getter
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      // setter
      set(newFullName) {
        const names = newFullName.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  }
};
</script>

解释

1. getter: 返回由 firstName 和 lastName 组成的全名。
2. setter: 当你修改 fullName 时，setter 会被触发，并将新值拆分成 firstName 和 lastName。

总结

• 计算属性用于根据已有的数据动态计算结果，且只有依赖的数据发生变化时才会重新计算。
• 它们与方法不同，计算属性是缓存的，提升了性能。
• 可以用作 getter 和 setter，适用于更复杂的属性计算和更新需求。