计算属性通过缓存依赖响应式数据的执行结果避免重复计算，提升性能；它自动追踪依赖、声明式同步、不可含副作用，比methods和watch更高效简洁，但需警惕非响应式访问导致的缓存失效。
计算属性（computed）是 Vue 中提升组件性能的关键机制之一，它通过缓存依赖响应式数据的执行结果，避免重复计算，从而减少不必要的渲染开销和逻辑执行。
自动缓存，避免重复执行
计算属性基于其依赖的响应式数据（如 data、props）建立响应式追踪。只要依赖未变化，多次访问该计算属性会直接返回缓存值，不会重新执行函数体。
- 对比 methods：每次模板调用都会执行一次，即使参数和状态没变
- 适合场景：格式化文本（如全名拼接）、过滤列表（如搜索关键词匹配）、派生状态（如购物车总价）
- 注意：不能在计算属性中执行副作用（如发起请求、修改 data），它应保持纯函数特性
比 watch 更轻量的响应式联动
当需要根据某些响应式值派生另一个值并用于模板时，computed 比 watch 更简洁高效：
- watch 需要显式定义监听目标、回调函数、可能还要手动维护中间状态
- computed 天然同步、声明式、可直接在模板中使用，且自动追踪依赖
- 例如：
computed: { isActive() { return this.status === 'active' && this.permission } }，比用 watch 手动更新isActive字段更安全、更不易出错
配合 v-memo 或 shouldUpdate 做细粒度优化（Vue 3.4+）
在复杂列表或嵌套组件中，计算属性可与 Vue 3.4 引入的 v-memo 协同工作：
- 将列表项的渲染逻辑封装进计算属性，确保仅当真正相关的字段变化时才触发重计算
- 再用
v-memo缓存整个子树，避免虚拟 DOM diff 过程中的冗余比对 - 例如：对用户列表做「按部门分组 + 排序」处理后传给子组件，把分组逻辑放在 computed 中，能保证只在
users或sortKey变化时才重新生成分组结构
警惕过度使用和缓存失效陷阱
计算属性虽好，但误用反而影响性能或导致行为异常：
- 避免在 computed 中访问非响应式对象（如 Date.now()、Math.random()、外部变量），会导致缓存失效或结果不可预测
- 不要在 computed 中调用异步操作或依赖未被 Vue 追踪的状态（如闭包变量、this.$refs）
- 大型数组/对象的深度依赖可能导致响应式系统负担加重；必要时可用
shallowRef+ 手动触发更新替代
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
