computed 是 Vue 3 中基于响应式数据自动追踪依赖、惰性求值且缓存结果的只读或可写引用对象；基础写法传入 getter 函数返回 Ref 类型，进阶支持 get/set 实现双向绑定，禁用副作用，区别于每次调用都执行的 methods。
Vue 3 中用 computed 定义计算属性，核心是基于响应式数据（ref 或 reactive）自动追踪依赖、惰性求值、结果缓存。它不是普通函数，而是一个具备响应式行为的只读（或可写）引用对象。
基础写法：只读计算属性
适用于从已有响应式数据派生新值，且无需修改的场景：
- 导入
computed和响应式工具（如ref） - 传入一个纯 getter 函数，内部访问响应式变量（如
count.value） - 返回值是
Ref类型，需通过.value访问（在模板中可省略）
示例：
import { ref, computed } from 'vue'const count = ref(5)
const double = computed(() => count.value * 2)
// double 是 Ref<number>，double.value === 10
进阶写法：可写的计算属性
当需要支持双向绑定（比如表单联动）时，用对象形式定义 get 和 set：
立即学习“前端免费学习笔记（深入）”；
-
get返回当前计算值 -
set接收新值，并反向更新其依赖的原始数据 - 必须保证 set 逻辑是可逆的，否则会破坏响应式一致性
示例：
const firstName = ref('John')const lastName = ref('Doe')
const fullName = computed({
get() { return `${firstName.value} ${lastName.value}` },
set(newValue) {
const parts = newValue.split(' ')
firstName.value = parts[0] || ''
lastName.value = parts[1] || ''
}
})
关键注意事项
避免踩坑，才能发挥 computed 的优势：
- 不要在 getter 中执行异步操作（如
await）、发送请求、修改 DOM 或触发事件——这属于副作用，应交给watch或watchEffect - 计算逻辑尽量轻量；若涉及大量数组过滤、深度遍历等开销操作，需评估是否真需实时响应，或考虑防抖/节流 + 缓存策略
- 依赖必须是响应式数据；直接访问普通 JS 变量（如
const x = 1）不会触发更新 - 在
setup中定义的 computed 可直接在模板中使用，无需额外解构或暴露
和 methods 的本质区别
二者表面相似，但行为完全不同：
-
methods每次渲染或调用都重新执行，无缓存 -
computed仅在依赖变化后首次访问时重新计算，其余访问直接取缓存值 - 模板中多次使用同一个 computed（如
{{ price }} {{ price }} {{ price }}），底层只计算一次 - 而同样写法用 method，会执行三次函数调用
