2021前端社招面试题总结

Map

action里使用commit方法触发mutations里改变state的方法

getters获取state状态

Vuex 数据更新流程：

通过 mapAction 异步提交事件到 action,action 通过 commit 提交到 mutation,然后 mutation会修改 state 中的值，getters 获取state 状态，然后页面中引入 getters 获取更新状态

Mutation 必须是同步的，如果需要异步就要使用 action

action 中使用 this. s t o r e . c o m m i t 进 行 同 步 修 改 ， 使 用 t h i s . store.commit 进行同步修改，使用 this. store.commit进行同步修改，使用this.store.dispatch 进行异步修改

mutation 与 action 区别：

Mutation 第一个参数是 state，是改变状态，里边是同步操作。action 是提交mutation,里边可以异步操作

调用 mutation ：

1.引入 mapMutations函数，

methods:{

…mapMutations([‘add’,‘addN’]);

}

this.add()

2.触发 action

Vue渲染过程：

---

1. new Vue，执行初始化

2. 挂载$mount方法，通过自定义Render方法、template、el等生成Render函数

3. 通过Watcher监听数据的变化

4. 当数据发生变化时，Render函数执行生成VNode对象

5. 通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

Vue-router如何实现无刷新跳转

---

前端路由分为两种模式，分别是hash模式和history模式

hash模式

原理实现是通过监听hashchange的改变进行无刷新渲染

history模式

原理通过调用history.pushState（无刷新插入历史状态，更新url）更新url，并且监听popstate回退键事件进行渲染

vue dom diff算法：

---

先比较dom树，如果有组件不存在了直接销毁；然后比较组件，最后比较element节点，返回一个patch节点包含两个虚拟dom的差异进行渲染

箭头函数与普通函数区别

---

1.写法不一样

2.箭头函数都没有名字

3.this指向不一样，普通 函数作用域为调用它的对象，箭头函数为当前上下文（如声明在全局那么this的作用域即为上下文）

4.箭头函数不能使用New 实例化

算法时间复杂度：

---

1.没有循环等复杂结构的都是O（1）

2.有一层循环，算法的性能会随着输入数据的大小变化而线性变化的是O(n)

3.有多层循环，算法性能随着数据呈现数次增长，算法性能为O(n2)、O(n3)、O(n^4)

call、apply、bind含义与区别

---

http 状态码

---

204 无内容，服务器成功处理但未返回内容

205 重置内容，提醒用户刷新

301 页面永久重定向

302页面临时重定向

303 查看其他地址，使用 get post

304该资源未更新

400客户端请求语法错误

404找不到服务器

500服务器内部错误

前端缓存

---

分为强制缓存和协商缓存，浏览器读取缓存过程为内存-硬盘-服务器缓存

1.强制缓存：Cache-control和expries

Expries 是对比客户端和服务器时间差异，比较缓存是否过期，值为一个时间绝对值

Cache-control相对时间，如300S

2.协商缓存

强制缓存失效后，浏览器携带缓存标识请求服务器，由服务器缓存标识决定是否使用缓存

Last-modified/If-modified-since上次请求返回的最后被修改时间,检查服务器资源是否被更新

Etag/If-node-since返回校验码，etag 保证每个资源都是唯一的

react 生命周期

---

vue keep-alive

---

vue event-bus

---

Nuxt 是如何运行、渲染的

---

react、vue 如何选型

---

React 适用于大型工程、多人协作工作，和 ts 配合更好

node、vue、webpack 是什么关系

---

Vue 本身不依赖webpack，但 vue-cli 里边的webpack环境 依赖 node 开发出来的，webpack 是依赖 node 的

移动端跨平台使用 react native

javascript 常见设计模式

---

单例模式

工厂模式

发布订阅模式

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

---

单例模式

工厂模式

发布订阅模式

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

[外链图片转存中…(img-n6wIxRNB-1725985298957)]

[外链图片转存中…(img-LuhX6AWu-1725985298959)]