Vue 性能分析
在Vue中，单个页面的优化可以从以下几个方面入手
- 大数据量代理操作频繁
- 代理对象多
- 数据操作频繁
- 代码优化
- 静态资源优化
- DOM 层级尽量减少
大数据量
在项目名中大数据量是必不可少的，例如我要获取一个 tree 树，这个数据的数据有成千上万条。
优化方面：
- 使用 Object.freeze 冻结对象，降低数据变化导致重新渲染。
- 大数据量展示使用静态组件来渲染，避免过多操作导致多次渲染。
- 遍历修改数据时，尽量使用一个 meta 数据来赋值。
- v-for 渲染时间过长，使用按需加载。
代理对象多
项目中过的的 ref、computed、watch 或者 data 中的数据过多可以优化
优化方面：
- 不频繁操作的数据尽量不使用代理。
- 使用 store 存储数据。
- 减少响应式数据(ref、computed、watch)。
- 避免响应式数据多，例如ref 数组对象中有成千上万条数据。
- 懒加载数据，在必要时才创建响应式对象。
- 浅层代理对象
最后我推荐的使用的数据声明方式：非响应式数据 > computed > 浅层代理 > 代理
数据操作频繁
在平常后台管理中，操作数据是必不可少的，在这个过程中可以分为算法优化、批量操作
优化方面：
- 对比更新，对比数据是否变化，对比视图变化(key)。
- 防抖，减少用户多次操作(尤其式在网络不好的情况下)。
- 图表大数据量更新使用 ApexCharts。
- Web Workers 创建线程处理数据，避免阻塞。
- 使用缓存存储频繁操作的数据。
- symbol 生成唯一标识，减少对比数据。
- 使用Set、Map、WeakMap、WeakSet 数据访问更快。
- 异步操作。
- 尽量使用for、while循环，性能比数组的方法好个8倍左右(不太推荐)。
代码优化
单个Vue文件代码成千上万行，不便于阅读以及筛查报错等情况。
优化方面：
- 组件式编程，抽离组件，对比公共组件来实现可插拔式编程。
- 函数式组件，直接输出结果，可对于大量文本优化。
- Mixin 混入数据，将数据封装在特定文件中，即拿即用。
静态资源优化
图片方面：在这个方面，对于有UI的公司来说，前端只需要动嘴就行了，例如雪碧图、webp图片、字体图标、图片懒加载。
样式文件：
- 使用代码压缩。
- 使用预处理器减少代码量。
- 使用内联样式，减少Css解析时间。
- 使用简写语法简写代码。
- 预加载样式rel="preload"，提高页面加载速度。
DOM层级
可参考我另一篇文章：首屏哪些地方可以优化呢？Vue首屏优化，白屏是什么，怎么优化首页白屏，页面加载时间过长，打包分析，gzip 使用，sus - 掘金 (juejin.cn)
