前端面试总结

Posted 2022-12-10 iiiLISA

自我检查：

1、 vue有哪些常用的指令
2、 v-if和v-show的区别? v-show 控制的哪个css元素?v-if和v-show初始条件都为false的时候哪个会加载?
3、 3.Vue常用的修饰符? .sync 怎么在子组件触发修改父组件属性的值?具体是$emit哪个事件触发修改? .sync 的原理有了解吗?
4、 v-model的实现原理
5、 Vue双向绑定实现原理，有什么缺陷
6、 数组的方法有哪些?哪些可以改变原数组?
7、 Vue组件通信?
8、 map和forEach的区别? every 和some的区别? filter 和find的区别?
9、 原型链的理解。null 是Object的哪个元素?
10、 new操作符做了什么事情?对象有哪些常用的方法?
11、 Js哪些数据类型? Js 内置对象，判断数据类型方法，typeof 和instanceof的区别? Typeof null返回什么? typeof function返回什么?
12、 Vue看过一些相关的源码吗? computed和method有什么区别?多次调用都会触发吗?
13、 Vue-router有哪几种模式?有了解过原理吗? history 模式的404怎么去解决?它们的事件有没有了解过?
14、 $router和$route的区别，query 和params传参.
15、 Vuex刷新时数据会不会丢失?刷新丢失怎么去处理?
16、 Vuex有哪些属性? mutations 和actions的区别，mutations 为什么是同步?用过vuex的devtools去调试吗?
17、 怎么去修改State中的值?怎么去触发mutations和actions中的方法? Vuex里面actions怎么触发mutations的方法? actions 的形参
18、 浏览器的存储有哪些?三个都可以设置过期时间吗?
19、 浏览器的缓存有哪些?缓存字段哪个是http1.1新增的?优先级?
20、 http和https区别，了解过它们的加密算法吗?
21、 http1.0、http1.1和 http2.0的区别
22、 Css3新增属性有哪些?有哪几种方式控制元素的显示和隐藏? display、 visibility 和opacity的区别?可不可以去操作
23、 对flex布局的理解，怎么设置主轴侧轴对齐，有哪些属性? flex:1 是哪三个属性的缩写?
24、 grid布局有了解过吗?

参考答案：
1、 vue有哪些常用的指令

v-show, v-model, v-for, v-on, v-bind, v-if, v-else, v-once,
v-html（识别html标签）, v-text v-on简写为@，用于监听DOM事件 v-bind简写为：

2、 v-if和v-show的区别? v-show 控制的哪个css元素?v-if和v-show初始条件都为false的时候哪个会加载?

同：都是动态显示DOM元素
异：
（1） 实现方法：v-if是动态的添加和删除DOM元素，v-show是通过控制display样式属性来控制DOM元素的显隐。
（2） 性能消耗：v-if有更高的切换消耗，v-show有更高的初始渲染消耗。 （3） 编译过程：
V-if是惰性的，如果初始条件是false，则什么也不做；只有在第一次为true时，才开始局部编译；；；v-show是在任何条件下都会被编译，然后被缓存，而且DOM元素保留。

3、 Vue常用的修饰符? .sync 怎么在子组件触发修改父组件属性的值?具体是$emit哪个事件触发修改? .sync 的原理有了解吗?

常见的修饰符种类：表单修饰符、事件修饰符、鼠标按键修饰符、键值修饰符、v-bind修饰符。
（1） 表单修饰符：lazy，trim，number
v-model.lazy=“value”；去掉立刻反应的效果，在回车之后才会同步显示数据，输入和获取同时
v-model.trim=“value”；v-model.number=“age”； （2） 事件修饰符 stop, prevent,
self, once, cpature, passive, native v-on:event.stop=”btn()”阻止事件冒泡
@event.once=”btn()”事件只触发一次 @event.prevent=”btn()”阻止事件默认行为
@event.capture事件捕获 @event.self只当事件在该元素本身触发时，触发回调 （3） V-bind指令修饰符：
sync、prop、camel

sync： // 能对props进行一个双向绑定 // 父组件

4、 v-model的实现原理

v-model=v-bind+v-on 给input动态绑定一个value值，利用v-on监听input的值赋给value

5、 Vue双向绑定实现原理，有什么缺陷

Vue采用数据劫持结合发布者-订阅者模式的方法来实现数据的响应式，通过object.defineProperty来劫持数据的getter和setter
缺陷：无法对新添加或删除的属性进行监听、无法监听数组的变化。

6、 数组的方法有哪些?哪些可以改变原数组?

会改变原数组的方法：pop，push，shift（删除并返回数组的第一个元素），sort，reverse，splice（用于插入删除或者替换数组的元素）。
IndexOf（搜索数组中的元素），toString（把数组转换为字符串，并返回结果），join（把数组的所有元素放入一个字符串，参数为分隔符）

