一些关于前端的面试问题（分为三部分）

最新推荐文章于 2023-07-26 08:00:07 发布

一只小菜狗的前端路

最新推荐文章于 2023-07-26 08:00:07 发布

阅读量757

点赞数 1

文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/m0_37625557/article/details/108998731

版权

VUE部分

MVVM是什么？

即Model-View-ViewModel
M - Model，Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来
VM - ViewModel，ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View

vue的生命周期说一下？

Vue 的生命周期指的是组件从创建到销毁的一系列的过程，被称为 Vue 的生命周期，包括初始化–挂载–更新–销毁过程，对应的钩子函数：
beforeCreate（初始化界面前）
created（初始化界面后）
beforeMount（挂载前）
mounted（挂载后）
beforeUpdate（更新数据前）
updated（更新数据后）
beforeDestroy（卸载组件前）
destroyed（卸载组件后）

在哪个阶段可以获取到Dom？

mounted

vue组件间的通讯方式有哪些？父子、隔代、兄弟组件通信。

props 和 $e m i t 、$ refs、$parent 和 $children、vuex、vue-router传参等等

父组件到子组件所触发的生命周期？

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

vue中常见的指令有哪些？

**v-if v-show v-bind v-for v-html v-text v-on v-model **

v-if和v-show的区别？

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

谈谈你对vuex的理解？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
主要包括以下几个模块：
State（基本数据）：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter（从基本数据派生的数据）：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation（提交更改数据的方法，同步）：是唯一更改 store 中状态的方法，且必须是同步函数。
Action（像一个装饰器，包裹mutations，使之可以异步）：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module（模块化vuex）：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

vue的双向数据绑定原理？

通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

vue3.0的数据绑定了解过吗？然后继续问，vue3.0和2.x的区别？

vue3.0 的响应式数据是通过es6 的Proxy来实现的

computed和watch区别？method

通俗来讲，
computed是在HTML DOM加载后马上执行的，如赋值
而methods则必须要有一定的触发条件才能执行，如点击事件；
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

computed：计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算，computed是同步的
watch：更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。

nextTick知道吗？

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

`webpack` 的运行流程（初始化、编译、输出）

初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
确定入口：根据配置中的 entry 找出所有的入口文件
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

vue-router使用过吗？说一下hash和history模式区别？

url 展示上，hash 模式有“#”，history 模式没有
刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由。
兼容性。hash 可以支持低版本浏览器和 IE。

vue-router的路由守卫（beforeEach和afterEach）

beforeEach常用于登陆验证

router.beforeEach((to, from, next) => {
  // ...
})

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。

CSS部分

css选择器有哪几种？

css中有很多选择器，比如类别选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等，常见的选择器有id选择器、类选择器、标签选择器三大类。

id选择器：可以为标有特定 ID 的 HTML 元素指定特定的样式。根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。

标签选择器：一个完整的HTML页面是由很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。

类选择器：如果有很多个元素都会应用这个元素，那得一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”，这时，定义一个类，把样式应用到所有的元素当中。

后代选择器：也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开，对于多层祖先后代关系，可以有多个空格加以分开。

子选择器：子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。

权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

position三种属性的区别

absolute:此属性定义一个横向和纵向的属性就可以控制布置的文本或图片相对于浏览器整个页面的上方或者下方和左方或者右方的距离。

relative:此属性会相对于一个正常的标题，对其进行相对位置的移动，可用left，right等对其位置进行移动，也可为负值。

fixed:此属性和absolute有相似之处，也是相对于浏览器的各种方向对其进行布局，与之不同的是当页面向下或者向右移动的时候，它相对于浏览器的页面距离仍然保持不变。

fixed与absolute在有无滚动条时有区别，有滚动条时fixed不会随着滚动条移动而移动

在没设置宽高的情况下水平垂直居中

1.position:absolute;

left:50%;top:50%;

transform:translate(-50%,-50%);

display:flex; 设置.wrap为弹性布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

px，em，rem，vw，vh区别

px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的

em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位，如果没设置则一般为16px

vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100

**vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100**

CSS盒模型

盒模型的组成，由里向外content，padding，border，margin。

盒模型有两种标准，一个是标准模型，一个是IE模型。

标准模型盒子总宽度为：width+border+padding

IE模型盒子总宽度为：width

什么是BFC

BFC全称是Block Formatting Context，即块格式化上下文。

BFC的创建方法（overflow:hidden`、`float:left/right`、`position:absolute常见）

