Vue.js 中计算属性的用途是什么？

计算属性（Computed properties）在Vue.js中是一种非常有用的功能，它主要用于基于它们依赖的数据动态计算一个值。计算属性会根据依赖的数据的变化自动更新其值，这使得开发者能够用更少的代码实现对数据的响应式处理。

计算属性的几个主要用途包括：

1. 数据格式化： 当你需要在展示之前对数据进行某种格式化时，计算属性非常有用。例如，假设你有一个用户对象，里面包括用户的名和姓，你可以使用计算属性来创建一个全名：

   javascript
   computed: {
     fullName() {
       return `${this.firstName} ${this.lastName}`;
     }
   }

2. 复杂逻辑封装： 如果你的应用界面依赖于复杂逻辑的数据，将这些逻辑放在计算属性中可以使你的代码更加清晰易懂。例如，你可能需要根据购物车中的多个商品价格计算总价：

   javascript
   computed: {
     totalPrice() {
       return this.items.reduce((total, item) => total + item.price * item.quantity, 0);
     }
   }

3. 性能优化： 计算属性是基于它们的响应式依赖进行缓存的。只有在相关依赖发生改变时，计算属性才会重新计算。这意味着如果依赖数据没有改变，访问计算属性会立即返回之前的计算结果，从而避免了不必要的计算，提高了应用的性能。

例如，如果你有一个商品列表和一个过滤文本框，用户输入过滤词来筛选商品时，只有在用户输入变化时，过滤后的商品列表才会重新计算：

javascript
data() {
  return {
    searchQuery: '',
    products: [...]
  };
},
computed: {
  filteredProducts() {
    return this.products.filter(product => product.name.includes(this.searchQuery));
  }
}

总结来说，计算属性在Vue.js中是处理数据和逻辑、提升性能的有效工具，使得数据管理更加高效和简洁。