7、 Vue组件通信?

（1） props,emit 父组件通过props向子组件传递，子用props接收数据
子向父使用$emit传递数据（自定义事件）this. $emit(“与父一致的自定义事件”,data)
（2） vuex维护公共数据，分为state（统一定义公共数据），mutations（用于修改state中的数据），getters（过滤满足条件的数据），actions（用于处理异步请求）
（3） provide/inject 只能在setup中使用（vue3），实现嵌套组件中的数据传递。
父组件用provide向下传递，不能反向传递 子组件用inject接收父组件传过来的数据

8、 map和forEach的区别? every 和some的区别? filter 和find的区别?

Map和foreach：都是循环遍历数组中的每一项；参数分别是item，index，arr；匿名函数中的this都是指向window；只能遍历数组。不同:map会分配内存空间存储新数组并返回（原数组不发生变化），foreach不会返回数据（foreach允许callback更改原始数组的元素）。
every
和some的区别：every和some都可循环遍历数组，item为当前项，index为当前的索引值，arr为数组本身。Every相当于逻辑与，只有所有参数满足条件时，才会返回true，如果有一个不满足，就会逻辑中断，返回false；some相当于逻辑或，只要有一个参数满足条件就会中断逻辑，返回true，若都不满足，返回false。
find()返回通过测试函数的第一个元素的值，如果没有值满足测试函数，则返回undefined。
filter()方法创建一个包含所有通过测试函数的元素的新数组，如果没有元素满足测试函数，则返回一个空数组。

9、 原型链的理解。null 是Object的哪个元素?

每个对象都会在其内部初始化一个属性，prototype（原型）
当我们访问一个对象的属性时，如果该对象内部没有这个属性，就去prototype里找这个属性，这个prototype又会有自己的prototype，一直找下去。当找到object的prototype的时候，就找到头了。返回undefined。
原型链实现了继承。原型链存在两个问题：
（1） 包含引用类型值的原型属性会被所有实例共享。对象从原型中获得的引用类型属性的属性值实际上是指向堆内存的指针。对象从原型继承到的是这个地址值，但是通过这个地址去修改内存上的引用类型的值。基本类型的值不能被修改。若修改，则只对该实例起作用。
（2） 在创建子类型时，无法向超类型的构造函数中传递参数。 null有属于自己的类型Null，而不属于Object类型。 typeof
null输出为Object。Js底层用二进制表示，Object类型的前三位全为0。而null的全部位均为0，所以会输出Object。

10、 new操作符做了什么事情?对象有哪些常用的方法?

（1） 创建了一个新的对象obj （2） 将对象与构造函数通过原型链连接起来（子对象
.proto=父函数.prototype完成继承） （3） 将构造函数中的this绑定到新建的对象obj上（apply，call）
（4） 返回对象 常用方法： JSON.stringify将对象转化为字符串 JSON.parse将字符串转化为JSON
hasOwnProperty判断对象的自有属性是否存在 assign方法用于对象的合并

注：call方法可以将实参在对象之后一次传递 Apply方法需要将实参封装到一个数组中统一传递

11、 Js哪些数据类型? Js 内置对象，判断数据类型方法，typeof 和instanceof的区别? Typeof null返回什么? typeof function返回什么?

基本数据类型： string，number，boolean，null，undefined（基本数据类型存放在栈中，数据大小确定）
引用数据类型：Object（引用数据类型在栈内存中保存的实际上是对象在堆内存中的引用地址。存放在堆内存中，每个空间大小不一样，）
JS中的对象分为3种：自定义对象，内置对象，浏览器对象 内置对象就是JS语言中自带的一些对象，Math，Date，Array，String等
typeof用来判断所有变量的类型，返回值有number，string，boolean，function，object，undefined。对于丰富的对象实例，只能返回object，得不到真实的数据类型。对于Array，Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。Typeof可以用来获取一个变量是否存在，typeof(a)
== “undefined” || a == null，则变量不存在。 Instanceof用来判断一个变量是否属于某个对象的实例，返回布尔值。可以判断复杂引用数据类型，但是不能正确判断基础数据类型。
typeof null返回object typeof function返回function typeof NaN返回number

12、 Vue看过一些相关的源码吗? computed和method有什么区别?多次调用都会触发吗?

（1） 调用方式不同，computed直接以对象属性的方式调用（比如state的解构在computed里），不需要加括号，而methods必须要函数执行才可以得到结果。
（2） Computed带有缓存功能，而methods没有缓存功能。
（3） 计算属性基于已有的数据，基于他们的依赖属性进行缓存，只有在他的相关依赖发生改变时才会重新求值。method调用几次则方法执行几次。Computed只执行一次。

