computed 是 Vue Options API 中具备缓存能力的计算属性，依赖响应式数据变化才重新计算；可定义只读（getter）或可写（getter/setter）形式，与 methods 的主要区别在于缓存机制。
在 Vue Options API 中，computed 是一个专门用于定义计算属性的对象，它天然具备缓存能力——只要依赖的响应式数据没变，多次访问就不会重复执行函数，直接返回上次结果。
基础写法：声明只读计算属性
在组件选项中定义 computed 对象，每个属性名对应一个 getter 函数，函数体内可访问 this 上的响应式数据（如 data、props 或其他 computed）：
- 函数必须有返回值，该值就是计算属性的结果
- 函数内部使用的响应式字段会自动被追踪为依赖
- 首次访问时执行并缓存；后续访问若依赖未变，跳过执行，直接返回缓存值
示例：
export default {
data() {
return {
price: 129.99,
discount: 0.85,
items: [{ name: '苹果', qty: 3 }, { name: '香蕉', qty: 2 }]
}
},
computed: {
// 价格打八五折
finalPrice() {
console.log('计算 finalPrice') // 只在 price 或 discount 改变时触发
return Math.round(this.price * this.discount * 100) / 100
},
// 统计商品总数量
totalQty() {
console.log('计算 totalQty')
return this.items.reduce((sum, item) => sum + item.qty, 0)
}
}
}依赖变化才重新计算，这是缓存生效的前提
Vue 会静态分析 getter 函数体，提取所有通过 this.xxx 访问的响应式字段作为依赖。只有这些字段发生变更，对应计算属性才会标记为“脏”（dirty），下次读取时才重新执行。
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 如果函数里用了非响应式变量（比如普通 const、外部函数参数），Vue 无法追踪，缓存可能失效或不更新
- 避免在 getter 中调用
Math.random()、Date.now()等非响应式副作用，否则逻辑不可预测 - 不要在模板中传参调用计算属性（它不是函数），例如
{{ fullName('Mr.') }}是错误写法
需要双向绑定？用对象形式定义可写计算属性
当希望用户输入能反向影响底层数据时，可为计算属性提供 get 和 set 方法：
-
get()返回当前值（与只读写法一致） -
set(newValue)接收修改后的值，并负责拆解、赋值到底层响应式数据 - 常用于表单联动，比如一个输入框控制姓和名两个字段
示例：
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(value) {
const parts = value.trim().split(' ')
this.firstName = parts[0] || ''
this.lastName = parts[1] || ''
}
}
}和 methods 的关键区别就在这里
如果你把上面的 finalPrice 写成方法：
methods: {
finalPrice() {
return Math.round(this.price * this.discount * 100) / 100
}
}那么每次模板渲染或 JS 中调用它，都会重新执行——哪怕 price 和 discount 一点没动。而 computed 不会。
所以适合做派生状态：过滤列表、格式化日期、拼接字符串、条件判断等不带外部输入的纯计算场景。