根元素或其它包含它的元素；
浮动 (元素的float不为none)；
绝对定位元素 (元素的position为absolute或fixed)；
行内块inline-blocks(元素的 display: inline-block)；
表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
overflow的值不为visible的元素；
弹性盒 flex boxes (元素的display: flex或inline-flex)；

js部分

js的数据类型有哪些？

原始数据类型：Null、Undefined、Boolean、String、Number、Symbol(ES6新增)
引用数据类型：Object 为引用类型，包括：Array, Function, Date, RegExp

如何判断数据类型？

typeof和instanceof

typeof和instanceof的区别？null为什么会判断为Object？

typeof原理：不同的对象在底层都表示为二进制，在Javascript中二进制前（低）三位存储其类型信息。
在Javascript中二进制前（低）三位都为0的话会被判断为Object类型，null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回"object"。
instanceof：用来比较一个对象是否为某一个构造函数的实例。只能用于对象，不适用原始类型的值。

如何判断一个数组？除了instanceof说出几种其他方式。

toString、isArray、constructor

说一下事件捕获和事件冒泡？出现频率：高！

事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点。
时间捕获：与事件冒泡相反
如何阻止事件冒泡：stopPropagation()、preventDefault()、@click.xxx.stop

js实现继承的方式？

原型和原型链

原型链继承、构造继承、实例继承、拷贝继承、组合继承、寄生组合继承

深拷贝知道吗？说一下具体实现？

浅拷贝比较简单，使用Object.assign，对于二维数组的深拷贝可以使用JSON.parse(JSON.stringify(arr))

为什么会产生跨域，如何解决

协议，域名，端口号不相同的资源之间相互通信，就会产生跨域问题。

处于安全考虑，浏览器的同源策略限制了不同域之间相互通信。

JSONP，CORS，Server Proxy 跨域解决方式的应用场景都是用于前后端之间的数据通信，其他跨域解决方案主要是解决窗口页面之间的数据通信。

JSONP 只支持 GET 方式的 HTTP 请求。

CORS 跨域资源请求需要后端支持。

Server Proxy 直接让后端代理发送请求。

什么是闭包

函数执行后返回结果是一个内部函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量，即形成了闭包。

可以在内部函数访问到外部函数作用域。使用闭包，一可以读取函数中的变量，二可以将函数中的变量存储在内存中，保护变量不被污染。而正因闭包会把函数中的变量值存储在内存中，会对内存有消耗，所以不能滥用闭包，否则会影响网页性能，造成内存泄漏。当不需要使用闭包时，要及时释放内存，可将内层函数对象的变量赋值为null。

闭包原理

函数执行分成两个阶段(预编译阶段和执行阶段)。

在预编译阶段，如果发现内部函数使用了外部函数的变量，则会在内存中创建一个“闭包”对象并保存对应变量值，如果已存在“闭包”，则只需要增加对应属性值即可。
执行完后，函数执行上下文会被销毁，函数对“闭包”对象的引用也会被销毁，但其内部函数还持用该“闭包”的引用，所以内部函数可以继续使用“外部函数”中的变量

利用了函数作用域链的特性，一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中，函数执行完毕，其执行作用域链销毁，但因内部函数的作用域链仍然在引用这个活动对象，所以其活动对象不会被销毁，直到内部函数被烧毁后才被销毁。

前端的安全问题了解过吗？csrf和xss

比较常见的是csrf和xss
csrf：跨站请求伪造，如何防止：Referer、Token、服务端增加多重安全校验
xss：跨站脚本攻击，如何防止：输入验证、定义域名白名单

普通函数和箭头函数的区别？

this区别

Cookie 和 Session 关系和区别

cookie数据存放在客户的浏览器（客户端）上，session数据放在服务器上，但是服务端的session的实现对客户端的cookie有依赖关系的；

cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session；

session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用COOKIE；

单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能超过3K；

浏览器的回流和重绘什么时候发生吗？

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
页面一开始渲染的时候（这肯定避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

注意：回流一定会触发重绘，而重绘不一定会回流

http状态码

2XX(Success 成功状态码)

3XX(Redirection 重定向状态码)

4XX(Client Error 客户端错误状态码)

5XX(Server Error 服务器错误状态码)

理解异步函数async和await的作用

即使我们用的是 Promise，此函数中代码也可以使我们以同步的方式执行。原始延续传递风格异步API创建了 “callback-heck” 每个异步上下文具有多层嵌套回调 Promise 对此进行了一些清理，使我们可以将事情限制在单个级别的回调中 async/await 组合是它的下一个改进——使用 await，我们可以无需使用回调就能够得到异步工作的结果。