13、 Vue-router有哪几种模式?有了解过原理吗? history 模式的404怎么去解决?它们的事件有没有了解过?

Hash路由模式和History路由模式，
Hash路由模式的url中带有#，url#后面的内容就是哈希值，哈希值不会包含在http请求中，不会携带给服务器。
History模式是由h5提供的history对象实现的。url中不含#，需要后端配合实现路由重定向，否则会出现404访问页面不存在的问题。
import createRouter,createWebHistory from ‘vue-router’; const
routes=[
path:‘/a’, component:()=>import(“…/components/a.vue”),
path:‘/b’, component:()=>import(“…/components/b.vue”),
path:‘/c’, component:()=>import(“…/components/c.vue”) ]; const router=createRouter(
history:createWebHistory(),
routes ) export default router;

14、 $router和$route的区别，query 和params传参.

$router用来操作路由，$route用来获取路由信息。 $router是VueRouter的一个实例
name，可以和query，params搭配 path只可以和query搭配
官方已经删除params传参了，需要在path路径上添加参数来获取数据，否则获取不到。

15、 Vuex刷新时数据会不会丢失?刷新丢失怎么去处理?

会丢失，因为JS的数据都是保存在浏览器的堆栈内存里的，刷新浏览器会释放之前申请的堆栈内存。
在刷新页面之前将数据存储到sessionStorage 、 localStorage、cookie 里面，然后我们进入页面之前从
sessionStorage 、 localStorage 、 cookie 里面读取数据保存到 Vuex
里即可。如果用户退出浏览器，sessionStorage里的数据会自动清除，而localstorage需要手动清除（localStorage只支持字符串），cookie是有时效性的，cookie的存储数据大小有限，最多4kb，所以存储在sessionStorage中比较好。

16、 Vuex有哪些属性? mutations 和actions的区别，mutations 为什么是同步?用过vuex的devtools去调试吗?

State，getters，mutations，actions mutations
和actions都可以改变state中的数据，但是mutations必须同步执行，actions可以包含任何异步操作（如网络请求等），actions是通过提交数据给mutations来改变state的。

17、 怎么去修改State中的值?怎么去触发mutations和actions中的方法? Vuex里面actions怎么触发mutations的方法? actions 的形参

Mutations直接修改，actions提交到mutations间接修改。 asyncAddCounter（commit）
Axios.get(“url”).then(res=> commit（”mutations中的一个函数名”,res.data） )
commit对象的解构赋值，commit里面是要提交的参数，commit 操作会传递两个参数 type
payload。type表示mutation中的名字，payload(载荷)表示参数。 解构赋值：类似于用一个有规则的表达式去匹配一个对象。

18、 浏览器的存储有哪些?三个都可以设置过期时间吗?

三种方式 localstorage sessionstorage cookie
localstorage和sessionstorage 存储跟着域名走
不同的是：localstorage/sessionstorage 存储空间5m cookie–存储空间4k
传输：cookie会跟着请求来回发送，而localstorage/sessionstorage
这两条不会；localstorage–永久存储，只有手动删除才消失
sessionstorage–关闭对话就消失；cookie–可以设置过期时间 ；如果不设置的话，会话关闭自动失效

19、 浏览器的缓存有哪些?缓存字段哪个是http1.1新增的?优先级?
http://t.zoukankan.com/xiaonian8-p-14010437.html

HTTP 缓存 根据是否需要向服务器重新发起 HTTP 请求，将缓存过程分为两个部分：强制缓存和协商缓存：
强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。 协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存。
两种缓存方式最终使用的都是本地缓存；前者无需与服务器交互，后者需要。

20、 http和https区别，了解过它们的加密算法吗?

1、 https的端口是443，而http的端口是80，且两者的连接方式不同；
2、http传输是明文的，而https是用ssl进行加密的，https的安全性更高；3、https是需要申请证书的，而http不需要。
2、 HTTP+ 加密 + 认证 + 完整性保护 =HTTPS HTTP+SSL = HTTPS
利用非对称加密传递对称加密的密钥，然后利用对称加密传输数据

客户端拥有证书机构的公钥，利用CA的公钥解密数字签名获得消息摘要，再将自己计算出的消息摘要与之对比，如果相同，则证书为真。客户端获得服务器公钥。

69、 http1.0、http1.1和 http2.0的区别
70、 Css3新增属性有哪些?有哪几种方式控制元素的显示和隐藏? display、 visibility 和opacity的区别?可不可以去操作

