2024高频前端面试题（含答案）(1)

11、vuex有哪几种属性，怎么使用？哪种功能场景使用它？

vuex是一个专门为vue.js开发的状态管理模式，每一个vuex应用核心就是store(仓库)。store基本上就是一个容器，它包含着你的应用中大部分的state(状态)
vuex的状态存储是响应式的，当 vue组件中store中读取状态时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变store中的状态的唯一途径就是显示 commit(提交)mutation，这样使得我们可以方便地跟踪每一个状态的变化。
State: 定义了应用状态的数据结构，可以在这里设置默认的初始状态
Getter: 允许组件从Stroe中获取数据， mapGetters辅助函数仅仅是将store中的getter映射到计算属性。
Mutation: 唯一更改store中状态的方法，且必须是同步函数。
Action: 用于提交muatation, 而不是直接变更状态，可以包含任意异步操作。
Module: modules，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理；如果所有的状态或者方法都写在一个store里面，将会变得非常臃肿，难以维护。

12、vuex中state存储的数据如果页面刷新此时数据还会有吗?（刷新之后销毁了）

13、v-bind和v-model的区别， v-model原理知道吗？

//语法糖写法
<input type="text" v-model="name" >
  
  //还原为以下实例
<input type="text" 
 v-bind:value="name" 
 v-on:input="name=$event.target.value">

v-bind用来绑定数据和属性以及表达式
v-model使用在表单中，实现双向数据绑定的。

14、Vue中的常见指令有那些？

v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot…

15.改变this指向call、apply与bind区别：

前两个可以自动执行，bind不会自动执行，需要手动调用
call、bind与apply区别：前两个都有无数个参数，apply只有两个参数，而且第二个参数为数组

16,vue路由的两种模式

1.hash模式
特点:在url地址上有#号
实现的原理:原生的hasChange事件来实现,来监听hash值的变化
window.onhaschange=function(){}
刷新页面的时候:不会去发送请求,页面不会有任何问题,不需要后端来配合

2.history模式
特点:在url地址上没有#号,比较与hash模式看起来好看一些
实现的原理:利用的是history的api 来实现的 popState() 来实现的
刷新页面的时候:会去发送请求然后会导致页面出现找不到的情况,需要后端来配合解决

17，vue的响应式原理：

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 数据劫持，来劫持各个属性的setter，getter，在数据更新时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），

最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

18.Flex容器属性

1.flex-direction主轴方向（row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。）
2.flex-wrap（nowrap（默认值）：不换行。
wrap：换行。
wrap-reverse：换行，第一行在下方。 ）
3.flex-flow（12简写形式）
4.justify-content项目在主轴上的对齐方式。（flex-start（默认值）：左对齐（即上面页面展示效果）
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。）
5.align-items项目在交叉轴上如何对齐。（lex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。）
6.align-content

19.标准盒模型和怪异盒模型的区别：

怪异盒模型的宽度变小
标准盒大小计算公式：width(content) + padding + border + margin
怪异盒大小的计算公式：width(content + padding + border) + margin

20.vue的插槽（slot）主要分三种：

默认插槽，具名插槽，作用域插槽
vue中的插槽，指的是子组件中提供给父组件使用的一个占位符；
用标签表示，父组件可以在这个占位符中填充任何模板代码，比如HTML、组件等，填充的内容会替换掉子组件的标签（替换占位符）。

21.vue数据的双向绑定

“vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持,在数据变化时发布消息给订阅者,触发相应的监听回调。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;”

22.常用的git命令

git config
用法：git config –global user.name “[name]”
用法：git config –global user.email “[email address]”
git init
用法：git init [repository name]
该命令可用于创建一个新的代码库
git clone
用法：git clone [url]
该命令可用于通过指定的URL获取一个代码库。
git add 添加文件到仓库
git status 查看仓库当前的状态，显示有变更的文件。
git diff 比较文件的不同，即暂存区和工作区的差异。
git commit 提交暂存区到本地仓库。
git reset 回退版本。
git push
用法：git push [variable name] master
该命令可以将主分支上提交的变更发送到远程代码库。

