vue性能优化核心是“按需渲染”和“减少无效计算”，具体包括：1.用v-once处理完全静态内容，v-memo基于依赖数组缓存半静态结构；2.动态组件+keep-alive复用实例并配合activated钩子按需加载；3.长列表用虚拟滚动替代v-for；4.极端动态场景使用渲染函数h构造vnode。
Vue.js 的渲染机制在高交互、高动态页面中容易暴露性能瓶颈，比如频繁更新导致的重绘开销、大量 DOM 节点引发的卡顿、组件反复创建销毁带来的资源浪费。优化核心在于“按需渲染”和“减少无效计算”，而不是盲目堆砌功能。
用好 v-once 和 v-memo 控制静态与半静态内容
v-once 适用于完全不变化的内容，比如版权信息、固定说明文案，它让 Vue 跳过响应式追踪和后续 diff；v-memo（Vue 3.2+）更进一步，支持基于依赖数组的条件性缓存，适合“多数不变、局部微调”的场景。
- 对用户头像旁的固定标签（如“VIP会员”），用
v-once避免每次 profile 更新都触发重渲染 - 列表项中仅 avatar 和 name 变动，其余字段稳定时，可用
v-memo="[item.id, item.avatar]"缓存整个<li>结构 - 注意：v-memo 的依赖数组必须精确——漏掉一个依赖，就会显示陈旧数据
动态组件 + keep-alive 管理高频切换视图
导航栏切换、Tab 页签、弹窗类型变更等场景，本质是“同一容器内替换内容”。直接用 <component :is="..."></component> 配合 <keep-alive></keep-alive>，能复用组件实例、保留状态、跳过 mounted/destroyed 生命周期开销。
- 设置
include或exclude白名单，避免缓存无状态或体积过大的组件 - 配合
activated/deactivated钩子，在组件被激活时拉取增量数据，而非每次created都全量请求 - 若需强制刷新某缓存组件（如用户手动点击“刷新当前页”），可通过
key变更触发重新初始化
虚拟滚动替代 v-for 渲染长列表
当列表项超过 100 条，尤其含图片、复杂表单或动画时，v-for 会一次性创建全部 DOM 节点，内存飙升、滚动卡顿。虚拟滚动只渲染可视区域内的元素（通常 10–30 个），其余用空白占位并靠 transform 定位。
- 优先使用成熟方案如
@vueuse/core中的useVirtualList，比手写更健壮 - 确保每项有稳定
:key（推荐 ID，禁用 index），否则 diff 错乱 - 滚动容器需设固定高度或 max-height，并启用
overflow-y: auto，否则无法触发 scroll 事件
渲染函数（h）应对极端动态结构
模板语法在处理“标签类型、属性组合、插槽分发逻辑”高度不确定时会变得冗长甚至不可维护。渲染函数用 JS 直接构造 vnode，逻辑清晰、运行时开销可控，特别适合配置化表单、可视化编辑器、多端适配组件等场景。
- 用
h(tagName, props, children)替代嵌套 v-if/v-for 拼接，减少模板编译复杂度 - 通过
this.$slots和this.$scopedSlots动态透传插槽，避免在模板层做过多判断 - 注意：渲染函数不支持热重载（HMR），开发阶段建议搭配 TypeScript + 类型提示保障可维护性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
