computed计算属性

最新推荐文章于 2025-07-06 22:47:46 发布

WYH在路上

最新推荐文章于 2025-07-06 22:47:46 发布

阅读量693

点赞数 16

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/a1963919036/article/details/144930299

前端专栏收录该内容

9 篇文章

订阅专栏

在 Vue.js 中，computed 属性是一种特殊类型的属性，用于声明性地描述一个值是基于组件中其他响应式数据计算得来的。computed 属性非常适合用于当你需要根据现有数据派生出一些状态时，而不需要执行复杂的逻辑或副作用操作。以下是关于 computed 属性的详细介绍：

特点

依赖响应式数据：computed 属性依赖于组件的响应式数据。当依赖的数据发生变化时，computed 属性会自动重新计算。
缓存结果：Vue 会缓存 computed 属性的值，只有当依赖的数据发生变化时，才会重新计算。这意味着只要依赖的数据没有变化，多次访问 computed 属性将返回同一个结果，而不需要重新计算。
声明式：computed 属性是声明式的，你只需要定义计算逻辑，Vue 会自动处理依赖跟踪和更新。

使用场景

数据派生：当你需要根据现有数据派生出新的数据时，例如计算用户的全名、总价等。
简化模板：通过将复杂的逻辑移到 computed 属性中，可以使模板更加简洁和易于维护。
性能优化：由于 computed 属性是缓存的，当依赖的数据没有变化时，多次访问 computed 属性不会导致重复计算，从而提高性能。

范例 1：计算用户全名

假设你有一个用户对象，包含 firstName 和 lastName，你想计算用户的全名：

<template>
  <div>
    <input v-model="user.firstName" placeholder="First Name">
    <input v-model="user.lastName" placeholder="Last Name">
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        firstName: '',
        lastName: '',
      },
    };
  },
  computed: {
    fullName() {
      return `${this.user.firstName} ${this.user.lastName}`;
    },
  },
};
</script>

在这个范例中，当用户在输入框中输入 firstName 或 lastName 时，fullName 会自动更新。

范例 2：过滤列表

假设你有一个商品列表和一个搜索框，你想根据用户的输入过滤商品列表：

<template>
  <div>
    <input v-model="searchText" placeholder="Search products">
    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      products: [
        { id: 1, name: 'Product A' },
        { id: 2, name: 'Product B' },
        { id: 3, name: 'Product C' },
      ],
    };
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product =>
        product.name.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
  },
};
</script>

在这个范例中，当用户在搜索框中输入文本时，filteredProducts 会自动根据输入过滤商品列表。

范例 3：计算总价

假设你有一个购物车列表，每个商品有价格和数量，你想计算购物车的总价：

<template>
  <div>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - ${{ item.price }} x {{ item.quantity }}
        <input type="number" v-model="item.quantity" min="1">
      </li>
    </ul>
    <p>Total Price: ${{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { id: 1, name: 'Item A', price: 10, quantity: 1 },
        { id: 2, name: 'Item B', price: 20, quantity: 2 },
        { id: 3, name: 'Item C', price: 30, quantity: 3 },
      ],
    };
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
    },
  },
};
</script>