23.数组和字符串的相互转换

使用字符串的 split() 方法可以根据指定的分隔符把字符串切分为数组。
如果使用数组的 join() 方法，可以把数组元素连接为字符串。

24.js 判断数据类型的几种方法

typeof str     // "string" 字符串
typeof num     // "number" 数值
typeof array   // "object" 对象（可以和函数区别开）
// 注意，数组也是一个对象
typeof date    // "object" 对象 
typeof func    // "function" 函数
typeof symbol  // "symbol"

25.toString 方法

把对象直接转换成字符串

26.es6新特性：

1、let 和 const
let 表示申明变量。const 表示申明常量
常量定义了就不能改了。对象除外，因为对象指向的地址没变。
const在申明是必须被赋值。
两者都为块级作用域。
2、模板字符串
3、解构
4、函数的默认值
5、Spread / Rest 操作符，三个点…
6、箭头函数
7、for of
for of遍历的是键值对中的值
for in遍历的是键值对中的键
8、class类，原型链的语法糖表现形式
9、导入导出
导入improt
导出export default
10、promise
Promise 用于更优雅地处理异步请求。
11、async/await
比promise更好的解决了回调地狱
12、Symbol，新的基本类型
13、Set集合
存储任何类型的唯一值，即集合中所保存的元素是不重复的。类数组结构。
let arrNew = new Set(待去重的数组)

27.webpack

1、webpack的作用是什么，谈谈你对它的理解？
现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决Scss，Less……新增样式的扩展写法的编译工作。
所以现代化的前端已经完全依赖于webpack的辅助了。
现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。
react.js+WebPack
vue.js+WebPack
AngluarJS+WebPack
2、webpack的工作原理?
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
3、webpack打包原理
把一切都视为模块：不管是 css、JS、Image 还是 html 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。
按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载
4、webpack的核心概念
Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
output ：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
5、Webpack的基本功能有哪些？
代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化：压缩 JavaScript、CSS、html 代码，压缩合并图片等
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
6、gulp/grunt 与 webpack的区别是什么?
三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。grunt和gulp是基于任务和流（Task、Stream）的。
类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。webpack是基于入口的。
webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。
7、webpack是解决什么问题而生的?
如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱，因为它们存在依赖关系，同时对于ES6+等新的语法，less, sass等CSS预处理都不能很好的解决……，此时就需要一个处理这些问题的工具。

28.MVVM模式

