1.axios封装
1.设置请求超时时间
-
baseURL字段 接口地址
-
timeout字段 超时时间
const service = axios.create({ baseURL: 'https://xxxx', timeout: 8000, })
2.设置请求拦截,自动添加Token
const headers = req.headers;
//获取缓存中的TOKEN
const token = storage.getItem('token');
if (token != undefined) {
if (!headers.Authorization) {
//将TOKEN带给服务端
headers.Authorization = 'Bearer ' + token
}
}
3.设置响应拦截,对数据进行格式化及状态码进行处理,加入前端自定义信息或后台返回的结果信息。
4.通过封装将api分离出去,存放单独的API文件中。
5.根据项目环境设置请求路径,测试,生产,线上的环境进行动态改变请求路径。
6.添加请求列队,实现loading效果。
7.维护取消token,在页面切换时通过导航守卫可以取消上面中正在发送的请求。
2.synv修饰符作用
用于简化父组件与子组件之间双向绑定的语法。
需要对一个prop进行一个双向绑定,可以使用synv实现。v-model默认只能双向绑定一个属性,通过synv修饰符可以绑定多个属性,实现多个数据同步。
如:
<button @click="$emit('updata:a',1)">a
vue3 移除了synv 可以是v-model:名字=""
3.v-once使用场景
只渲染组件和组件一次,随后重新渲染,都视为静态内容不再渲染。
就是缓存当前的虚拟节点,下次使用缓存中的。
v-for 使用 v-once,解析到最外层,不会每个都循环加入。
v-memo 可以渲染部分内容,通过依赖列表方式控制页面渲染,就是通过依赖的值变化了,就重新渲染下。
4.生命周期
生命周期四个阶段:创建前后,挂载前后,更新前后,销毁前后。从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程
1.beforeCreate 初始化父子关系,数据未观测,编写插件时候用到。
2.created 实例创建完,数据观察完,没有进行挂载。vue 调用接口是在created还是mounted,其实俩者间隔时间很短,非要区分那就是created是在实例创建完成后被立即调用,实例已完成以下配置:数据观测 ,属性和方法的运算,watch/event 事件回调。但挂载阶段还没开始,还没有被渲染成html,creadted钩子函数主要是用来初始化数据。 需要操作DOM,在mounted钩子中调用接口,mounted阶段,组件的DOM已经挂载,可以进行DOM相关操作。
3.beforeMount 挂载前
4.mounted 元素挂载完成之后触发,真实页面元素。
5.beforeUpdate 修改数据,不会二次更新
6.updated 数据修改完成,更新之后,做些缓存操作,监控组件更新完毕
7.beforeDestroy 销毁之前
8.destroyed 销毁之后。
vue3 多了一个,setUp最优先的, 销毁的名字改变了,加了捕获异常等一些钩子。
5.异步组件
当一个组件比较大,影响渲染,就需要异步组件。
三种写法:回调,Promise,对象
1.回调:
components:{
"my-data":(resolve,reject)=>{
setTimeout(function(){
resolve({
render(h){
return h('p','xx')
}
})
},2000)
}
}
2. Promise
components:{
"my-data":()=>import(xxxx/xx.vue)
}
原理:默认渲染占位符节点。组件加载完毕强制更新。类于图片懒加载,搭配构建工具进行分包。
6.vuex刷新
1.每次获取都检查vuex数据是否存在,不存在重新发送请求获取数据在存入。
2.采取持久化,将数据存入localStraige中。
7.关于history模式
URL地址表现不同,hash有#号,history没有
history模式刷新后,向服务端发起请求,服务端无法响应到资源,出现404.
解决方式nginx,apache,node 中进行配置。
根据路径找到对应的组件渲染
vite.config.js配置文件写上 base:'/yd/', 打包后的文件名
8.vuex
状态管理模式,解决数据共享。
对ts支持不好,调用过长不够扁平化,还需要加入独立的命名空间等。
通过watch 监控vuex状态变化。
通过store.subscribe 监控变化,发布订阅模式。
9.key
key可以判断两个虚拟节点是否相同节点, 没有key会导致更新出现问题,尽量不要采用索引为key.通过这个 key,diff 操作可以更准确、更快速。
没有key,vue会最大限度减少动态元素,并尝试就地修改或复用相同元素。
如input 两个标签 就修改type中的属性,加入key就会进行更新。
for循环中使用就当更新。