Vue 2 的 computed 天然支持缓存，首次访问计算并缓存，依赖不变时复用结果；需确保依赖响应式，避免新增属性、数组索引赋值等陷阱；应拆分复杂逻辑为多个单一职责的计算属性；禁止在 computed 中发起请求、操作 DOM 或使用非响应式状态；可通过 console.log 验证缓存是否生效。
Vue 2 的 computed 天然支持缓存，只要计算逻辑只依赖响应式数据（如 data、props 中的属性），且不包含异步或副作用，它就会自动缓存结果——首次访问时计算，之后复用，直到依赖项变化才重新执行。
确保依赖是响应式的
只有 Vue 能追踪到的数据变动，才会触发 computed 重算。常见陷阱包括：
- 直接给对象新增属性（如
this.obj.newKey = 'val'）不会被侦测，应使用Vue.set(obj, 'newKey', 'val')或初始化时声明 - 数组索引赋值（
arr[0] = 'x'）或修改length不触发更新，改用splice、push等变异方法 - 从 API 获取的深层嵌套对象，若未在 data 中预先定义，需用
Vue.set或Object.assign({}, ...)初始化结构
把复杂逻辑拆成多个计算属性
单个 computed 过长难维护，也影响可读性和调试。例如处理一个商品列表的筛选+排序+分页：
-
filteredItems：只做条件过滤（依赖items和searchTerm） -
sortedItems：只做排序（依赖filteredItems和sortKey） -
pagedItems：只做切片（依赖sortedItems和currentPage）
这样每一层都保持单一职责，缓存粒度更细，修改某一项时不会连带重算全部逻辑。
避免在 computed 中做“不该做的事”
缓存机制只对纯同步、无副作用的函数有效。以下操作会破坏缓存预期，甚至引发错误：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 发起网络请求（
axios.get()）、操作 DOM、修改data或调用this.$emit - 使用
Date.now()、Math.random()等非响应式外部状态 - 在计算中调用 methods（除非该 method 本身也是纯函数且无副作用）
这类逻辑应移至 watch 或生命周期钩子中。
验证缓存是否生效
加一句 console.log 是最直接的方式：
computed: {
expensiveList() {
console.log('✅ expensiveList 计算中');
return this.rawData.map(x => heavyTransform(x));
}
}
连续渲染或多次访问该属性时，仅首次输出日志，说明缓存已起作用；若每次都有日志，则检查依赖是否真的没变，或是否存在隐式响应式丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
