vue 优化

1、使用 v-if 替代 v-show：v-if 在条件不满足时会完全销毁和重建元素，而 v-show 只是通过 CSS 的 display 属性控制元素的显示和隐藏。如果一个元素在大部分情况下是隐藏的，那么使用 v-if 而不是 v-show 可以减少不必要的 DOM 操作。

---

2、合理使用 computed 和 watch：computed 属性可以缓存计算结果，只有相关的响应式数据发生变化时才会重新计算，而不是每次访问该属性都进行计算。watch 属性用于监听某个数据的变化，并执行相应的操作。合理使用 computed 和 watch 可以减少计算量，避免不必要的更新。

---

3、列表渲染时使用 key：在使用 v-for 渲染列表时，为每个元素提供唯一的 key 值，Vue 根据 key 来跟踪每个节点的身份，以便重用已有的元素，而不是销毁和创建新的元素。这样可以提高列表渲染的性能。

---

4、避免频繁的过度渲染：避免在大量数据变化时频繁触发更新，可以使用 debounce 或 throttle 函数来限制触发更新的频率，以减少不必要的计算和渲染。

---

5、使用异步组件：将页面中的一些复杂组件拆分成异步组件，按需加载，可以降低初始加载时的资源压力，提高页面加载速度。

---

6、合理使用keep-alive：对于那些需要频繁切换显示/隐藏的组件，使用 <keep-alive> 可以将这些组件的状态缓存起来，避免重复渲染和销毁，提高性能。

---

7、避免无限循环的侦听器：确保在 watch 或 computed 属性中不会引起无限循环的侦听器，否则会导致性能问题。

---

8、虚拟滚动：当需要渲染大量数据列表时，可以使用虚拟滚动技术，只渲染可见部分的内容，减少渲染的元素数量，提高渲染性能。

---

9、优化图片加载：对于图片较多的页面，可以使用懒加载技术，延迟加载图片，减少初始加载时间和带宽消耗。

---

10、使用生产环境构建：在部署应用时，使用 Vue 的生产环境构建，可以去除开发环境的调试工具和代码，减少文件大小和网络传输时间。