在 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>
解释
data: 定义了price（原始价格）和discount（折扣率）。computed: 定义了计算属性discountedPrice，它会根据price和discount来计算折扣后的价格。{{ discountedPrice }}: 在模板中直接使用discountedPrice，它会自动计算并返回最新的折扣价格。
计算属性的特点
- 缓存：计算属性会基于它们的依赖进行缓存，只有在相关数据（如
price或discount）发生变化时，计算属性才会重新计算。 - 访问性：你可以像普通属性一样在模板中直接使用计算属性。
- 无需手动调用：计算属性会自动更新，无需手动调用。
使用计算属性作为 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>
解释
- getter: 返回由
firstName和lastName组成的全名。 - setter: 当你修改
fullName时，setter会被触发，并将新值拆分成firstName和lastName。
总结
- 计算属性用于根据已有的数据动态计算结果，且只有依赖的数据发生变化时才会重新计算。
- 它们与方法不同，计算属性是缓存的，提升了性能。
- 可以用作 getter 和 setter，适用于更复杂的属性计算和更新需求。
