目录
[01 路由懒加载(重要)](#01 路由懒加载(重要))
[02 axios在脚手架中的使用](#02 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
- 在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二次封装的步骤:
- 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
})
} 把每个接口都单独封装成方法
-
页面中使用接口位置 import {接口方法名} from '@/api'
-
代码中 接口方法().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里面
这个生命周期函数第一次加载也会执行 每次呈现都会执行