前言

首先先介绍下自己，本人本科，是个双非一本学校，在读大三，想着在春招搞一个好点公司实习的，可以有点工作经验，在去面试大厂。假如你也想去和我一样的想法，在准备春招，欢迎加我的微信DJH000002,我们可以互相鼓励，分享信息，模拟面试。共读源码，齐刷算法，手撕面经，来吧，朋友们，欢迎大家点赞🤞、收藏📌，关注➕，感谢！

1.面试第一个流程，介绍一下自己

这个是重头戏，这里面有公式：我是谁+从哪里来+我做过什么+有什么样成绩+为什么能够胜任z

2.说说自己项目里面的难点和你是怎么样去解决的

这个每个人的项目都不一样，在这里我就不做多介绍了 ，这个要自己总结一下能说，自己可以写成一篇文章，自己多读几遍，还要去理解自己项目难点的知识点，还要衍生的知识点，这样面试官问这些问题你可以一一回答出来

3. 说说怎么样是JWT生成token

我就要开始说说JWT是什么

JSON Web Token（简称 JWT）是目前最流行的跨域认证解决方案。 是一种认证授权机制。

token是什么- 访问资源接口（API）时所需要的资源凭证， 简单 token 的组成：  uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token 的前几位以哈希算法压缩成的一定长度的十六进制字符串）

**JWT 认证流程：**

• 用户输入用户名/密码登录，服务端认证成功后，会返回给客户端一个 JWT
• 客户端将 token 保存到本地（通常使用 localstorage，也可以使用 cookie）
• 当用户希望访问一个受保护的路由或者资源的时候，需要请求头的 Authorization 字段中使用Bearer 模式添加 JWT， 这个问题一问完一定会问 浏览器的存储方式有几种 我就不在这里多说了 阮一峰老师 JSON Web Token 入门教程

4 浏览器的存储方式有几种

有这几种 Cookie，SessionStorage，LocalStorage cookie是一种非常具体的东西，指的是浏览器里面能永久存储的一种数据。跟服务器没啥关系，只是浏览器实现一种数据存储的功能。他是由服务器生成，发送给浏览器把cooike以KV形式存储到某个目录下的文件中，下次发送请求把它全部发送给服务器

5.vue开发的优点

vue是mvvm框架：可以把一个大的html网页分成不同的组件去维护，每一个组件中都是数据驱动。所以总结一下vue优点： 1、spa单页面应用开发更加方便。2、数据驱动让我们更加关注数据层，更加关注数据结构。3、mvvm的模式让中大型项目更加好维护

6. http缓存

http缓存分为两种缓存，分别是强制缓存和协商缓存

强制缓存，也称为强缓存，是指浏览器在向服务器请求数据时，首先会判断该数据是否存在于缓存中，并且是否过期。如果缓存未过期，浏览器将直接从缓存中获取数据，而不会向服务器发起请求，这大大提高了页面的访问速度。强制缓存主要通过Expires和Cache-Control这两个header属性进行控制。Expires的值是一个HTTP日期，浏览器会根据系统时间和Expires的值进行比较，如果系统时间未超过Expires的值，则缓存有效。而Cache-Control则通过设置其值来控制缓存的行为，例如max-age可以指定缓存的有效期。

协商缓存，也称为对比缓存，是指浏览器在向服务器请求数据时，会先发送一个请求头，服务器会根据这个请求头中的某些参数（如Last-Modified和ETag）来判断该资源是否可以使用缓存。如果资源没有更新，服务器将返回304状态码，表示资源未修改，浏览器可以直接从缓存中获取数据。否则，浏览器将重新获取该资源并更新缓存。

总的来说，强制缓存和协商缓存的主要区别在于：强制缓存不需要向服务器发送请求，直接从缓存中读取资源；而协商缓存则需要向服务器发送请求，并根据服务器的响应来决定是否从缓存中读取资源。这两种缓存机制共同构成了HTTP的缓存体系，有效地提升了网页的加载速度和用户体验。

7.事件循环机制

在这个面试官有好多的都问了这个问题

8. vue的生命周期

分别有四阶段 ： beforeCreate（创建前）：数据观测和初始化事件还未开始，不能访问data.computed,watch,methods，上的数据

create(创建后) ： 实例创建完成，可以访问data.computed,watch,methods上的数据方法，但此时渲染节点还未

挂载前后：

• beforeMount（挂载前）: Vue实例还未挂在到页面HTML上，此时可以发起服务器请求

• mounted（挂载后）:Vue实例已经挂载完毕，可以操作DOM 更新前后：

• beforeUpdate（更新前）: 数据更新之前调用，还未渲染页面

• updated（更新后）:DOM重新渲染，此时数据和界面都是新的。 销毁前后：

• beforeDestorye（销毁前）:实例销毁前调用，这时候能够获取到this

• destoryed（销毁后）:实例销毁后调用，实例完全被销毁。

9. 防抖节流

防抖（debounce）和节流（throttle）是两种常见的优化高频触发事件的技术，常用于处理如窗口大小调整、滚动、键盘输入等事件。

防抖举个例子 你有一个点击事件就能输出一个东西，但是你一直点击，它不会一直给你输出 在点击完，你设定的时间就会输出

 <button id="btn">提交</button>

    <script>
        let btn = document.getElementById('btn')
        btn.addEventListener('click', debounce(handle, 1000))
        function handle() {
            console.log('提交了', this);
        }
        function debounce(fn, wait) {
            let timer = null
            return function (...args) { // this === btn
                // 销毁上一次的定时器
                clearTimeout(timer)

                timer = setTimeout(() => {
                    fn.call(this, ...args)
                }, wait)
            }

        }
    </script>

节流是一段时间内发生事件，就跟我们打王者，一个技能用完之后，有一个cd cd完了 才能使用技能

10 Pinia

使用$patch方法

使用$patch方法可以修改一个或多个状态

在action中进行修改

与Vuex的actions不同。Pinia中的action即可以是同步也可以异步，由于Pinia没有mutations所以工作交给了 actions

export const store = defineStore('store',{
 state:()=>{
  return{
       msg:'hello pinia',
       name:'djh'
  }
 },
  actions:{
      changeMsg(data){
         this.msg=data
      }
  }
})

在组件中调用changMsg方法，而不是用dispatch进行分发

重置state

使用选项式api时，可以调用store的$reset方法将state重置为初始值

import {store} form './store'
let storeA = store()
store.`$reset`

11.事件代理

• 事件委托 （多个子容器需要绑定相同的事件）

    <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
     </ul>
      <script>
            // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点    
            // 利用这个原理， 把事件加到父元素上， 触发的是父元素的点击，
            然后利用事件冒泡影响每一个子节点
            let ul = document.querySelector('ul')
            ul.addEventListener('click', function (e) {
                console.log(e.target.innerHTML);
            })
        </script>

如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！