新增属性： （1）边框： border-radius：CSS3圆角边框。在 CSS2
中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3
中，border-radius 属性用于创建圆角。border：2px solid; box-shadow：CSS3边框阴影。在 CSS3
中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
border-image：CSS3边框图片。 （2）3D转换 rotateX()：元素围绕其 X
轴以给定的度数进行旋转。transform：rotateX(120deg); rotateY()：元素围绕其 Y
轴以给定的度数进行旋转。transform：rotateY(120deg); （3）2D转换：移动、缩放、转动、拉长或拉伸
translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）
位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动
50 像素，从顶端移动 100 像素。
rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值
rotate(30deg) 把元素顺时针旋转 30 度。 scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y
轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4
倍。 skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y
轴）参数：transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30
度，围绕 Y 轴转动 20 度。 matrix() : matrix() 方法把所有 2D 转换方法组合在一起。 matrix()
方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 控制元素的显示和隐藏：
（1） display属性，值为“none”时隐藏元素，为“block”时显示元素；注意：display隐藏元素之后，不再占有原来的位置
（2） visibility属性，值为“hidden”时隐藏元素，为“visible”时显示元素；注意：visibility隐藏元素后，继续占有原来的位置
（3） overflow属性；visible （不隐藏内容也不添加滚动条）| hidden（隐藏超出部分） |
scroll（不管内容是否超出都显示滚动条） | auto（超出部分显示滚动条，不超出不显示滚动条）
（4） opacity属性。0：隐藏元素，1：显示元素。透明度。当他的透明度为0的时候，视觉上它是消失了；但是他依然占据着那个位置，并对网页的布局起作用。

71、 对flex布局的理解，怎么设置主轴侧轴对齐，有哪些属性? flex:1 是哪三个属性的缩写?

Flex弹性盒子。并列书写多个div会竖向排列，若想要并列排成行，传统做法是使用浮动float，浮动后脱离文档流，父元素会失去高度（父级元素高度塌陷），涉及清除浮动等问题。
Flex布局相对简单很多。修改父元素的display:flex，div会自动排成一行，没有浮动之后的副作用。

display: flex; flex-direction: column; /**

• 调整主轴对齐方式
• justify-content: flex-start;(默认)
• justify-content: flex-end;
• justify-content: center;
• justify-content: space-between;每个元素之间的距离相等
• justify-content: space-around;每个元素距离周围的距离相等
  / justify-content: space-around; align-items: center; /*
• 调整侧轴轴对齐方式（不支持space-between、space-around）
• align-items: flex-start;
• align-items: flex-end;
• align-items: center;
• */

清除浮动：（1）使用clear:both清除浮动。（2）给父元素设置overflow样式，不管是overflow：hidden还是overflow：auto都可以清除浮动，本质是构建了一个BFC。

注：BFC全称是Block Formatting
Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
创建BFC：给父级元素添加以下样式： overflow: hidden; display: flex; display:
inline-flex; display: inline-block; position: absolute; position:
fixed;

72、 grid布局有了解过吗?
73、 控制路由跳转时操作浏览器的历史记录的模式？

有两种方式：push和replace方式，默认是push方式。 Push是追加历史记录，replace是替换历史记录（浏览器不能回跳）
开启replace模式 在routerlink上增加replace属性 返回undefined的所有情况

74、 路由守卫

路由在跳转前后过程中做一些限制，比如实现路由跳转前校验是否有权限，有权限跳转，反之返回首页等。 路由守卫分为：全局守卫，组件守卫，路由独享
路由守卫的参数：to，from，next

75、 对路由的理解
76、 路由配置项常用的属性及作用

path跳转路径 component路径对应的组件 name命名路由 children子路由的配置参数（路由嵌套）
redirect路由重定向

77、 路由懒加载

component：()=>import(’’)箭头函数+import动态加载

78、 多页面与单页面开发的区别
推荐

SPA（单页面开发应用）只有一个页面的应用，浏览器一开始要加载所有必须的html，js，css。
多页面：每一次页面跳转，后台服务器都会返回一个新的html文档。
单页面应用的内容都是靠js渲染出来的，搜索引擎不认识。搜索引擎能识别html的内容。
多页面应用相对于单页面应用的首屏时间快：（1）单页面应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求都回来了，首屏才会展示出来，相对于多页面应用，首屏时间慢。（2）多页面的首屏展示时间只经历了一个http请求，所以页面展示的速度非常快。
优缺点：多页面首屏时间快，SEO效果好；单页面的页面切换快。
多页面切换页面速度慢的原因：多页面切换页面时每次都需要发出一个http请求，若网络较慢，则在页面之间来回跳转会出现卡顿现象。

79、 Data为什么是一个函数

80、 对于模块化的理解

对代码和资源进行拆分，将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。

loading…