vue 性能优化

简介: 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 事件、计时器

在 beforeDestory 生命周期中执行,避免内存泄露,页面会越来越卡,最终卡死。

合理使用异步组件

  • 加载大组件,如图表、富文本编辑器等
  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

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

webpack 层面的优化

待补充

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

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

使用服务端渲染 SSR

目录
相关文章
|
2天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
8 1
|
2天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
2天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
2天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
2天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具(npm, webpack, Git)。 - 从Vue官方文档学习基础,包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex,掌握路由管理和状态管理。 - 学习自定义指令和Mixins,优化性能技巧。 - 实战项目练习,加入Vue社区,阅读相关资源,提升技能。 - 关注Vue生态,持续实践和创新,以适应不断发展的框架。
6 0
|
3天前
|
JavaScript 前端开发 程序员
Vue组件化、单文件组件以及使用vue-cli(脚手架)
Vue组件化、单文件组件以及使用vue-cli(脚手架)
16 0
|
3天前
|
JavaScript API
Vue数据动态代理机制的实现以及响应式与数据劫持
Vue数据动态代理机制的实现以及响应式与数据劫持
6 0
|
3天前
|
JavaScript 前端开发 程序员
Vue指令的使用以及自定义指令
Vue指令的使用以及自定义指令
7 0
|
3天前
|
JavaScript 前端开发 程序员
Vue2入门(安装Vue、devtools,创建Vue)以及MVVM分层思想
Vue2入门(安装Vue、devtools,创建Vue)以及MVVM分层思想
8 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1009 0