2024前端面试题总结，2024年最新字节跳动现场面试

Vue的生命周期

• 创建、挂载、更新、卸载

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

beforecreate : 可以在这加个loading事件，在加载实例时触发

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted : 挂载元素，获取到DOM节点

updated : 如果对数据统一处理，在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框

nextTick : 更新数据后立即操作dom

Vue和jQuery的区别

• jQuery是通过选择器操作dom对象，进行赋值、取值、事件绑定等操作；

• vue则是通过vue对象将数据和view分离，不需要引用dom对象，使用MVVM。

• mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

Vue中的拦截器

• 对特定的http请求或响应消息或请求头进行验证，拦截不合法的http交互以保证web环境的安全。

• 分为两种：路由拦截、请求拦截

Vue的双向数据绑定原理

• 1.核心点: Object.defineProperty 2.默认 Vue 在初始化数据时，会给 data 中的属性使用 Object.defineProperty 重新定义所有属 性,当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通 知相关依赖进行更新操作。

Vue如何做的响应式

• “响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

• Vue 的响应式，核心机制是 观察者模式。

数据是被观察的一方，发生改变时，通知所有的观察者，这样观察者可以做出响应

• 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

ajax请求放在哪个生命周期中

• 在created的时候，视图中的 dom 并没有渲染出来，所以此时如果直接去操 dom 节点，无法找到相 关的元素

• 在mounted中，由于此时 dom 已经渲染出来了，所以可以直接操作 dom 节点

• 一般情况下都放到 mounted 中,保证逻辑的统一性,因为生命周期是同步执行的， ajax 是异步执行的，服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放到created中

什么是webpack

• Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

entry: 入口，定义整个编译过程的起点

output: 输出，定义整个编译过程的终点

module: 定义模块module的处理方式

plugins：插件，对编译完成后的内容进行二度加工

resolve.alias 定义模块的别名

Vue是如何解析模板的

• 首先模板最终必须转换成js代码，因为：

第一个模板有逻辑，有v-if,v-for。必须用js才能实现（图灵完备的语言）

第二个模板要转化为html渲染页面，必须用js才能实现

因此，模板最终要转换成一个js函数（render函数，也就是渲染函数）这个render函数返回vode对象，后面其他函数（update）将vnode渲染成html。

Vue的常用指令

• v-if：判断是否隐藏；v-for：数据循环；v-bind:class：绑定一个属性；v-model：实现双向绑定

v-if和v-show的区别

• v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏

• v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

v-for中key的作用

• 当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

v-if和v-for能不能同时使用

• 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

计算属性跟侦听器的区别用途

• 计算属性用来声明式的描述一个值依赖了其他的值。

• watch监听自定义的变量，当变量的值发生变化时，调用对应的方法

Vue中的delete和vue.delete的区别

• delete只是把删除的元素变成了empty / undefined其他的元素的键值还是不变。

• Vue.delete直接删除了数据，改变了数组的键值。

VueX的作用

• （1）vuex是什么？怎么使用？哪种功能场景使用它？vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

• （2）vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

vuex的State特性

A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data

B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

• vuex的Getter特性

A、getters 可以对State进行计算操作，它就是Store的计算属性

B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用

C、 如果一个状态只在一个组件内使用，是可以不用getters

vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

• （3）不用Vuex会带来什么问题？

可维护性会下降，想修改数据要维护三个地方；

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

Vue中组件通讯

• 父组件与子组件传值

父组件通过标签上面定义传值

子组件通过props方法接受数据

• 子组件向父组件传递数据

子组件通过$emit方法传递参数

Vue中的组件缓存机制

• keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

• Props

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例。

• 生命周期函数

1. activated

在 keep-alive 组件激活时调用

该钩子函数在服务器端渲染期间不被调用

2. deactivated

在 keep-alive 组件停用时调用

该钩子在服务器端渲染期间不被调用

• 被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

• 用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

• 注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。

route和router的区别

v-if 和 v-show 的区别

• v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏

• v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

网络请求

ajax是什么

• ajax 即 “Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的技术。早期只有同步的方式，多个请求，只能顺序执行，只能等待执行。有了ajax异步技术，可以无需等待上一个请求执行完成，就可以直接发起请求。服务端返回后，ajax通过回调技术通知客户端程序，把响应的结果传递给用户事先写好的回调函数。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页进行局部更新，提升网页的效率，用户无需等待页面的刷新，嗖的一下内容就变化了。改变原有整个页面刷新，造成页面晃眼的现象。所以这项技术一出现，就得到业界的推崇。

ajax请求时get和post的区别？

• get：从服务器上获取数据，传送数据量小，安全性低，请求会被缓存，缓存是针对URL进行缓存的，get请求参数直接加在URL地址后面，一种参数组合就会产生一种URL的缓存，重复的请求结果是相同的；

• post：向服务器发送数据；传送数据量大，请求不会被缓存，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全，所以涉及用户隐私的数据都要用post传送；

• http状态码

• 什么叫跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的

为什么会出现跨域（同源策略）

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源

如何解决跨域问题

1. 通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

2. document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

3. location.hash + iframe

实现原理： a欲与b跨域相互通信，通过中间页c来实现。

三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接 js访问来通信。 具体实现：A域：a.html -

B域：b.html ->

A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

4. window.name + iframe跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

5. postMessage跨域

6. 跨域资源共享（CORS）

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

MC92Mi0yNDAwODRhMGFlNzQwNmUzMWI4NjM0NTk3ZTFjOWQwN19oZC5qcGc?x-oss-process=image/format,png)

webpack的loader到底是什么样的？两小时带你写一个自己loader

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-AWsvIu1S-1712911334199)]