Vue性能优化核心是减少更新、降低响应式开销、控制渲染粒度：精简响应式数据结构，按需渲染与智能缓存，优化事件与更新节奏，拆分隔离高成本模块。
处理 Vue 项目中复杂交互的性能问题，核心是“减少不必要的更新、降低响应式开销、控制渲染粒度”。不是所有卡顿都来自逻辑错误，更多源于对响应式机制和渲染流程的误用。
精简响应式数据结构
Vue3 的 Proxy 响应式虽快，但对大对象或深层嵌套仍会显著拖慢初始化和更新。关键原则是：只让真正需要响应式的数据进入 reactive/ref。
- 基本类型（number/string/boolean）统一用 ref，不用 reactive 包裹单值
- 万级列表原始数据、静态配置 JSON、第三方库实例（如 ECharts 实例、地图对象），用 markRaw 显式跳过响应式代理
- 非嵌套的大数组或对象，优先使用 shallowRef 或 shallowReactive，避免递归劫持
- 用 Object.freeze 冻结完全不变的 UI 配置（如状态标签映射、颜色方案）
按需渲染与智能缓存
用户看到的永远只是局部内容，没必要一次性渲染全部。重点不是“怎么快”，而是“不渲染什么”。
- 列表项超过 200 行时，必须启用 虚拟滚动（如 vue-virtual-scroller 或 Element Plus 的 virtual-scroll 属性）
- 用 v-memo 缓存稳定子树，例如：
<user-card v-memo="[user.id, theme]">...，仅当 id 或 theme 变化才重绘 - 静态文案、图标、说明文字加 v-once，彻底脱离响应式系统
- 频繁切换但内容不变的视图（如 Tab 页、表单步骤），用 <KeepAlive> 缓存实例，避免反复挂载/卸载
优化事件与更新节奏
交互反馈卡顿，常因高频触发导致 DOM 批量重排或计算属性反复执行。要主动节流、延迟、合并。
立即学习“前端免费学习笔记（深入）”；
- 搜索框输入、鼠标移动等高频事件，用 debounce（防抖）或 throttle（节流）包装 handler
- 避免在模板中写内联函数（如
@click="() => doSomething(id)"），每次渲染都会新建函数，破坏 diff 复用 - 复杂计算逻辑移入 computed，利用其缓存；异步加载状态用 watchEffect 自动追踪依赖并清理副作用
- 拖拽排序类操作，配合 Vue.Draggable 时开启
ghost-class和drag-class，禁用过渡动画，提升拖拽帧率
拆分与隔离高成本模块
把重交互区域从主组件中解耦，既利于复用，也便于单独优化生命周期和资源释放。
- 将树形组件、富文本编辑器、图表容器等重型模块封装为独立子组件，并用 defineAsyncComponent 异步加载
- 路由级页面（如用户管理、日志查询）全部启用 路由懒加载：
const UserList = () => import('@/views/user/List.vue') - 权限校验、数据预加载等前置逻辑，放在 beforeRouteEnter 或 setup 中的 onBeforeMount，避免挂载后才拉取
- 大量表单字段场景下，关闭 v-model 的双向绑定，改用 input 事件 + 手动赋值，减少响应式依赖收集压力
