vue项目优化方法
创始人
2024-06-01 07:42:33
0

1、v-if 和 v-show

频繁切换时使用v-show,利用其缓存特性
首屏渲染时使用v-if,如果为false则不进行渲染

2、v-for的key

列表变化时,循环时使用唯一不变的key,借助其本地复用策略
列表只进行一次渲染时,key可以采用循环的index

3、侦听器和计算属性

侦听器watch用于数据变化时引起其他行为
多使用compouter计算属性顾名思义就是新计算而来的属性,如果依赖的数据未发生变化,不会触发重新计算

4、合理使用生命周期

当一个组件被销毁时,清除组件中添加的全局事件和定时器等
使用动态组件的时候通过keep-alive包裹进行缓存处理,相关的操作可以在actived阶段激活

5、数据响应式处理

不需要响应式处理的数据可以通过Object.freeze处理,或者直接通过this.xxx = xxx的方式进行定义
需要响应式处理的属性可以通过this.$set的方式处理,而不是JSON.parse(JSON.stringify(XXX))的方式

6、插件引入

第三方插件可以采用按需加载的方式,比如element-ui。

7、减少代码量

采用mixin的方式抽离公共方法
抽离公共组件
定义公共方法至公共js中
抽离公共css

8、编译方式

如果线上需要template的编译,可以采用完成版vue.esm.js
如果线上无需template的编译,可采用运行时版本vue.runtime.esm.js,相比完整版体积要小大约30%

9、渲染方式

服务端渲染,如果是需要SEO的网站可以采用服务端渲染的方式
前端渲染,一些企业内部使用的后端管理系统可以采用前端渲染的方式

10、字体图标的使用

有些图片图标尽可能使用字体图标

11、图片懒加载

页面只渲染当前可视区域内的图片,减少了其他图片渲染数量

12、路由懒加载

不同路由对应的组件分割成不同的代码块,当路由被访问的时候才加载对应的组件

相关内容

热门资讯

保存时出现了1个错误,导致这篇... 当保存文章时出现错误时,可以通过以下步骤解决问题:查看错误信息:查看错误提示信息可以帮助我们了解具体...
汇川伺服电机位置控制模式参数配... 1. 基本控制参数设置 1)设置位置控制模式   2)绝对值位置线性模...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
表格中数据未显示 当表格中的数据未显示时,可能是由于以下几个原因导致的:HTML代码问题:检查表格的HTML代码是否正...
本地主机上的图像未显示 问题描述:在本地主机上显示图像时,图像未能正常显示。解决方法:以下是一些可能的解决方法,具体取决于问...
不一致的条件格式 要解决不一致的条件格式问题,可以按照以下步骤进行:确定条件格式的规则:首先,需要明确条件格式的规则是...
表格列调整大小出现问题 问题描述:表格列调整大小出现问题,无法正常调整列宽。解决方法:检查表格的布局方式是否正确。确保表格使...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...