Vue 项目优化
内容提要
Vue项目优化技巧：拆分组件以利用组件级更新粒度，避免弹窗等局部更新触发父组件重渲染；慎用重型组件，必要时自造轻量组件；用v-if加快首屏、v-show缓存切换；分片渲染提升滚动流畅度；缓存Ajax数据；用Object.freeze冻结只读数据；v-for必须添加唯一key以加速diff。
延伸解读
组件拆分：性能优化的关键手段
文章指出，拆分组件不仅是代码抽象的需要，更是提升性能的有效方式。Vue 的更新以组件为单位，子组件更新不会触发父组件重渲染。将弹窗等局部更新频繁的模块拆分为独立组件，可以避免整个父组件重新渲染，从而解决大数据量下的卡顿问题。同时，父组件更新时也不会影响无数据变化的子组件，实现双向优化。
重型组件的取舍与自造轻量组件
开源组件库虽然功能全面，但往往包含大量冗余逻辑，在循环渲染数十上百个组件时可能造成性能瓶颈和内存占用。文章建议在遇到此类场景时，考虑自行实现最简化的组件，仅满足业务的最小需求。作者以自己编写的表格组件和校验插件为例，说明自造轮子能有效减少不必要的开销。
v-if 与 v-show 的适用场景
文章强调，v-if 适合需要加快首屏速度的场景，结合异步组件和 webpack 代码拆分，可以延迟加载非关键代码。而 v-show 则适用于需要频繁切换显示状态的元素，因为它会缓存组件，避免重复渲染，从而提升切换流畅度。两者应根据实际需求权衡使用。
数据缓存与冻结的优化细节
对于不常变动的 Ajax 数据，文章建议封装缓存机制，利用 sessionStorage 存储响应结果，减少重复请求。同时，针对只读数据（如表格），使用 Object.freeze 可以阻止 Vue 的响应式转换，节省递归遍历的时间。此外，v-for 循环必须添加唯一 key，以加速 diff 算法，但避免使用 index 作为 key。
Q&A
Vue 项目中如何通过拆分组件来优化性能？
拆分组件可以利用 Vue 的组件级更新粒度：子组件更新不会触发父组件更新，除非子组件改变了父组件的数据。例如，将弹窗抽成独立组件后，弹窗内部的输入和开关不会触发父组件重渲染，从而避免大表格页面卡顿。
为什么在 Vue 中要慎用重型组件？
重型组件（如 Element UI 的表格）包含大量冗余逻辑，在 v-for 循环几十上百个时会造成明显的效率影响和内存占用。建议根据最小需求自造轻量组件，例如自己实现表格组件或校验插件。
v-if 和 v-show 在 Vue 性能优化中如何选择？
v-if 适合加快首屏速度，并可结合异步组件延迟加载；v-show 适合需要频繁切换显示的场景，因为它能缓存组件，提升 toggle 流畅度。
Vue 中如何缓存 Ajax 数据？
可以封装一个带缓存的 ajax 对象，在发起请求前检查 sessionStorage 中是否已有对应 URL 和参数的缓存数据，有则直接返回 Promise.resolve，否则发起请求并在响应拦截器中将数据存入 sessionStorage。
Object.freeze 在 Vue 中有什么优化作用？
Object.freeze 可以冻结只读数据，阻止 Vue 将其转换为响应式数据，从而节省递归遍历添加响应式的时间。对于大量且深层级的对象，优化效果可观。
Vue 的 v-for 中 key 的作用是什么？
key 用于加速 diff 算法。必须为每个循环项添加唯一 key，不要使用单纯的 index 作为 key；如果循环的是 template，每个子元素都需要不同的 key。
