前端基础知识与常见面试题(五)

最新推荐文章于 2024-11-10 22:45:39 发布

墨布

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量73

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_71003185/article/details/127608811

版权

### **介绍一下async 和await**

async 结合await，可以使异步操作代码看起来像同步

async 和await相对promise来讲，写法更优雅，可以解决promise地狱

promise使用.catch来捕获报错

async 和await可以使用try...catch来捕获报错

设置默认地址？例如：axios.defaults.baseURL="https//api.xin88.top"

### **axios拦截器**(钩子函数)

在请求和响应之前执行的函数

### **axios的特点有哪些**

1. axios基于promise的http库

2. 返回数据格式会自动转为json
3. 有请求拦截器和响应拦截器
4. 在客户端和服务器都可使用,

### **vue-router的哪几种模式**

hash(支持所有浏览器), history（依赖HTML5 history API 和服务器配置）, abstract（支持所有JS环境，node.js如果没有发现浏览器API会强制进入abstract模式）

### **路由跳转经典问题**

一.

```js
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/...".
```
当编程式跳转同一页面时会报错，解决方案如下：
解決方案

```js
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
```

二.

跳转时滚动问题，会停留在上一个组件位置

```js
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
// 方案一
scrollBehavior: () => ({ y: 0 }),
routes
})

// 方案二
// router.beforeEach((to, from, next) => {
// window.scrollTo(0, 0);
// next();
// })
```

### **$route和$router的区别**

$route：VueRouter的实例

$router：当前的router跳转对象，保存的是当前跳转的路由信息

### **路由常用传参方式**

props , params , query

$router.push({name:'',params:{}})

$router.push({name:'',query:{}})

###keep-alive
会缓存不活动的组件状态
作用：避免多次重复渲染降低性能
常用知识点：
1.include——字符串或正则表达式。只有名称匹配的组件会被缓存，写谁缓存谁
2.exclude——字符串或正则表达式。任何名称匹配的组件都不会被缓存，写谁不缓存谁
3.max——数字。最多缓存多少个组件实例；
4.结合Router，缓存部分页面$router.meta.keeAlive选项；
方式一：
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<keep-alive>
<router-view v-if="!$route.meta.keepAlive">
方式二：
<keep-alive>
<router-view include="item_a">
<keep-alive>
——————————————————————————————————————

### **Token是什么?**
token字符串=【用户登录信息+盐+时间戳+过期时间】
token是一种验证机制，token的意思是‘令牌’，是服务器生成的一段加密字符串，然后返回给客户端

当用户第一次登录生成，然后每次客户端发请求会在请求消息头中携带token，服务器做登录状态验证

假设token有效时间为半小时，而半小时中用户一直在操作，时间一到半小时token失效了。

也就是可能用户在29分的时候还在浏览，30分的token失效了，让登录重新登录，用户体验不好。

这时候就涉及到token续签机制，由于每次发请求消息头都会携带token，那么服务器解密时候如果发现距离失效时间很近，比如失效时间是30分钟，29分的时候用户发送了请求，那么服务器判断还有3分钟token失效，这时服务器回重新生成一个token返回给客户端，这样客户端的token时间就又延长了。

具体过期时间和续签时间以公司实际要求为准

###cookie,session与token 的区别

cookie浏览器保存在本地的一小块数据，cookie的数据会在浏览器发请求时被携带发送到服务器上（储存在客户端，可以被查看到，安全性低）

seesion对象是存储在服务器端的，主要用来存储用户会话所需的数据，seesionID会存在cookie中（客户保存seesionID，服务器端保存用户信息，给服务器存储带来压力）

token是一种验证机制，token的意思是‘令牌’，是服务器生成的一段加密字符串，然后返回给客户端，一般储存在请求头当中，客户端负责存储，服务器只要负责解密就可以了（诞生于服务器，储存在客户端，相比与session更节约服务器资源，而且对移动端和分布式更加友好）
JWT本质就是一个字符串，它是将用户信息保存到一个Json字符串中，然后进行编码后得到一个JWT token,并且这个JWT带有签名信息，接收后可以校验是否被篡改；
——————————————————————————————————————
什么是mvvm模式
1.第一个m是model（模型层），负责数据的存储和业务逻辑；
2.第二个v是view（视图层），负责展示model中的数据；
3.第三个vm是view model(视图模型层)；负责连接model(模型层)和view（视图层）、能够进行双向绑定，自动更新视图。
——————————————————————————————————————
vue-router有哪几种导航钩子

全局前置守卫：**beforeEach**

全局解析守卫：**beforeResolve**

全局后置钩子：**afterEach**

路由独享守卫：**beforeEnter**

组件内的守卫：**beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave**

### **监听同一个组件, 参数发生变化, 从id=1 变成 id=2**

1，通过组件内守卫**beforeRouteUpdate**

2，**watch**侦听器