vue 性能优化

data 层级不要太深

data 层级太深会增加响应式监听的计算，导致页面初次渲染时卡顿。

合理使用 v-show 和 v-if

• 频繁切换时，使用 v-show
• 无需频繁切换时，使用 v-if

合理使用 computed

computed 有缓存，data 不变时不会重新计算，可以避免不必要的计算，从而提升性能

v-for 中加 key

diff 算法中会将 tag 和 key 相同的标签视为同一节点，从而避免不必要的渲染。
若无 key ，则 v-for 中的所有节点，都会删除后重新渲染，非常耗费性能！

避免 v-for 和 v-if 同时使用

v-for 的优先级高于 v-if ，同时使用时，会导致每次遍历时，都触发一次 v-if 判断，造成大量不必要的渲染。

及时销毁自定义事件、DOM 事件、定时器

避免内存泄露

合理使用异步组件

针对体积较大的组件，如编辑器、复杂表格，复杂表单等，通过异步组件的拆包，让主包减小，首页加载更快

  components: {
    // 异步加载子组件（如 v-if 的值为true 时，才开始加载此组件，减少了页面初次渲染的时间），特别适用于耗时的复杂大型组件，如富文本编辑器等。
    Child: () => import("./child.vue"),
  },

路由懒加载

项目比较大，拆分路由，保证首页先加载

{path: '/dic',name: '速查手册', component: () => import('./dic/index')},

合理使用缓存组件 keep-alive

需要缓存组件时使用，如多个静态 tab 页的切换，可以避免不必要的渲染，提升 vue 性能。（别滥用，缓存太多会占用内存，也不好调试）

详见博文 https://blog.csdn.net/weixin_41192489/article/details/112875654

webpack 层面的优化

使用 production，打包时自动删掉调试代码

使用服务端渲染 SSR

前端通用的性能优化，如图片懒加载

详见 https://blog.csdn.net/weixin_41192489/article/details/136497854

使用 vue-loader 在开发环境做模板编译(预编译)