Vue3 的 computed 创建响应式计算属性，依赖响应式数据自动缓存并按需求值；只读形式传入箭头函数，返回 ComputedRef 需加 .value 读取；可读写形式通过 get/set 对象支持双向绑定，set 中更新源数据而非 computed 本身。
Vue3 中用 computed 创建组合式计算属性，核心是“依赖响应式数据、自动缓存、按需求值”。它不是手动调用的函数，而是一个响应式引用（Ref），其值会随依赖变化自动更新，且不重复计算。
只读计算属性：最常用写法
适用于派生数据、格式化、过滤等场景，无需修改，只需读取结果。
- 用
ref或reactive定义原始响应式数据 - 传入一个箭头函数给
computed()，函数体内访问响应式数据的.value（ref）或属性（reactive） - 返回的是一个
ComputedRef，使用时必须加.value
示例：
import { ref, computed } from 'vue'
<p>const price = ref(99)
const count = ref(3)</p><p>// 总价是 price × count，依赖二者
const totalPrice = computed(() => price.value * count.value)</p><p>console.log(totalPrice.value) // 297
count.value = 5
console.log(totalPrice.value) // 495（自动更新）
可读可写计算属性：支持双向绑定
当需要通过修改计算属性来反向影响原始数据时（比如 v-model 绑定输入框），用对象形式传入 get 和 set。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
get：和只读写法一致，返回派生值 -
set：接收新值，负责拆解并更新底层响应式数据 - 注意：
set中不能直接改computed的值，只能改它依赖的源数据
示例：
const firstName = ref('张')
const lastName = ref('三')
<p>const fullName = computed({
get() {
return <code>${firstName.value} ${lastName.value}</code>
},
set(newVal) {
const [first, last] = newVal.split(' ')
firstName.value = first || ''
lastName.value = last || ''
}
})</p><p>// 模板中可直接 v-model="fullName"
// 修改 fullName 会触发 set，同步更新 firstName 和 lastName
关键细节：为什么它能自动响应和缓存？
computed 不是普通函数，背后由 Vue 响应式系统驱动：
- 首次访问
.value时，内部执行 getter，并自动追踪其中读取的所有响应式依赖（如price.value） - 依赖未变时，后续访问直接返回缓存值，不会重跑函数
- 任一依赖变更，标记该计算属性为“脏”，下次读取时才重新执行 getter
- 这个过程是惰性 + 懒求值的，没用到就不会算，性能友好
避坑提醒：常见错误写法
这些写法会让 computed 失效或报错：
- 在 getter 中修改响应式数据（副作用）——应移至
watch或事件处理中 - 依赖非响应式变量（如普通 const、函数参数）——不会触发更新
- 试图直接赋值：
totalPrice.value = 100—— 只读 computed 会静默失败或警告 - 在模板中多次调用方法替代 computed —— 每次渲染都重算，浪费性能