1、MVVM相比较于MVP，将Presenter变成ViewModel，ViewModel可以理解成是View的数据模型和Presenter的合体
2、MVVM中的数据可以实现双向绑定，即View层数据变化则ViewModel中的数据也随之变化，反之ViewModel中的数据变化，则View层数据也随之变化`
注：MVC指的是Model-View-Controller，分别代表着模型层、视图层、控制器。

29.原型链

当js试图得到一个对象的属性时，会先去这个对象的本身去寻找，如果这个对象本身没有找到这个属性，那么js就会去它构造函数的’prototype’属性中去寻找,也就是去’proto‘中寻找，如果’prototype’属性本身中依旧没有找到，’prototype’中依旧有一个‘proto’。

原型可以解决什么问题：
对象共享属性和方法
谁有原型：
函数拥有：prototype
对象拥有：proto
对象查找属性或者方法的顺序：
先在对象本身查找–>构造函数中查找–>对象的原型中查找–>构造函数的原型中查找–>当前原型中查找
原型链的最顶端是null

30.闭包

闭包就是指有权访问另一个函数作用域中的变量的函数
MDN 上面这么说：闭包是一种特殊的对象。
闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。闭包的注意事项
通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止。
我们首先知道闭包有3个特性：
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收
优点:
①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
③匿名自执行函数可以减少内存消耗
闭包的缺点就是常驻内存会增大内存使用量，并且使用不当很容易造成内存泄露。
如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗。

31.Vue和React的区别是什么？

一、核心思想不同
Vue是一个灵活易用的渐进式双向绑定的MVVM框架。
React的核心思想是声明式渲染和组件化、单向数据流，React既不属于MVC也不属于MVVM架构。
注：React的单向数据流指的是数据主要从父节点通过props传递到子节点，
如果顶层某个props改变了，React会重新渲染所有的子节点，但是单向数据流并非单向绑定，
React想要从一个组件去更新另一个组件的状态，需要进行状态提升，即将状态提升到他们最近的
祖先组件中，触发父组件的状态变更，从而影响另一个组件的显示。单向数据流的好处是能够保证
状态改变的可追溯性，假如，父组件维护了一个状态，子组件如果能够随意更改父组件的状态，那
么各组件的状态改变就会变得难以追溯
二、组件写法上不同
Vue的组件写法是通过template的单文件组件格式。
React的组件写法是JSX+inline style，也就是吧HTML和CSS全部写进JavaScript中。
三、Diff算法不同
Diff算法是一种对比算法，主要是对比旧的虚拟DOM和新的虚拟DOM，找出发生更改的节点，并只
更新这些接地那，而不更新未发生变化的节点，从而准确的更新DOM，减少操作真实DOM的次数，
提高性能。
vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删
除重建，但是react则会认为是同类型的节点，只会修改节点属性。
vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次比对的方式，当一个集合只
是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点
移动到最后一个，从这点上来说vue的对比方式更加高效。
四、响应式原理不同
React的响应式原理
React主要是通过setState()方法来更新状态，状态更新之后，组件也会重新渲染。

Vue的响应式原理
vue会遍历data数据对象，使用Object.definedProperty()将每个属性都转换为getter和
setter，每个Vue组件实例都有一个对应的watcher实例，在组件初次渲染的时候会记录组件用到
了那些数据，当数据发生改变的时候，会触发setter方法，并通知所有依赖这个数据的watcher实
例调用update方法去触发组件的compile渲染方法，进行渲染数据。

32. rem的特点：

1、rem的大小是根据html根目录下的字体大小进行计算的。
2、当我们改变根目录下的字体大小的时候，下面字体都改变。
3、rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。

33.http请求过程

浏览器发起请求-> 解析域名得到ip进行TCP连接 ->浏览器发送HTTP请求和头信息发送->服务器对浏览器进行应答，响应头信息和浏览器所需的内容-> 关闭TCP连接或保持-> 浏览器得到数据数据进行操作。

34.前端如何实现跨域？

当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域
出于浏览器的同源策略限制。
同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
1.JSONP原理
利用script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。
但是JSONP请求一定需要对方的服务器做支持才可以。
JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。
缺点是仅支持get方法具有局限性。
2.CORS原理
实现CORS通信的关键是服务器，需要在服务器端做一些小小的改造。
只要服务器实现了CORS接口，就可以跨源通信。
在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。
3.Nginx
浏览器在访问受限时，可通过不受限的代理服务器访问目标站点。
proxy代理是前端用的最多的解决跨域的方法。
即配置一台和浏览器相同端口的服务器，浏览器访问代理服务器，代理服务器向目标服务器发送请求，由于服务器之间不存在跨域问题，代理服务器就可以拿到请求数据，而后因为浏览器和代理服务器端口号一致，不存在跨域问题，因此浏览器不会拦截从代理服务器收到的数据，顺利拿到请求数据。
例如：浏览器端口号8080，目标服务器端口号5000，在vue中配置代理服务器来访问目标服务器

// vue.config.js中配置代理
devServer:{
  proxy:"http://localhost:5000"
}
// 使用代理
axios.get('http://localhost:8080/students').then(
	response => {
		console.log('请求成功了',response.data)
	},
	error => {
		console.log('请求失败了',error.message)
    }
)

35.vue 中的 keep-alive

keep-alive 是 vue 中的内置组件，能够在组件切换过程中将状态保留在内存中，防止重复的渲染 DOM；
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们；
设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated 和 deactivated ）

36.vue.nextTick()方法

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。