vue理解二

36 阅读4分钟

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