vue脚手架 axios的二次封装
目录
01 路由懒加载(重要)
02 axios在脚手架中的使用
03.axios的二次封装
04 组件缓存
01 路由懒加载(重要)
一次性导入会出现严重的问题 : 首屏卡顿
因为main.js中引入了router/index.js
router/index.js又使用了import语句 静态的引入了每一个组件 导致了首屏卡顿
所以我们建议把路由改成懒加载的方式:
怎么引入懒加载:
component:()=>import('页面组件的路径')
表示当这个路径的path被访问的时候才执行component对应的函数
才去使用import函数动态加载这个页面组件
实际开发中 路由的component除了首页需要加载的页面以外 其他页面组件的引入 必须使用懒加载的方式 这个是vue性能优化的重要手段之一
组件也可以懒加载
components:{
子组件标签名:()=>import('子组件路径')
} 这个就是子组件的懒加载 用到的时候再加载
记住 但凡是import引入组件的地方都可以写成这种形式
02 axios在脚手架中的使用
在脚手架中使用axios模块的步骤:
1.npm i axios --save
2. 在main.js中引入axios
import Axios from 'axios'
将axios添加到vue的原型对象里面
Vue.prototype.$axios=Axios
3.Axios(option) 直接调用
03.axios的二次封装
脚手架自带的一个宿主环境对象
process (进程对象) env(环境)
process.env.NODE_ENV 返回一个字符串
development 表示当前环境是开发环境
production表示当前环境是生产环境
axios二次封装的步骤:
1. npm i axios --save
2.在src/utils文件里面创建request.js文件
3.import Axios from 'axios'
4.Axios 调用create 方法进行baseURL和timeout的配置
baseURL:process.env.VUE_APP_BASE_URL(在src同级新建.env.development和.env.production这两个文件)
这两个文件里面可以定义变量
随着开发或者生产环境的切换 自动读取对应后缀名的文件
这两个文件里面自定义变量名 VUE_APP开头的剩下的自定义 但是潜规则都是叫做VUE_APP_BASE_URL
修改完配置文件 一定记得重启项目!!!
5.利用service 对象设置请求拦截器和响应拦截器
6.export default service 对外暴露
7.src/api 文件夹里面创建index.js
8.index.js里面引入request import request from '@/utils/request'
9.export const 接口方法名=(data/params)=>{
return request({
url:'/剩余地址',
method:'get/post',
data/params
})
} 把每个接口都单独封装成方法
10. 页面中使用接口位置 import {接口方法名} from '@/api'
11. 代码中 接口方法().then(data=>{拿到data数据})
04 组件缓存
默认路由跳转时 组件的生命周期的变化
A跳转到B
B页面的beforeCreate
B页面的created
B页面的beforeMount
A页面的beforeDestroy
A页面的destroyed
B页面的mounted
B返回A
A页面的beforeCreate
A页面的created
A页面的beforeMount
B页面的beforeDestroy
B页面的destroyed
A页面的mounted
通过上面的声明周期的变化发现每次跳转时都会把当前组件进行销毁把目标组件进行创建
如果页面反复跳转 就会反复的创建和销毁 非常消耗性能
vue性能优化之一:
需要把组件进行缓存:
使用keep-alive组件
在有组件切换显示的位置上面 套上keep-alive标签即可
组件切换显示:
router-view 或者动态组件
配合keep-alive组件缓存有一对钩子函数
activated 激活
deactivated 解除激活
使用keep-alive以后生命周期函数的变化:
A页面第一次加载:
A页面的beforeCreate
A页面的created
A页面的beforeMount
A页面的mounted
A页面的activated
B页面的第一次加载:
B页面的beforeCreate
B页面的created
B页面的beforeMount
B页面的mounted
A页面的deactivated
B页面的activated
A=>B
A页面的deactivated
B页面的activated
B=>A
B页面的deactivated
A页面的activated
如果你有接口请求需要每次页面呈现的时候都调用那么我们可以写到activated里面
这个生命周期函数第一次加载也会执行 每次呈现都会执行
相关文章:

vue脚手架 axios的二次封装
目录 01 路由懒加载(重要) 02 axios在脚手架中的使用 03.axios的二次封装 04 组件缓存 01 路由懒加载(重要) 一次性导入会出现严重的问题 : 首屏卡顿 因为main.js中引入了router/index.js router/index.js又使用了import语句 静态的引入了每一个组件 导致了首屏卡顿 所以我…...

