🧮Vue 中的计算属性 computed：即聪明又节省性能的"智能变量"
在开发 Vue 应用时，我们经常会遇到这样的需求：
- 根据多个状态变量组合出一个新的值；
- 页面显示的内容是"派生"自已有的数据；
- 想避免重复逻辑和无意义的重复计算。
这时，Vue 提供的 computed（计算属性）就能帮上大忙了！
🧠 什么是计算属性？
计算属性（computed）是 基于其它响应式状态自动计算出来的值 。它本质上是一个带有缓存的 getter 函数，只有依赖的数据发生变化时才会重新执行计算逻辑。
可以把它想象成一个 聪明的公式变量，自动根据输入算出结果，但不会没事就重算，性能也很棒！
✅ 基本用法与示例
我们来实现一个显示用户"全名"的例子：
js
import { ref, computed } from 'vue'
// 定义两个响应式变量，分别代表姓和名
const firstName = ref('Tom')
const lastName = ref('Hanks')
// 创建一个计算属性 fullName，动态拼接姓和名
const fullName = computed(() => {
return `${firstName.value} ${lastName.value}`
})🔍 解释一下每一步：
- firstName 和 lastName 是通过 ref() 创建的响应式变量；
- computed() 接收一个函数，这个函数的返回值将被 Vue 当作"计算属性"的值；
- 在函数中访问的所有响应式变量（这里是 firstName.value 和 lastName.value）会被 Vue 自动追踪；
- 当它们发生变化时，fullName 也会自动更新。
🖼️ 在模板中使用 computed（无需 .value）
js
<template>
<p>Full name: {{ fullName }}</p>
</template>在模板里你不需要写 fullName.value，Vue 会帮你自动解包。写起来就像普通变量一样简洁。
这就是 Vue 的模板自动解包机制，为开发者省去了不少麻烦。
⚡computed 的缓存机制（性能优势）
Vue 会缓存计算结果，只有依赖的值发生变化时才重新计算。
举个例子：
js
const double = computed(() => {
console.log('执行了计算逻辑')
return count.value * 2
})每次访问 double.value，如果 count.value 没变，console.log 不会执行。也就是说：多次使用，不会重复运算。
这在以下场景中特别有用：
- 复杂的逻辑运算；
- 大量 DOM 更新时的性能优化；
- 防止重复执行耗时操作。
✅ computed vs 普通函数
你可能会想：我直接用一个方法 function 不也能返回拼接值吗？
js
function getFullName() {
return `${firstName.value} ${lastName.value}`
}虽然结果一样，但这个函数 每次调用都会重新执行，没有缓存优化。而 computed 会在依赖不变时返回之前的结果，性能更优。
✅ computed vs watch？
| 特性 | computed | watch |
|---|---|---|
| 类型 | 变量（getter） | 监听器（副作用） |
| 是否缓存 | ✅ 是 | ❌ 否，每次变化都执行 |
| 使用场景 | 派生状态、显示数据 | 触发请求、写入 localStorage 等副作用 |
| 写法 | computed(() => {...}) | watch(source, callback) |
📦 常见使用场景
-
拼接字符串或数值
如全名、带单位的价格、拼接地址等；
-
过滤/排序列表
根据关键词筛选 todo 列表，根据价格排序商品等；
-
格式化数据展示
比如金额千分位、时间戳格式化等；
-
结合 UI 状态
判断按钮是否可用、是否高亮等逻辑处理；
🚫 computed 的使用误区
❌ 把异步请求写在 computed 里
计算属性是同步的，不能放异步逻辑，否则结果永远是 undefined。
js
// 🚫 错误写法
const userInfo = computed(async () => {
const res = await fetch(...)
return res.data
})✅ 正确方式应该是用 watch() 或 onMounted() 发请求。
❤️ 总结一句话
计算属性是 Vue 给你的一个性能高、逻辑清晰、使用方便的"智能变量"。只要你能通过已有状态推导出一个新值，就应该优先用 computed！
🙌 如果你觉得这篇内容对你有帮助...
非常感谢你读到这里！如果你觉得这篇文章清晰易懂，帮助你更好地理解了 Vue 的 computed 计算属性：
👉 点赞 是对我最大的鼓励！
👉 收藏 方便你以后回顾~
👉 评论交流 我会一一回复你的问题！
👉 转发分享 给更多在学习 Vue 的朋友～