vue 前端优化性能优化方法
1.列表使用唯一 key
v-for="item in activeList" :key="item.id"
原因是不使用 key 或者列表的 index 作为 key 的时候,每个元素对应的位置关系都是 index,直接导致我们插入的元素到后面的全部元素,对应的位置关系都发生了变更,所以在 patch 过程中会将它们全都执行更新操作,再重新渲染。这可不是我们想要的,我们希望的是渲染添加的那一个元素,其他四个元素不做任何变更,也就不要重新渲染。
2.使用 v-show 复用 DOM
<template><div><div v-show="status" class="on"><my-components /></div><section v-show="!status" class="off"><my-components ></section></div> </template>
v-show:是渲染组件,然后改变组件的 display 为 block 或 none
v-if:是渲染或不渲染组件
原理就是使用 v-if 当条件变化的时候,触发 diff 更新,发现新旧 vnode 不一致,就会移除整个旧的 vnode,再重新创建新的 vnode,然后创建新的 my-components 组件,又会经历组件自身初始化,render,patch 等过程,而 v-show 在条件变化的时候,新旧 vnode 是一致的,就不会执行移除创建等一系列流程
所以对于可以频繁改变条件的场景,就使用 v-show 节省性能,特别是 DOM 结构越复杂收益越大
不过它也有劣势,就是 v-show 在一开始的时候,所有分支内部的组件都会渲染,对应的生命周期钩子函数都会执行,而 v-if 只会加载判断条件命中的组件,所以需要根据不同场景使用合适的指令
3. 变量本地化
原理:多次引用的变量保存起来,因为每次访问 this.xx 的时候,由于是响应式对象,所以每次都会触发 getter,然后执行依赖收集的相关代码,如果使用变量次数越多,性能自然就越差
从需求上说在一个函数里一个变量执行一次依赖收集就够了,可是很多人习惯性的在项目中大量写 this.xx,而忽略了 this.xx 背后做的事,就会导致性能问题了
var num = this.first;
var sum = this.sumNum;
for (let i = 0; i < 200; i++) {sum+= sum + num + i// 避免频繁引用 this.xx}
4. 第三方插件按需导入
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select); /* 或写为 *
Vue.use(Button) *
Vue.use(Select) */
new Vue({ el: '#app', render: h => h(App) });
5.路由懒加载
没有用路由懒加载
import Vue from 'vue'
import Router from 'vue-router'
const CPKB1 = () => import('@/views/centit/CPKB1')
const CK = () => import('@/views/centit/CK') //首页
export default new Router({
// mode: 'history', //打包的时候关闭
//saveScrollPostioin: true,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {
x: 0,
y: 0
}
}
},
base:'/RAW/dist', //包名 一级目录和文件名一致 打包的时候打开
linkActiveClass: 'active',
routes: [
{
path:'/',
name:'CK',
component:CK,
mete:{title:'出库看板'},
children: [
{
path:'/CPKB1',
name:'CPKB1',
component:CPKB1,
mete:{title:'CPKB1'}
}
]
},
]
})
用了路由懒加载:
const router = new Router({routes: [{ path: '/CPKB', component: () => import('@/views/centit/CPKB1') },{ path: '/CK', component: require('@/views/centit/CK').default }] })
在进入这个路由的时候才会走对应的 component,然后运行 import 编译加载组件,可以理解为 Promise 的 resolve 机制
import:Es6语法规范、编译时调用、是解构过程、不支持变量函数等require:AMD规范、运行时调用、是赋值过程,支持变量计算函数等
6. keep-alive缓存页面
<template><div id="app"><keep-alive include="['CPKB1','CPKB2']"><router-view></router-view></keep-alive></div> </template>
我们都可以通过内置组件 <keep-alive></keep-alive> 来把组件缓存起来,在组件切换的时候不进行卸载,这样当再次返回的时候,就能从缓存中快速渲染,而不是重新渲染,以节省性能
7. 事件的销毁
<script>
export default {created() {this.timer = setInterval(this.load, 1000)addEventListener('touch', this.touch, false)},beforeDestroy() {clearInterval(this.timer)this.timer = nullremoveEventListener('touch', this.touch, false)}
}
</script>
Vue 组件销毁时,会自动解绑它的全部指令及事件监听器,但是仅限于组件本身的事件而对于定时器,addEventListener 注册的监听器等,就需要在组件销毁的生命周期钩子中手动销毁或解绑,以避免内存泄露.
8.项目图片懒加载
使用第三方图片懒加载库
9.长列表性能优化
针对只用于展示的数据,可以使用Object.freeze来处理。
原因如下:Vue 会通过 Object.defineProperty 对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要 Vue 来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间,那如何禁止 Vue 劫持我们的数据呢?可以通过 Object.freeze 方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
} };
10.vue 组件中的 data 是函数而不是对象
使用这种函数方式
export default {
name: 'app',
data() {
return {
level:''1"
};
},
}
不使用这种对象方式
export default {
name: 'app',
data: {
level:''1"
},
}
如果data 是一个纯碎的对象,则所有的实例将共享引用同一份 data 数据对象,无论在哪个组件实例中修改 data,都会影响到所有的组件实例。如果 data 是函数,每次创建一个新实例后,调用 data 函数,从而返回初始数据的一个全新副本数据对象。这样每复用一次组件,会返回一份新的 data 数据,类似于给每个组件实例创建一个私有的空间,让各个组件的实例各自独立,互不影响保持低耦合
11.不需要响应变化的数据可以放在实例里面,不要将所有的数据都放到 data 中
对应的lfl可以正常使用
created() {
this.lfl = '123'
},
data 中的数据都会增加 getter 和 setter,又会收集 watcher,这样还占内存。不需要响应式的数据我们可以定义在实例上。
相关文章:
vue 前端优化性能优化方法
1.列表使用唯一 key v-for"item in activeList" :key"item.id"原因是不使用 key 或者列表的 index 作为 key 的时候,每个元素对应的位置关系都是 index,直接导致我们插入的元素到后面的全部元素,对应的位置关系都发生了变…...
docker-compose部署kafka 3.3.1 kraft
一、服务器: 节点1:10.1.1.165 节点2:10.1.1.164 节点3:10.1.1.169二、添加环境地址解析 vim /etc/hosts kafka1 10.1.1.165 kafka2 10.1.1.164 kafka3 10.1.1.169三、节点配置 节点1 version: "3" services:kafka1:image: bitnami/kafka:3.3.1contain…...
【Python】第二弹---深入理解编程基础:从常量、变量到注释的全面解析
✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】 目录 1、常量和表达式 2、变量和类型 2.1、变量是什么 2.2、变量的语法 2.3、变量的类型 2.4、动态类型特…...
[BrainShadow-V1] VR头戴设备统计报告
Brain-Shadow-V1 EventVR headsetsReported byXiao enDate2025/01/15Version1.0 HTC Vive Pro 2 Pro HTC Vive Pro 2 是一款高端虚拟现实头显,配备双 2.5K 显示屏,组合分辨率达到 48962448,提供 120 的视场角和 120Hz 的刷新率。该设备支持…...
跨境电商使用云手机用来做什么呢?
随着跨境电商的发展,越来越多的卖家开始尝试使用云手机来协助他们的业务,这是因为云手机具有许多优势。那么,具体来说,跨境电商使用云手机可以做哪些事情呢? (一)实现多账号登录和管理 跨境电商…...
DAY23 使用具有通用性的队列
1.初始化数组 //Initialize arrays.int tempLength getNumNodes();valuesArray new char[tempLength];indicesArray new int[tempLength];int i 0;2.初始化队列 创建了一个名为tempQueue的CircleObjectQueue对象,即一个循环对象队列。 将当前对象(即…...
汽车网络信息安全-ISO/SAE 21434解析(上)
目录 概述 第四章-概述 1. 研究对象和范围 2. 风险管理 第五章-组织级网络安全管理 1. 网络安全治理(cybersecurity governance) 2. 网络安全文化(cybersecurity culture) 3. 信息共享(Information Sharing) 4. 管理体系…...
通用查询类接口开发的另类思路
文章目录 一、需求概述二、开发方式1、传统开发方式2、将接口视为资源文件1.)springmvc工程2.)springboot工程3.)nginx代理 三、接口数据如何更新1、原始数据文件生成接口数据1.)定义启动类2.)启动监听3.)文…...
uc/os-II 原理及应用(八) 系统裁减以及移植到51单片机-下
现在说明几个重要的点, OSStartHighRdy 的作用就是把任务栈复制到系统栈上面,再利用RET的时候会从系统栈上到一个地址放到PC寄存器上来实现任务运行。OSCtxSw是任务切换,把系统栈全部备份到当前任务栈映射上,然后改OSTCBCur,调用…...
职场沟通与行为
职场沟通与行为 引言 在职场上,你是否曾遇到过困惑的沟通?是否对同事的行为有过疑虑?这不仅是个别现象,而是我们这个时代工作文化中的普遍问题。许多职场的摩擦,来自沟通不畅或是行为不当。那么,如何才能…...
【tailscale 和 ssh】当服务器建立好节点,但通过客户端无法通过 ssh 连接
背景 当服务器建立好节点,一切显示正常但通过客户端无法通过 vs code 中的 ssh 连接到服务器 问题解决 因为服务器是重装过的,所以忘记在服务器上下载 ssh 了。。。安装完成并启动 SSH 服务后便可正常连接! sudo apt update sudo apt in…...
Spark 之 Aggregate
Aggregate 参考链接: https://github.com/PZXWHU/SparkSQL-Kernel-Profiling完整的聚合查询的关键字包括 group by、 cube、 grouping sets 和 rollup 4 种 。 分组语句 group by 后面可以是一个或多个分组表达式( groupingExpressions )。 聚合查询还支持 OLAP 场景下的多…...
【JSqlParser】Java使用JSqlParser解析SQL语句总结
简述 Java解析SQL语句有很多工具都可以做到,比如Mybatis、Druid、目前用来用去最全面的仍然是Jsqlparser,它是一个Github上的开源项目,JSqlParser是一个用于解析SQL语句的Java库,它可以帮助开发者分析和操作SQL语句的结构。无论是…...
Linux下的dev,sys和proc(TODO)
(TODO) 还有一个sysfs 在 Linux 系统中,/dev、/sys 和 /proc 是三个特殊的虚拟文件系统目录,它们各自有特定的用途,主要用于与设备和内核交互。以下是它们的详细区别和功能说明: 1. /dev(Devi…...
【Unity3D】利用Hinge Joint 2D组件制作绳索效果
目录 一、动态绳索 (可移动根节点) 二、静态绳索 三、利用Skinning Editor(Unity2022.3.15f1正常使用) 四、注意事项 一、动态绳索 (可移动根节点) 动态绳索 DynamicRope空物体 Anchor和whitecircle是相同位置的物体ÿ…...
Springer Nature——Applied Intelligence 投稿指南
投稿系统:Editorial Manager (Manuscript and Peer Review) : 使用Editorial Manager 投稿系统的期刊列表:期刊列表 期刊主页:Spring Nature 主页 投稿主页:Spring Nature Submit SystemSubmission Guidelines: Official Submissi…...
数据结构、数据类型、数字编码、字符编码:保姆级图文详解
文章目录 前言1、数据结构分类1.1、逻辑结构:线性与非线性1.2、物理结构:连续与分散1.3、数据结构的实现方式1.4、数据结构的选择依据 2、基本数据类型2.1、定义与分类2.2、存储形式 3、数字编码3.1、原码、反码与补码3.2、浮点数编码3.3、整数与浮点数区…...
DM适配连接kettle迁移工具(资源库+数据源配置)
适配改造介绍及说明 本次修改基于8.2.0.0版本调整,在该源码基础上进行DM的适配,已支持DM为资源库的配置以及相关数据迁移。kettle资源库是Kettle ETL工具内置的一个资源库。配置好的数据库可以直接缓存到资源库当中;创建、编辑好的转换/作业…...
WINFORM - DevExpress -> alertControl1提示信息框
第一个按钮为常规按钮, 单击触发 ButtonClick 事件. 第二个按钮有选中和未选中状态. 单击触发 ButtonDownChanged 事件。 if (e.ButtonName "alertButton2") { } 在dev用户界面中进行提示(usecontrolwinform) AlertInfo info new AlertInfo("提示",…...
STM32-串口-UART-Asynchronous
一,发送数据 #include "stdio.h" uint8_t hello[]"Hello,blocking\r\n"; HAL_UART_Transmit(&huart1,hello,sizeof(hello),500); 二,MicroLIB-printf(" hello\r\n") #include "stdio.h" #ifdef __GNUC…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
