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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/857033.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用进程和线程完成TCP进行通信操作及广播和组播的通信

进程 代码 #include <stdio.h>#include <sys/types.h>#include <sys/socket.h>#include <netinet/in.h>#include <arpa/inet.h>#include <string.h>#include <unistd.h>#include <stdlib.h>#include <signal.h>#includ…

升级版约瑟夫环

分数 5 作者 焦晓军 单位 重庆科技大学 又见约瑟夫环&#xff1a;有M个人围坐成一圈&#xff0c; 编号依次从1开始递增直到M&#xff0c;现从编号为1的人开始报数&#xff0c;报到N的人出列&#xff0c;然后再从下一人开始重新报数&#xff0c;报到N的人出列&#xff1b;重复…

为什么Java默认使用UTF-16,Golang默认使用UTF-8呢?

Java 和 Go 语言在默认字符编码上做出了不同的选择&#xff0c;这是由它们的设计目标和使用场景决定的。下面是对 Java 默认使用 UTF-16 和 Go 默认使用 UTF-8 的原因进行的详细解释。 Java 默认使用 UTF-16 的原因 1. 历史背景和兼容性 Unicode 的发展: Java 诞生于 1995 年…

1958springboot VUE宿舍管理系统开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot VUE宿舍管理系统是一套完善的完整信息管理类型系统&#xff0c;结合springboot框架和VUE完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09; &#xff0c;系统具有完整的源代码和数…

PyTorch实战:模型训练中的特征图可视化技巧

1.特征图可视化&#xff0c;这种方法是最简单&#xff0c;输入一张照片&#xff0c;然后把网络中间某层的输出的特征图按通道作为图片进行可视化展示即可。 2.特征图可视化代码如下&#xff1a; def featuremap_visual(feature, out_dirNone, # 特征图保存路径文件save_feat…

MYSQL通过EXPLAIN关键字来分析SQL查询的执行计划,判断是否命中了索引

在MySQL中&#xff0c;你可以通过EXPLAIN关键字来分析SQL查询的执行计划&#xff0c;从而判断是否命中了索引。 准备查询语句&#xff1a; 首先&#xff0c;你需要一个带有WHERE子句的SELECT查询&#xff0c;因为WHERE子句中的条件通常与索引相关联。例如&#xff1a; SELECT …

O2OA的数据库数据库配置-使用不同用户访问Oracle时报错-表或视图不存在

在使用Oracle数据库时&#xff0c;多个O2OA服务器同一个Oracle实例中使用不同的用户启动时&#xff0c;可能会遇到数据库访问的错误。本篇阐述此类问题以及解决方案。 一、先决条件&#xff1a; 1、O2OA已经下载并且解压到指定的目录&#xff1b; 2、Oracle数据库已经完成安…

90 Realistic Arctic Environment Textures snow(90+种逼真的北极环境纹理--雪、冰及更多)

一组90多个逼真的雪、冰、雪地岩石和其他被雪覆盖的地面纹理,供在雪地环境中使用。每个纹理都是可贴的/无缝的,并且完全兼容各种不同的场景--标准的Unity地形、Unity标准着色器、URP、HDRP等等都兼容。 所有的纹理都是4096x4096,并包括一个HDRP掩码,以完全支持HDRP。 特点。…

X86+FPGA, NXP+FPGA:工控稳“固”之选 赋能CPCI/VPX智能轨交新变革

工业IPC在目前大时代背景下面临机遇,但挑战同样也不少。在轨道交通领域&#xff0c;工控机必须具备高可靠性和稳定性&#xff0c;能够在复杂且严苛的工作环境中长时间无故障运行&#xff1b;需要满足严格的实时性和响应性能要求&#xff0c;确保能够迅速准确地处理传感器信号和…

在 Vue 中使用 structuredClone 进行深拷贝来初始化对象内的数组