人机恋爱新趋势:与AI男友谈恋爱的甜蜜与挑战
"我曾经把ChatGPT当成工具,从未追过星,也没有嗑过CP。没想到,到了36岁,我竟然嗑上了AI男友。Open AI,你赢了。你不仅是最好的AI公司,还是乙女游戏公司。" 转行大龄互联网人,走遍20国…...

文生视频开源产品的一些调研(一)
笔者尝试AI视频生成的几个特点: 玄学prompt,每个视频的prompt可能也需要微调很多次,需要找到使用模型的最佳prompt词组合,不恰当的比喻,骑自行车,座位高度等都是人与车彼此熟悉玄学生成,因为需…...

一切前端概念,都是纸老虎
4、listener可以通过 store.getState() 得到当前状态。如果使用的是 React,这时可以触发重新渲染 View。 function listerner() { let newState store.getState(); component.setState(newState); } 对比 Flux 和 Flux 比较一下:Flux 中 Store 是…...

使用自签名 TLS 将 Dremio 连接到 MinIO
Dremio 是一个开源的分布式分析引擎,为数据探索、转换和协作提供简单的自助服务界面。Dremio 的架构建立在 Apache Arrow(一种高性能列式内存格式)之上,并利用 Parquet 文件格式实现高效存储。有关 Dremio 的更多信息,…...

嵌入式系统软件开发环境_2.一般架构
1.Eclipse框架 嵌入式系统软件开发环境是可帮助用户开发嵌入式软件的一组工具的集合,其架构的主要特征离不开“集成”问题,采用什么样的架构框架是决定开发环境优劣主要因素。Eclipse框架是当前嵌入式系统软件开发环境被普遍公认的一种基础环境框架。目…...

单门户上集成多种数据库查询入口
(作者:陈玓玏) 开源项目,欢迎star哦,https://github.com/tencentmusic/cube-studio 在一家公司,我们通常会有多种数据库,每种数据库因为其特性承担不同的角色,比如mysql这种轻量…...

华芯微特SWM34-使用定时器捕获快速解码EV1527编码
在无线应用领域,很多433Mhz和315Mhz的遥控器,红外探测器,门磁报警器,无线门铃等都使用EV1527编码格式来发射数据。发射和接收均有对应的RF芯片完成,而且成本极低(目前市场价3毛钱不到)。接收芯片…...

小程序安卓手机点击uni-data-select 下拉框选择器会出现蓝色阴影
解决方法:在导入的包中找到uni-data-select.vue,接着找到.uni-stat__select样式,把cursor: pointer去掉。 如果出现穿透问题,uni-select__selector的z-index加高,默认是2。...

playwright vscode 插件源码解析
Playwright vscode插件主要功能 Playwright是微软开发的一款主要用于UI自动化测试的工具,在vscode中上安装playwright vscode插件,可以运行,录制UI自动化测试。 playwright vscode插件主要包括两块功能,功能一是在Test Explorer中…...

Mysql: SQL-DDL
一.SQL通用语法 1.SQL可以单行或者多行书写,以分号结尾。 2.SQL语句可以使用空格/缩进来增强语句的可读性。 3.MySQL数据库的SQL语句不区分大小写,关键字建议用大写。 4.注释: 单行注释:注释内容或#注释内容(Mysql特有) 多行注释:/*注释内容*/ 二.SQL分类 1.D…...

Java中的加密与解密:实现安全的数据传输
Java中的加密与解密:实现安全的数据传输 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!在当今信息安全至关重要的时代,保护数据的安全性…...

基于SSM的美食推荐系统
文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SSM的美食推荐系统,java项目。 ecli…...

Pycharm利用Anaconda环境
创建环境 conda create --name d2l python3.11 -y 激活环境 conda activate d2l 配置环境 以torch环境为例 我们可以按如下⽅式安装PyTorch的CPU或GPU版本: pip install torch pip install torchvision 我们的下⼀步是安装d2l包,以⽅便调取本书中经…...

Python函数魔术:深入理解18个高级函数特性
今天,我们将一起探索那些让代码瞬间变得优雅而强大的高级函数。准备好,让我们一起揭开它们的神秘面纱吧! 1. map():一招制胜,批量操作 想象一下,你需要给一个数字列表的每个元素加上5。普通的循环是不是让…...

