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里面

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