-
v-if和v-show
v-if
彻底销毁组件v-show
使用dispaly
切换block/none
- 实际工作中大部分情况下使用
v-if
就好,不要过渡优化
-
v-for使用key
key
不要使用index
-
使用computed缓存
-
keep-alive缓存组件
- 频繁切换的组件
tabs
- 不要乱用,缓存会占用更多的内存
- 频繁切换的组件
-
异步组件
- 针对体积较大的组件,如编辑器、复杂表格、复杂表单
- 拆包,需要时异步加载,不需要时不加载
- 减少主包体积,首页会加载更快
- 演示
<!-- index.vue --> <template> <Child></Child> </template> <script> import { defineAsyncComponent } from 'vue' export default { name: 'AsyncComponent', components: { // child体积大 异步加载才有意义 // defineAsyncComponent vue3的写法 Child: defineAsyncComponent(() => import(/* webpackChunkName: "async-child" */ './Child.vue')) } } <!-- child.vue --> <template> <p>async component child</p> </template> <script> export default { name: 'Child', } </script>
-
路由懒加载
- 项目比较大,拆分路由,保证首页先加载
- 演示
const routes = [ { path: '/', name: 'Home', component: Home // 直接加载 }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. // 路由懒加载 component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ]
-
服务端SSR
- 可使用
Nuxt.js
- 按需优化,使用
SSR
成本比较高
- 可使用
-
实际工作中你遇到积累的业务的优化经验也可以说
连环问:你在使用Vue过程中遇到过哪些坑
-
内存泄露
- 全局变量、全局事件、全局定时器没有销毁
- 自定义事件没有销毁
-
Vue2响应式的缺陷(vue3不在有)
data
后续新增属性用Vue.set
data
删除属性用Vue.delete
Vue2
并不支持数组下标的响应式。也就是说Vue2
检测不到通过下标更改数组的值arr[index] = value
-
路由切换时scroll会重新回到顶部
-
这是
SPA
应用的通病,不仅仅是vue
-
如,列表页滚动到第二屏,点击详情页,再返回列表页,此时列表页组件会重新渲染回到了第一页
-
解决方案
- 在列表页缓存翻页过的数据和
scrollTop
的值 - 当再次返回列表页时,渲染列表组件,执行
scrollTo(xx)
- 终极方案:
MPA
(多页面) +App WebView
(可以打开多个页面不会销毁之前的)
- 在列表页缓存翻页过的数据和
-
-
日常遇到问题记录总结,下次面试就能用到
在实际工作中,你可以对 Vue 做以下优化来提升应用的性能和用户体验:
-
懒加载路由:将路由组件按需加载,根据用户的实际需要动态加载组件,减少初始加载时间和资源占用。
-
路由懒加载:使用 Vue 的异步组件技术(如
import()
)对页面组件进行懒加载,仅在需要时才加载对应的组件。 -
使用虚拟列表:对于大型列表,可以使用虚拟滚动(Virtual Scroll)或虚拟列表(Virtual List)技术,只渲染可见区域内的列表项,减少 DOM 节点的数量,提高性能。
-
合理使用计算属性和 watch:避免在模板中频繁使用复杂的计算属性,尽量将计算逻辑提取为计算属性,以减少模板的渲染次数。使用 watch 监听数据变化,避免不必要的重复计算。
-
使用 keep-alive 缓存组件:对于频繁切换的组件,可以通过使用
<keep-alive>
组件进行缓存,避免每次重新渲染和销毁组件。 -
优化列表渲染:使用
v-for
渲染大量数据时,尽量避免在每个项中使用复杂的操作和计算。 -
避免过度渲染:避免使用过多的嵌套组件和无限循环的计算属性,减少不必要的渲染和响应。
-
使用异步组件:对于一些非关键的组件,可以使用异步组件进行延迟加载,提高初始加载速度。
-
使用 CDN 加速:将一些公共的 Vue 库和资源文件通过 CDN 进行加速,减少服务器负载和提高网络请求速度。
-
合理使用 Vuex:对于大型应用,使用 Vuex 进行状态管理,避免组件之间的无序通信和混乱的数据流动。
-
配置生产环境优化:在构建生产环境代码时,开启压缩、代码分割、Tree Shaking 等优化选项,减小文件体积和加载时间。
-
使用性能分析工具:使用 Vue 提供的性能分析工具(如 Vue Devtools)来分析和优化应用的性能瓶颈,找出耗时操作和优化空间。
以上是一些常见的 Vue 优化技巧和建议,具体的优化策略应根据具体应用的需求和特点进行调整和实施。