在 Vue 中使用 structuredClone 进行深拷贝来初始化对象内的数组 一、引言1.什么是深拷贝&#xff1f;2.为什么使用 structuredClone&#xff1f;3.示例代码4.详细解释5.兼容性注意事项 二、总结 一、引言 在前端开发中&#xff0c;处理复杂对象和数组时&#xff0c;深拷贝是一…

椭圆的几何要素

椭圆的几何要素 flyfish 椭圆的方程为 x 2 a 2 y 2 b 2 1 \frac{x^2}{a^2} \frac{y^2}{b^2} 1 a2x2​b2y2​1。 长半轴 a a a&#xff08;绿色虚线&#xff09;和短半轴 b b b&#xff08;紫色虚线&#xff09;。 焦点 F 1 ( − c , 0 ) F1(-c, 0) F1(−c,0)&#…

冒泡排序Java详细注释版

冒泡排序源代码&#xff0c;带有详细注释&#xff0c;希望可以帮助到大家&#xff0c;有用的话点个赞和收藏吧&#xff0c;感谢大家的阅读&#xff0c;Java小白一直在努力&#xff0c;承蒙大神们的厚爱。 定义 在程序设计语言中&#xff0c;排序算法主要有冒泡排序、快速排序、…

低代码开发:加速工业数智化转型发展

引言 在当今全球经济一体化和信息化的深度融合的大环境下&#xff0c;工业数智化转型已经成为推动制造业高质量发展的关键因素。这一转型不仅涉及生产过程的智能化、网络化&#xff0c;还涉及到企业管理、市场服务等全方位的数字化升级&#xff0c;其最终目标是为了实现更高效能…

暴雨讲堂|通往AGI的必由之路—AI agent是什么?

在三月份英伟达的新品发布会上&#xff0c;黄仁勋反复提及一个词汇— Generalist Embodied Agent&#xff0c;意为“通用具身智能体”&#xff0c;给观众留下了深刻的印象。其实具身智能指的是不同形态的拥有主动感知交互能力的机器人。其实&#xff0c;业界对它还有一个更为熟…

python如何安装ta-lib依赖包

在使用pip install ta-lib安装ta-lib库的时候,出现了以下错误信息。本文记录安装成功的整个过程。 解决办法 1、创建虚拟环境 我们使用conda进行创建一个python=3.8版本的虚拟环境 conda create -n python38 python==3.8激活创建好虚拟环境 conda activate python382、安装步…

媒体访谈 | 广告变现痛点有新解,俄罗斯市场成大热门?

今年一季度&#xff0c;中国自主研发游戏在海外市场实际销售收入达到了40.75亿美元&#xff0c;环比和同比均实现了超过5%的增长&#xff0c;出海&#xff0c;仍是游戏产品近些年来最主要的发展模式之一。 当今的市场环境正经历一系列深刻变革&#xff0c;移动游戏广告市场呈现…

python“__main__“的解读

Tutorial Gross tutorial 有些模块包含了仅供脚本使用的代码&#xff0c;比如解析命令行参数或从标准输入获取数据。 如果这样的模块被从不同的模块中导入&#xff0c;例如为了单元测试&#xff0c;脚本代码也会无意中执行。 这就是 if name ‘main’ 代码块的用武之地。除非…

IDEA集成Docker实现快捷部署

本文已收录于专栏 《运维》 目录 背景介绍优势特点操作步骤一、修改Docker配置二、配置Docker插件三、编写Maven插件四、构建Docker镜像五、创建Docker容器 总结提升 背景介绍 在我们手动通过Docker部署项目的时候&#xff0c;都是通过把打包好的jar包放到服务器上并且在服务器…

git提交遇见的<<<<<<<< HEAD无法运行程序问题

在项目文件目录下打开git bash Here 在命令行中输入 git reset --hard HEAD~1 进行复原 git reset --hard HEAD~1 即可

查找程序中隐藏界面的思路

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动 某些程序&#xff0c;它会有管理员界面&#xff08;比如棋牌游戏&#xff0c;它一般会有一个控制端界面&#xff0c;用来控制发牌、换牌&#xff09;&#xff0c;但是这种界…