前言
首先先介绍下自己,本人本科,是个双非一本学校,在读大三,想着在春招搞一个好点公司实习的,可以有点工作经验,在去面试大厂。假如你也想去和我一样的想法,在准备春招,欢迎加我的微信DJH000002
,我们可以互相鼓励,分享信息,模拟面试。共读源码,齐刷算法,手撕面经,来吧,朋友们,欢迎大家点赞🤞、收藏📌,关注➕,感谢!
1.面试第一个流程,介绍一下自己
这个是重头戏,这里面有公式:我是谁+从哪里来+我做过什么+有什么样成绩+为什么能够胜任z
面试官您好,我叫戴俊辉,东华理工大学25届网络网络专业大三在读,想来XXXX参加前端实习生职位的面试。低年级的时候,跟着学长一起在B站学习,奖学金也拿了点。个人比较喜欢前端,chatgpt火了后,又对AIGC非常感兴趣,所以学习了python、prompt enginneering,会看一下这个相关的视频的视频,平时写代码会用一些AI Copilot工具提升编程效率仔细读过《你不知道的JavaScript》,并在掘金上写过JS基础和底层相关系列文章,热爱技术分享,掘金LV4。平时主要使用vue,熟悉全家桶开发,看过一点点源码,未来会持续学习
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.事件循环机制
在这个面试官有好多的都问了这个问题
"精解 JavaScript 中的 Event Loop:微任务、宏任务全掌握"
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)是两种常见的优化高频触发事件的技术,常用于处理如窗口大小调整、滚动、键盘输入等事件。
防抖举个例子 你有一个点击事件就能输出一个东西,但是你一直点击,它不会一直给你输出 在点击完,你设定的时间就会输出
xml
<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
Pinia 是一个专为 Vue 3 设计的 Store。它是在 Vue 3 响应式 API 的基础上构建的,旨在提供一种轻量、灵活且直观的状态管理解决方案。与传统的 Vuex 不同,Pinia 不依赖于全局对象,而是通过创建独立的 store 实例来管理状态。state
、getter
和 action
是 Pinia 的三个重要概念。
使用$patch
方法
使用$patch
方法可以修改一个或多个状态
vbnet
import {store} form './store'
let storeA = store()
storeA.$patch({
msg:'hello juejin',
name:'djh'
})
在action中进行修改
与Vuex的actions
不同。Pinia中的action即可以是同步也可以异步,由于Pinia没有mutations
所以工作交给了 actions
javascript
export const store = defineStore('store',{
state:()=>{
return{
msg:'hello pinia',
name:'djh'
}
},
actions:{
changeMsg(data){
this.msg=data
}
}
})
在组件中调用changMsg
方法,而不是用dispatch
进行分发
vbnet
import {store} form './store'
let storeA = store()
storeA.changMsg({
msg:'hello juejin',
name:'djh'
})
重置state
使用选项式api时,可以调用store的$reset
方法将state重置为初始值
javascript
import {store} form './store'
let storeA = store()
store.`$reset`
11.事件代理
- 事件委托 (多个子容器需要绑定相同的事件)
xml
<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>
如觉得本文对你有帮助的话,欢迎点赞❤❤❤,写作不易,持续输出的背后是无数个日夜的积累,您的点赞是持续写作的动力,感谢支持!