一句话回答-近期面试题总结

前言

蘑菇头也是正式打响了今年秋招的第一枪，库次库次嘎嘎面，然后就被虐的体无完肤，好多问题都不会，特此记录下一些蘑菇头在面试中常见的一些面试题，争取一句话回答清楚。

什么是JWT

JWT（JSON Web Tokens）是一种用于双方之间安全传输信息令牌标准。JWT主要由三部分组成，分别是头部，负载，签名，头部他是一个JSON对象，主要有加密方式和JWT的类型，负载也是一个JSON对象，里面字段就比较多了，里面有过期时间，发布时间等等，签名是根据头部和负载生成的，主要是为了JWT在传输过程中不被修改。

路由守卫有哪些

分为三种，全局路由守卫，独享路由守卫，组件内的路由守卫。全局路由守卫是对所有的路由都生效，全局路由守卫有两种，分别是前置守卫和后置守卫，可以做页面加载前和页面加载后的一些操作，独享路由守卫是只针对这一个路由生效。组件内的路由守卫它定义在组件内部，用于控制组件级别的路由跳转。他有beforerouterenter,在进入该组件的对应路由前调用，beforrouterupdate, 对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，就会调用这个守卫。beforrouterleave 离开该组件对应的路由时调用。路由守卫主要有这些作用，权限控制，页面重定向，页面加载前的一些操作，如数据加载等等

Keep-alive

他是vue的一个内置组件，当一个组件需要频繁切换但是不要写重新渲染时，就可以用Keepalive。当页面不需要用到这个组件时，他会进行缓存而不是直接销毁，从而节省资源。它还有条件性缓存，通过在include和exclude可以将需要缓存的组件和不需要缓存的组件进行条件性缓存。当组件被Keepalive包裹时，他的生命周期钩子会发生变化，他有active和deactive两种，不会接收到 mounted 和 unmounted 生命周期钩子函数的调用，因为它们没有被真正地挂载或卸载。相反，它们会接收到 activated 和 deactivated 钩子函数的调用。

vue的生命周期

vue的生命周期指的是vue实例从创建到销毁的一个过程。他主要经理8个阶段，分别是创建前后，挂载前后，更新前后，销毁前后。创建前后是指组件的实例的创建，在创建前data，method还未被初始化，所以能做的事情非常有限，创建后可以访问到data，method属性，所以这是数据初始化，发送请求的良好时机。挂载指的是将编译模板挂载到dom结构这一过程，在挂载前，编译模板是挂载到虚拟dom中，还未渲染为真正的dom结构。在挂载后可以访问到dom元素。在更新前可以访问到还未被重新渲染的dom，访问不到更新后的dom，在更新后可以访问。在销毁前可以做一些清理工作，比如定时器，解除时间监听器等等。

e.target 和 e.currentTarget

他们分别指的是触发事件的元素和绑定事件的元素。e.target 指向触发事件的元素。在事件冒泡（bubbling）或捕获（capturing）阶段，无论事件是从哪个子元素开始，e.target 总是指向最初触发事件的元素。e.currentTarget 指向绑定事件的元素，即事件处理程序当前正在其上执行的那个元素。无论事件在DOM树中如何传播（冒泡或捕获），e.currentTarget 的值都不会改变。

vite和webpack

都是打包压缩构建工具，但是他们之间有很大的区别。比如热更新方面，v只更新修改后的文件而w会将所有文件更新，配置方面，v的配置相对简洁，w的配置比较复杂，而且v的启动速度比w快。但是v的生态系统没有w做的好，w提供了一套强大的插件和加载器可供选择，比较适合大型项目。

浏览器的缓存策略

