Vue computed多种使用场景和详细使用案例

Vue的computed属性是一种特殊的数据属性，它们根据组件中其他数据属性的值动态计算得出。computed属性是响应式的，只有当依赖的响应式数据发生变化时，计算属性才会重新计算。以下是一些常见的使用场景和详细案例：

1. 基于现有数据属性进行转换

假设你有一个价格数据，需要显示为货币格式。

<template>
  <div>{{ formattedPrice }}</div>
</template>

<script>
export default {
  data() {
    return {
      price: 100
    };
  },
  computed: {
    formattedPrice() {
      return '$' + this.price.toFixed(2);
    }
  }
};
</script>

2. 根据多个数据属性进行逻辑判断

你可能需要根据多个数据属性来决定是否显示某个元素。

<template>
  <div v-if="isEligible">
    你符合条件！
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      hasDriverLicense: true
    };
  },
  computed: {
    isEligible() {
      return this.age >= 18 && this.hasDriverLicense;
    }
  }
};
</script>

3. 列表过滤

根据某个条件过滤列表数据。

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' }],
      filter: ''
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.toLowerCase().includes(this.filter.toLowerCase()));
    }
  }
};
</script>

4. 列表排序

对列表数据进行排序。

<template>
  <ul>
    <li v-for="item in sortedItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 3, name: 'Orange' }, { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }]
    };
  },
  computed: {
    sortedItems() {
      return this.items.sort((a, b) => a.name.localeCompare(b.name));
    }
  }
};
</script>

5. 计算属性的依赖

计算属性可以依赖于其他计算属性。

<template>
  <div>{{ discount }}</div>
</template>

<script>
export default {
  data() {
    return {
      price: 100
    };
  },
  computed: {
    tax() {
      return this.price * 0.07; // 7% tax
    },
    discount() {
      return this.price * 0.1; // 10% discount
    },
    finalPrice() {
      return this.price + this.tax - this.discount;
    }
  }
};
</script>

6. 与方法结合使用

计算属性可以结合组件方法使用，但要注意计算属性是缓存的，只有依赖发生变化时才会重新计算。

<template>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.getFullName();
    }
  },
  methods: {
    getFullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

注意事项

• 计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时，计算属性才会重新计算。
• 计算属性是同步的，适合进行简单的计算和逻辑判断。
• 如果需要执行异步操作或更复杂的逻辑，应该使用方法（methods）。
• 计算属性不适用于处理外部资源，如API调用。

通过上述案例，你可以看到Vue的computed属性在不同场景下的应用，它们可以帮助你以声明式的方式构建响应式的数据逻辑。