Vue计算属性核心特点是基于响应式依赖自动缓存、惰性求值、不重复执行，专为派生状态设计；首次访问执行getter并缓存结果，后续依赖未变时直接返回缓存值，依赖变更才重新计算。
Vue 中的计算属性通过 computed 函数创建，核心特点是基于响应式依赖自动缓存、惰性求值、不重复执行。它不是普通方法，也不是 watch，而是专门为派生状态设计的响应式封装。
在 setup() 中使用 computed 创建计算属性
组合式 API 下，computed 是一个函数，接收一个 getter 函数或一个包含 get 和可选 set 的对象，返回一个只读（或可写）的响应式引用：
- 基础用法：传入一个 getter 函数，返回只读的 ref
- 带 setter：传入对象，支持双向绑定场景（如表单联动）
- getter 中只能访问响应式数据（ref、reactive），否则无法建立依赖追踪
示例：
import { defineComponent, reactive, computed } from 'vue'
export default defineComponent({
setup() {
const state = reactive({
firstName: 'John',
lastName: 'Doe'
})
// 只读计算属性
const fullName = computed(() => {
return state.firstName + ' ' + state.lastName
})
// 可写计算属性（带 setter）
const shortName = computed({
get() {
return state.firstName.slice(0, 2)
},
set(val) {
state.firstName = val + state.firstName.slice(2)
}
})
return { fullName, shortName }
}
})
computed 的缓存机制怎么生效
computed 的缓存不是手动控制的，而是 Vue 内部自动完成的：
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 首次访问时执行 getter，结果被缓存
- 后续访问直接返回缓存值，直到其依赖的响应式数据发生变更
- 依赖追踪发生在 getter 执行过程中——只要读取了某个 ref 或 reactive 属性，就建立关联
- 如果 getter 中有副作用（如 console.log、API 调用），它们不会被缓存，但执行频率会受缓存影响（仅依赖变化时才重算）
⚠️ 注意：若在 getter 中调用非响应式变量（如普通 const 或 Math.random()），computed 不会响应其变化，也无法缓存预期行为。
computed vs methods vs watch 的关键区别
避免误用，需明确三者定位：
- computed：用于声明“我是一个派生值”，强调缓存和响应式依赖；适合模板中多次使用、逻辑较重的值
- methods：每次渲染/调用都执行，无缓存；适合需要显式触发的操作（如事件处理）
- watch：监听变化并执行副作用（如发请求、更新 DOM、修改其他状态），不返回值；适合“当 X 变了，我要做 Y”
例如：过滤长列表时，用 computed 返回过滤后数组；但“搜索关键词变化后加载新数据”，应该用 watch。
常见陷阱与建议
实际开发中容易踩坑的地方：
- 在 computed getter 中解构响应式对象（如
const { count } = state）→ 会丢失响应性，应保持访问路径为state.count - 异步操作不能直接放在 getter 中（computed 必须同步返回值），如需异步派生，请用
watch+ref或封装成自定义 Hook - 不要在 template 中对 computed 属性再调用函数（如
{{ myComputed().toFixed(2) }}），这会破坏缓存；应在 computed 内部完成格式化 - 调试时可用
console.log配合依赖变化观察，但上线前建议移除，避免干扰缓存判断
