目录
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内里
这个生命周期函数第一次加载也会执行 每次呈现都会执行
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
