2024年Web前端最全【面试题】前端面试十五问，2024年最新web前端工程师面试题目和答案大全_web前端面试

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

es6新增symbol 数据类型

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型，不能与其他类型的值进行运算，会报错，它可以作为对象属性名。只有字符串和 symbol 类型才能用作对象属性名。没有两个symbol 的值是相等的。

v-model原理

父组件给子组件标签添加v-model 就是给子组件绑定了value属性，然后子组件内用prop创建value属性可以拿到父组件传递下来的值，名字必须是value，子组件内部更改value的时候通过$emit派发一个input事件并携带最新的值，然后v-model会监听input事件，并把最新的值同步赋值到v-modle绑定的变量上面

vue响应式原理

vue2中使用了ES5里面的Object.defineProperty方法，给对应data中的数据的每个值添加了set和get方法，当值被修改时，就会触发对应的set方法，set方法里会通知对应的watcher，watcher接收后将触发render函数，重新渲染数据。

• get 值是一个函数，当属性被访问时，会触发 get 函数
• set 值同样是一个函数，当属性被赋值时，会触发 set 函数

计算属性和监听属性

当我们定义一个计算属性的时候，计算属性是一个函数，最后函数返回的结果就是计算属性得到的结果。 当我们去第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算的结果缓存起来。 后续当我们再去使用计算属性的时候，如果计算属性中使用到的数据没有发生变化，那么就会直接读取缓存的结果，不会重新计算。 常用于惰性求值

watch主要监听里面的属性，当属性改变时，就调用不同的方法，只会监听数据的值是否发生改变，而不会监听地址的变化

路由的钩子

全局路由钩子

• beforeEach（全局前置钩子），意思是在每次每一个路由改变的时候都要执行一遍
• afterEach（全局后置钩子） beforeEach是在页面加载之前的，而afterEach是在页面加载之后的，所以这些钩子是不会接受next函数，也不会改变导航本身

单个路由钩子

beforeEnter 可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是一样的

组件路由钩子

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

1. 清除组件中的定时器
2. 当页面有未关闭的窗口，或未保存的内容时，阻止页面跳转
3. 保存相关内容到Vuex和Session中

vue中的data 为什么是个函数？

• Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；
• data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。
• 根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
• 组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

Token怎么存

npm i js-cookie //安装
在main.js引用
import cookie from 'js-cookie';\
Vue.prototype.$cookie = cookie; 
var $cookie = this.$cookie;
//赋值
this.$cookie.set('token',$result.data.token)
//调用
headers:{
       Authorization:this.$cookie.get('token')
}
//删除token
this.\$cookie.remove("token")

localStorage.setItem("key\_token",result.data.token); // localStorage方法赋值
localStorage.removeItem('token');  //删除localStorage指定键对应的值
localStorage.clear('token'); // 删除localStorage所有的的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

前端有几种缓存方式？

cookiec

当在客户端的浏览器上设置Cookie时，它可以持续数天，数月甚至数年。这样可以轻松保存用户首选项和访问信息 不需要任何服务器资源，并存储在用户的计算机上，因此不会给服务器带来额外的负担。 确实非常小，它的大小限制为4KB左右,不能储存大数据且不易读取

localStorage

5M大小 只能存储字符串格式的数据，所以最好在每次存储时把数据转换成json格式， 取出的时候再转换回来 生命周期是永久的， 除非主动删除数据，否则数据永远不会消失

sessionStorage

但当页面关闭后，sessionStorage 中的数据就会被清空。 indexdb、 50mb 允许储存大量数据，提供查找接口，支持异步操作，还能建立索引。indexDB缺点是：不支持DO操作；不能跨域。

数据请求方面

• 重输入url到页面展示经历那些过程
• 输入url地址
• 应用层进行DNS解析
• 应用层生成HTTP请求报文
• 传输层建立TCP连接
• 网络层使用IP协议来选择路线
• 数据链路层实现网络相邻节点间可靠的数据通信
• 物理层传输数据
• 服务器处理反向传输
• 服务器返回一个 HTTP 响应
• 浏览器渲染

router和route的区别

• router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，包含了所有的路由包含了许多关键的对象和属性。
• route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• [外链图片转存中…(img-iklrVVvt-1715393492151)]