vue脚手架 axios的二次封装

目录

[01 路由懒加载(重要)](#01 路由懒加载(重要))

[02 axios在脚手架中的使用](#02 axios在脚手架中的使用)

03.axios的二次封装

[04 组件缓存](#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

  1. 在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

})

} 把每个接口都单独封装成方法

  1. 页面中使用接口位置 import {接口方法名} from '@/api'

  2. 代码中 接口方法().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里面

这个生命周期函数第一次加载也会执行 每次呈现都会执行

相关推荐
LK_0742 分钟前
【Open3D】Ch.3:顶点法向量估计 | Python
开发语言·笔记·python
li星野1 小时前
打工人日报#20251011
笔记·程序人生·fpga开发·学习方法
摇滚侠1 小时前
Spring Boot 3零基础教程,yml配置文件,笔记13
spring boot·redis·笔记
QT 小鲜肉1 小时前
【个人成长笔记】在Ubuntu中的Linux系统安装 anaconda 及其相关终端命令行
linux·笔记·深度学习·学习·ubuntu·学习方法
QT 小鲜肉1 小时前
【个人成长笔记】在Ubuntu中的Linux系统安装实验室WIFI驱动安装(Driver for Linux RTL8188GU)
linux·笔记·学习·ubuntu·学习方法
急急黄豆1 小时前
MADDPG学习笔记
笔记·学习
Chloeis Syntax2 小时前
栈和队列笔记2025-10-12
java·数据结构·笔记·
LuckySusu2 小时前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
LuckySusu3 小时前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu3 小时前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js