在 Vue 3 的 Composition API 中，computed 是最常用且最强大的响应式工具之一。它不仅能简化模板逻辑，还能通过缓存机制极大地优化应用性能。
一、 什么是计算属性？
计算属性（Computed Properties）本质上是一个响应式的派生值。它可以基于一个或多个响应式引用（ref 或 reactive）进行计算，并返回一个新的只读或可读写的响应式对象。
核心特性：
- 声明式逻辑：将复杂的逻辑从模板（Template）中抽离。
- 响应式依赖追踪：Vue 会自动追踪计算属性用到了哪些响应式数据。
- 缓存（Caching）：这是它与普通函数最大的区别。计算属性会基于它们的响应式依赖进行缓存。只有在相关依赖发生改变时它们才会重新求值。
二、 基础用法：只读计算属性
在 <script setup> 中，我们从 vue 包中导入 computed 函数。最常见的用法是传入一个 getter 函数。
<script setup>
import { ref, computed } from 'vue'const count = ref(0)
const price = ref(100)// 创建一个计算属性：总价
// 只有当 count 或 price 改变时，totalPrice 才会重新计算
const totalPrice = computed(() => {console.log('计算中...') // 测试缓存：多次访问模板，此行只打印一次return count.value * price.value
})const increment = () => count.value++
</script><template><div><p>单价: {{ price }} | 数量: {{ count }}</p><p>总价 (计算属性): {{ totalPrice }}</p><button @click="increment">增加数量</button></div>
</template>
三、 进阶用法：可写计算属性 (Getter & Setter)
虽然计算属性默认是只读的，但在某些场景（如：双向绑定 V-Model）下，你可能需要修改它。这时可以传入一个带有 get 和 set 函数的对象。
import { ref, computed } from 'vue'const firstName = ref('John')
const lastName = ref('Doe')const fullName = computed({// getterget() {return `${firstName.value} ${lastName.value}`},// setterset(newValue) {// 注意：newValue 是你尝试赋给 fullName 的新值const names = newValue.split(' ')firstName.value = names[0]lastName.value = names[names.length - 1]}
})// 使用示例：
// fullName.value = 'Steve Rogers'
// 此时会触发 set，进而自动更新 firstName 和 lastName
四、 计算属性 vs 监听器 vs 函数
这是面试和博客中经常讨论的话题。
| 特性 | 计算属性 (Computed) | 监听器 (Watch) | 普通函数 (Methods) |
|---|---|---|---|
| 目的 | 派生出新状态（1变N/N变1） | 执行副作用（如 API 请求、DOM 操作） | 响应事件或处理临时逻辑 |
| 缓存 | 有 | 无 | 无 |
| 返回值 | 必须有返回值 | 通常没有返回值 | 视情况而定 |
| 懒执行 | 依赖不变不执行 | 默认立即执行或改变时执行 | 每次调用都执行 |
五、 最佳实践与注意事项
在撰写博客时，强调以下几点会显得你更专业：
1. 避免副作用
计算属性的 getter 应该只做纯计算。不要在计算属性中修改 DOM、发起异步请求或修改其他的响应式状态。如果有这些需求，请使用 watch。
2. 不要直接修改计算属性的返回值
除非你定义了 set，否则计算属性应该是“只读”的快照。应该修改它依赖的源数据来触发更新。
3. 性能优化
如果一个复杂的计算逻辑在页面中被多次引用，请务必使用计算属性而不是函数。缓存机制能避免重复的 CPU 消耗。
六、 实战案例：列表搜索过滤
这是一个非常适合放在博客里的 Demo，展示了 computed 如何简化逻辑：
<script setup>
import { ref, computed } from 'vue'const searchText = ref('')
const users = ref([{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }
])// 过滤后的列表：自动随输入内容变化
const filteredUsers = computed(() => {return users.value.filter(user => user.name.toLowerCase().includes(searchText.value.toLowerCase()))
})
</script><template><input v-model="searchText" placeholder="搜索用户..." /><ul><li v-for="user in filteredUsers" :key="user.id">{{ user.name }}</li></ul>
</template>