在 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 中非常有用的特性，它使你能够将复杂的计算逻辑封装为简洁的属性，并且能够实时响应数据的变化。通过使用计算属性，你可以使模板更加简洁和可读，并且能够自动处理数据的更新和依赖管理。