在 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: {// getterfullName: {get() {return `${this.firstName} ${this.lastName}`;},// setterset(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，适用于更复杂的属性计算和更新需求。