浏览器的缓存策略主要是为了提高页面的加载速度，将一些资源缓存下来，减轻服务器的负担。他主要分为两类，分别是强缓存和协商缓存。强缓存的主要流程是当浏览器首次请求某个资源时，他会在http响应头中添加缓存策略，主要有Expires和Cache-Control，可以设置过期时间。浏览器根据缓存策略判断该资源是否应该缓存以及会根据大小判断缓存到内存中还是硬盘中，当再次发送请求时，会去检查这两个缓存位置，如果命中则返回，没有命中则向服务器发送请求。协商缓存是当缓存过期或者资源发生变化时，浏览器会向服务器发送请求，在http响应头中加入Last-Modified和ETag字段，根据这两个字段来判断是否返回新的资源还是304资源未发生改变状态码。浏览器还有其他缓存策略，比如service worker，localStorage，cdn。

虚拟dom了解吗？

这是前端框架中一个重要的特性，他主要是通过对比虚拟dom和真实dom的差异，然后将差异部分应用到真实dom，从而减少操作真实dom的一个操作，它提高了页面渲染的性能。而且他简化了开发，提高了开发效率，我们不用再关注如何操作dom元素，只需关注业务数据的开发。

vue3的diff算法

vue3的diff算法主要是用于如何比较虚拟dom和真实dom之间的差异的一个算法，相比vue2的diff算法，vue3的diff算法做了一个优化。首先静态标记优化，他会标记出哪些那些节点是静态的，再做diff比较时直接跳过这些节点。使用标志位优化更新，每个虚拟节点都有一个PatchFlag，用于指示该节点需要更新的部分，更进一步缩小更新范围。快速路径优化，相同节点比较其属性和子节点，不同则直接替换，Vue 3 在列表 diff 中采用双端比较法，通过对新旧子节点列表的头尾进行快速比较，尽早确定哪些节点需要更新或移动。更智能的列表diff算法，vue3采用最长递增子序列的算法来计算节点需要移动的最小操作次数，尽可能的减少dom操作。

你遇到哪些内存泄漏问题？

对象的引用但是后续不再使用它了，垃圾回收机制无法对其所占的内存进行回收。

闭包的大量出现。

事件监听器，setTimeout或者setInterval未及时进行清除。

对dom元素的引用未及时清除。

可以使用浏览器的开发者工具来定位内存泄漏问题。

路由缓存的优缺点

在vue中路由缓存主要是通过Keep-alive来实现的。它主要的优点是减少了组件加载的时间，不需要重新加载，性能提高了，用户体验变得更好了。缺点是当缓存过多时，会占用较高的内存，而且当组件或者路由资源发生改变时，缓存可能没有及时更新，用户看到的依然还是旧数据，造成数据不同步问题。

tcp的三次握手和四次挥手

三次握手和四次挥手是tcp/IP协议中的两个重要阶段，它保证了数据的安全可靠的传输，他分别指的是建立连接和释放连接的过程。三次握手的主要过程是客户端向服务端发送一个报文，服务端在接收到这个报文后将这个报文加一并且将自己的报文一并返回给客户端，客户端在接收到这两个报文之后将服务端的报文加一返回给服务端，这样连接就建立完成了。四次挥手是指客户端发送一个报文给服务端，服务端收到这个报文之后加一返回给客户端，当服务端数据传输完毕后，服务端会再次发送一个自己的报文给客户端，客户端收到这个报文之后加一返回给服务端，这样就确保了连接的断开。

请你聊聊WebSocket

websocket是建立在单个tcp连接上的全双工通信协议。它支持客户端在发送消息的同时服务端也能发送消息。它主要的特点是全双工通信，建立在tcp协议上，无同源策略限制。他主要的应用的场景是需要实时交互的场景，比如实时聊天，实时多人游戏等。

路由的两种模式

分别是哈希模式和history模式，哈希模式它不需要服务器的支持，而是通过监听hasChange事件来进行路由导航。他的格式和history不一样，会在地址栏有一个#号，它不利于搜索引擎的seo优化。history模式就没有#号，而且有利于搜索引擎优化，书写美观。但是它需要服务器的配置以保证每个URL地址都有相应的页面。

结尾

预祝各位在秋招都能找到合适的工作。