在大型单页应用(SPA)中,如何处理状态管理的
在大型单页应用(SPA)中,如何处理状态管理的 在大型单页应用(SPA)中,状态管理是一个关键环节,确保数据的一致性和可预测的变更。以下是一些常见的状态管理方法: Redux: …...

力扣78 子集
给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的 子集(幂集)。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1: 输入:nums [1,2,3] 输出:[[],[1],[2],[1,2],[3],…...

C语言从头学24——函数原型
前面学习函数时已经知道必须先存在一个函数然后才能使用,且这个函数的位置还要在 main()函数之前,否则的话编译时会报错。但我们写程序时,main() 函数是程序入口,程序的主要部分都在 main() 函数中,且其它函数也都要通…...

Vue中使用ElementUI组件Form组件的校验validate
先准备一些el-form元素 这里面el-form中:model(v-bind:model)是单项绑定的,如果你写成了v-model""可能会出现校验没有效果的情况。 这是校验过后的结果了 现在开始使用下吧! 1.在el-form中绑定一个ref,名字自拟,后续触发检验结果…...

PostgreSQL性能优化之分区表 #PG培训
在处理大规模数据时,PostgreSQL的性能优化是一个非常重要的话题,其中分区表(Partitioned Tables)是提高查询和数据管理效率的重要手段。本文将详细介绍PostgreSQL分区表的概念、优势、创建与管理方法以及一些常见的优化策略。 #P…...

SAPUI5基础知识9 - JSON Module与数据绑定
1. 背景 在前面的博客中,我们已经学习了SAPUI5中视图和控制器的使用,在本篇博客中,让我们学习下MVC架构中的M-模型了。 SAPUI5中的JSON Model是一个客户端模型,可以用于在SAPUI5应用程序中处理和操作JSON数据。SAPUI5提供了绑定…...

解决vue3使用ref 获取不到子组件属性问题
需求: 父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问子组件内部属性或事件。 关键点: 子组件中,setup语法糖需要用defineExpose把要读取的属性和方法单独暴露出去,否则会访问失败…...

使用STL容器还是Qt容器?
在C编程中,选择合适的容器库对于编写高效、可维护的代码至关重要。两大主流选择是STL容器(如std::map,std::vector等)和Qt容器(如QMap,QVector等)。本文将探讨两者的优缺点,以帮助开…...

Android 2ndBLE的实现
没有需求创造需求 有没有想过一件事情,假如你的手机关机了,而且在家里怎么都找不到的情况? 那么通过另外一种手机进行查找是不是可以?听上去有点搞笑,但实际上确实有这样的需求存在。实现方案是用超低功耗蓝牙&#…...

常见硬件工程师面试题(二)
大家好,我是山羊君Goat。 对于硬件工程师,学习的东西主要和电路硬件相关,所以在硬件工程师的面试中,对于经验是十分看重的,像PCB设计,电路设计原理,模拟电路,数字电路等等相关的知识…...

java构造方法的重载
在java中,与普通方法一样,构造方法也可以重载,在一个类中可以定义多个构造方法,但是要求每个构造方法的参数类型或参数不同。在创建对象时,可以通过调用不同的构造方法为不同属性赋值。 示例代码如下 class Student5…...

webpack 压缩图片
压缩前: 压缩后: 压缩后基本上是压缩了70-80%左右 1.依赖版本及配置 "imagemin-webpack-plugin": "^2.4.2", "imagemin-mozjpeg": "^7.0.0", "imagemin-pngquant": "^5.0.1", "webpa…...

JAVA每日作业day6.24
ok了家人们今天学习了一些关键字,用法和注意事项,静态代码块这些知识,闲话少叙我们一起看看吧。 一,final关键字 1.1 final关键字的概述 final: 不可改变。可以用于修饰类、方法和变量。 类:被修饰的类&a…...

鸿蒙开发系统基础能力:【@ohos.hiTraceChain (分布式跟踪)】
分布式跟踪 本模块提供了端侧业务流程调用链跟踪的打点能力,包括业务流程跟踪的启动、结束、信息埋点等能力。 说明: 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 import hi…...

.git目录解读
在执行 git init 命令时,Git 会在当前目录中创建一个名为 .git 的目录。该目录包含 Git 所需的所有元数据和对象,用于版本控制。以下是 .git 目录结构的示意图,并附有每个目录和文件的作用说明: .git #…...