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循环中使用就当更新。
