前端面试题2

01.实现一个左侧固定，右侧自适应的布局

​ flex布局, 左边设置宽, 右边flex: 1 就可以实现

02.说一下对 BFC 的理解

1.什么是BFC: 块级格式上下文, BFC不是一种技术，也不是一个框架，而是我们浏览器自带的一种渲染模式

2.如何使用BFC（四种方式开启BFC盒子）
(1) float不是none
(2) overflow属性不是visible (威色波)
(3) position属性不是static和relative (死哒第扣–越乐体无)
(4) display属性为以下值 ： table-cell 、 inline-block 、 table-caption

3.BFC解决哪些问题
(1) 清除元素内部浮动
(2) 解决盒子margin合并问题（塌陷也可以解决）
(3) 实现元素宽度自适应多列布局

03.讲一下flex布局 弹性布局

1.默认水平方式(给父盒子添加display:flex)

​ (1) justiful-conent:center(水平居中排列)

​ (2) justify-content: space-between; 左右两侧无缝隙

​ (3) justify-content: space-around; 中间距离是两边两倍

​ (4) justify-content: space-evenly; 缝隙均等

2.侧轴对齐方式 flex-direction：column; (滴越克身 克乐母)

​ (1) 顶对齐 flex-start

​ (2) align-items: center 上下空白距离相等

​ (3) align-content: space-between 中间有距离 上下没有

​ (4) align-content: space-around 中间距离是上下的两倍

​ (5) align-content: space-evenly 上下中间距离相等

04.CSS 如何画一个三角形

​ 先创建一个空盒子宽高设置为0, 然后设置边框, 给边框设置长度和颜色, 隐藏其他三个边就可以得到一个三角形

05 盒子水平垂直居中

• 1.flex布局：水平垂直居中
• 2.定位 ： left 50% top 50%,然后使用translate偏移自己宽高一半
• 3.子元素同时设置margin-top和margin-left
• 4.设置子元素为行内块， 父元素的text-align为center, 且 line-height等于父元素高度
• 5.设置父元素dispaly:table，并且vertical-align为middle

06 说一下call apply bind的区别

​ 共同点:
​ 都可以修改this，第一个参数都是修改的this
​ 不同点:
​ 传参方式不同：call是逐一传参， apply是数组/伪数组传参
​ 执行机制不同：call和apply会立即执行函数，bind不会立即执行

07 防抖节流的理解

​ 防抖：单位时间内，频繁触发事件，只会触发最后一次
​ 防抖实际开发应用场景： 实时获取输入框文本
​ 节流：单位时间内，频繁触发事件，只会触发一次
​ 节流应用场景 ： 解决高频事件，频繁触发事件浪费性能

08 说一说事件循环Event Loop执行机制

事件委托: 原理冒泡

js是一门单线程的编程语言,遇到耗时操作时,将这些耗时的代码放到事件队列中

那些代码会放到事件队列中 : setTimoenout setlnterval 以on开头的事件 Promise中then方法,catch方法,finally方法

宏任务与微任务 : 先微后宏

宏: setTimoenout setlnterval 以on开头的事件

微: Promise中then方法,catch方法,finally方法

(1)先解析默认script标签 进入第一个宏任务(默认宏)
(2)判断代码是同步还是异步
(3)如果是同步: 立即执行
(4)如果是异步: 微任务放入微队列 宏任务放入宏队列
(5)当前同步执行完毕之后 开始执行异步队列
(6)先清空微任务队列 再解析宏任务队列 此时完成一次事件循环
(7)按照以上步骤反复解析执行每一个宏任务(事件循环就是按照相同的规则反复循环解析执行代码)

09 讲一下new 的执行过程？

​ 1.创建空对象
​ 2.this指向这个对象
​ 3.对象赋值
​ 4.返回实例对象

10 promise对象的理解

1.promise是深拷贝,将异步操作的流程表达出来,避免层层嵌套的回调函数,解决回调地狱,自己身上有all.reject.race方法,原型上有then.catch等方法

2.promise三种状态, pending(等待)初始状态----fulfilled(成功)成功状态----rejected(失败)失败状态

3.promise两个过程,

​ pending —> fulfilled 佛父又的 (初始状态到成功)

​ pending —> rejected (初始状态岛失败)

Promise实例方法 : then catch finally

Promise静态方法: all race resolve reject

Promise.all()

11 Promise的使用

Promise的构造函数接收一个参数，函数，组传入两个参数: resolve, reject, 分别表示异步操作执行成功后
的回调函数和异步操作执行失败后的回调函数
可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。

12 说一下对闭包的理解

1.闭包是什么 :
闭包 是 使用其他函数内部变量的 函数 （闭包 = 函数 + 其他函数内部变量）
闭包 = 函数 + 上下文引用
2.闭包作用 : 解决全局变量污染

13 如何判断对象为空?

​ JSON.stringify() 将对象强制转成 {} 字符串进行比较
​ for…in 遍历对象中所有属性，如果有属性则返回false，反之，返回true
​ Object.getOwnPropertyNames() 返回对象所有的属性名的数组，数组length为0，则对象是空对象
​ Object.keys() 返回对象所有的属性名的数组，数组length为0，则对象是空对象

14 for in和for of的区别

​ 1.功能不同
​ for-in是遍历数组的下标
​ for-of是遍历数组的元素
​ 2.原型的属性
​ for-in会遍历原型的属性
​ for-of不会遍历原型的属性
​ 3.数据类型
​ for-in可以遍历Object类型
​ for-of不可以遍历Object类型

15 说一下图片懒加载的实现原理

​ 先让图片指向一个默认的图片
​ 1、判断元素是否可见
​ 2、元素属性操作函数
​ 3、注册为指令，在bind绑定的时候，监听“元素是否可见”，动态的替换元素的src
​ 获取视口的底部位置，并把所有img的src属性 复制给data-src，使用数组收集所有的img dom 对象。通过监听页面的scroll事件，使用getBoundingClientRect()方法，判断需要加载图片的img标签的top值是否在视口内，如果在视口内，则把当前img标签的data-src复制给src，进行加载。

16 函数传参，传递复杂数据类型和简单数据类型有什么区别？

​ 简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
​ 值类型: 在存储时变量中存储的是值本身
​ 引用类型: 在存储时变量中存储的是地址

17 深拷贝和浅拷贝

​ 浅拷贝:拷贝基本数据类型为他的值,拷贝引用数据类型为地址,生成新的数据,修改新的数据会影响原数据, 实际开发常用的方法有:object.assgin,扩展运算符等等
​ 深拷贝:在内存中开辟一个新的栈空间保存新的数据,修改新数据不会影响到原数据, 开发中常用的方法有:loadsh 中的_.cloneDeep()方法,JSON.stringify()

18 箭头函数与普通函数有什么区别?

1、外形不同：箭头函数使用箭头定义，普通函数中没有。
2、箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数
3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。
4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。
5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个
arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。
6、其他区别：箭头函数不具有 prototype 原型对象。箭头函数不具有 super。

19 描述输入url地址到网页展示的过程

​ 1、用户在浏览器中输入url地址
​ 2、浏览器解析域名得到服务器ip地址
​ 3、TCP三次握手建立客户端和服务器的连接
​ 三次握手：指建立一个tcp连接时,需要客户端和服务端总要发三个包。保证数据在传输时的一个完整性。
​ 4、客户端发送HTTP请求获取服务器端的静态资源
​ 5、服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源
​ 6、TCP四次挥手关闭客户端和服务器的连接
​ 四次挥手：TCP的连接的拆除需要发送四个包，因此称为四次挥手。
​ 为什么挥手要四次：因为Tcp是全双工通信的，同时也是为了数据的完整性。
​ 7、浏览器解析文档资源并渲染页面

20 get请求和post请求的区别

1.传参方式不同 get在url后面拼接(请求行) post在请求体传参
2.大小限制不同 get有大小限制，不同浏览器大小限制不同。 一般2-5 MB post没有大小限制
3.安全性不同 get参数直接暴露在url，不安全(一般查询类数据都是get) post参数在请求体中，更加安全
4.传输速度不同 get传输速度快 post传输速度慢

21 什么是伪数组，伪数组怎么转真数组？

​ 无法直接调用数组方法或期望length属性有什么特殊的行为, 不具有数组的push.pop等方法, 但仍可以对真正的数据遍历方法来遍历它们
​ 转真数组:
​ Array.from()
​ [].slice.call()
​ Array.prototype.slice.call()

22 谈谈对原型 原型链 作用域链

1.原型链作用 : 面向对象 继承

2.对象访问原型链规则： 就近原则
先访问自己，自己没有找原型，原型没有找原型的原型，直到原型链终点。 如果还找不到，属性则获取undefined，方法则报错xxx is not defined

3.由子级作用域返回父级作用域中寻找变量,就叫做作用域链

23 Javascript 如何实现继承

​ 1、原型链继承；将父类的实例作为子类的原型。
​ 2、构造继承；使用父类的构造函数来增强子类实例。
​ 3、实例继承；为父类实例添加新特性，作为子类实例返回。
​ 4、拷贝继承。
​ 5、组合继承。call式继承 + 原型继承

​ ex6中 extends继承

24 数组的常用方法

​ 遍历方法:
​ map: 映射数组
​ filter: 筛选数组 条件筛选
​ forEach：遍历数组
​ some:判断数组是否有元素满足条件（相当于逻辑或：一真则真，全假为假）
​ every:判断数组是否所有满足都满足条件（相当于逻辑与：一假则假，全真为真）
​ findIndex:查找元素下标，一般用于元素是引用类型
​ reduce:给数组每一个元素执行一次回调，一般用于数组元素求和（也可以求最大值、最小值）
​ 增删改查方法:
​ push() : 末尾新增元素，返回值是新数组长度
​ unshift():开头新增元素，返回值是新数组长度
​ pop() ：末尾删除元素，返回值是删除的那个末尾元素
​ shift()： 开头删除元素，返回值是开头的那个末尾元素
​ splice() : 删除指定下标元素，第三个参数是一个剩余参数，可以在删除的元素后面插入元素
​ 其他方法:
​ reverse:翻转数组，会修改数组自身
​ sort: 数组排序，会修改数组自身
​ json: 拼接数组元素，返回值是拼接之后的字符串
​ slice: 根据下标范围查询数组元素，返回值是查询后的新数组
​ indexOf: 查询元素下标，一般用于元素是值类型

数组合并:

array.concat()方法 const mergeResult = array1.concat(array2);

扩展运算符: 在数组字面量中写入两个或更多带有扩展操作符…前缀的数组，JavaScript将创建一个合并所有这些数组的新数组:

25 为什么post请求会发送两次请求?

第一次请求为options预检请求，状态码为:204

第二次为正真的post请求

作用：主要有两个，回答任意一个。或两个都回答。 都可以
作用1: 询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求,为
作用2: 检测服务器是否为同源请求,是否支持跨域

26 rem与em的异同点?

相同点: 相对单位

不同点: rem相对于html根元素font-size的大小

​ em是相对于自身font-size大小,自身没有大小,才去父级组件元素上面找

rem 监听视口变化，动态修改html根元素字体大小（动态修改rem基准值)

em em的值并不是固定的,em会继承父元素的字体大小

27 vue 生命周期的理解？

1.vue生命钩子: vue初始化到销毁的过程中会执行的函数

2.四个阶段8个钩子:8个

(1)初始化阶段: beforeCreate created

(2)挂载阶段: beforeMount mounted

(3)更新阶段: beforeUpdate updated

(4)销毁阶段: beforeDestroy destroyed

3.两个常用

(1)created() : 一般用于发送ajax(页面一加载需要发送ajax在这个钩子)

(2)mounted(): 一般用于操作DOM(页面一加载需要操作DOM在这个钩子)

28 vue组件通信的几种方式？（组件传值）

1. 父向子通信: 在子组件的标签上通过自定义属性传递父组件的数据,子组件的内部通过 props 接收父向子传递的数据

​ 2.子向父通信: 在子组件的标签上自定义事件,自定义事件的值是父组件的方法,在子组件内部通过 this.$emit()方法触发事件，第一个参数为自定义事件,第二个参数可以传递子组件的内部数据,此时父组件中的方法就可以执行了,
​ 3. 兄弟组件通信: 可以采取 eventbus 实现数据传递,但是这种方式我们在开发中基本不用,多组件共享数据都是用的 vuex
​ 4. 后代组件通信: 可以采取依赖注入的方式,在祖先组件中通过 provide 提供数据,在后代组件中通过 inject 接收数据
​ 5. 无关联关系组件通信: 在开发中我们都是使用 vuex

29 hash和history区别

hash原理: hash监听,改变页面hash值

history原理: 改变路径

1. 路径不同,hash有#号,history没有#号

2. history模式会给服务器发送请求,需要服务器单独配置

   项目上线的时候,hash模式刷新页面是正常的,history刷新页面会出现白屏,原因是history会向服务器发送请求

30 v-if和v-for能不能同时存在？如果不能？怎么处理？

​ 可以, 但不推荐
​ 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中
​ 处理:
​ 1. 将 v-if 和 v-for 分别放在不同标签中
​ 2. 如果 v-if 和 v-for 只能放在同一级标签中，使用计算属性进行改造

31 computed 计算属性 和 watch侦听器 的区别和运用场景？

(1) 作用不同 : 计算属性解决模块渲染冗余问题,侦听器侦听某一个数据变化

(2) 语法不同 : 计算属性是新增一个属性,侦听器只能侦听data中的属性

(3) 计算属性有缓存,侦听器没有缓存

(4) 计算属性不支持异步操作,侦听器支持

(5) 计算属性可以监听多个数据变化,侦听器只能监听一个数据变化

(6) 计算属性默认会执行一次,而侦听器只有数据在第一次变化之后才会执行

watch的使用场景：一个数据影响多个数据,需要在数据变化时执行异步操作或者开销较大的操作时使用。
例如：搜索数据
​computed的使用场景：一个数据受多个数据影响，处理复杂的逻辑或多个属性影响一个属性的变化时使用。
例如：购物车商品结算的时候

32 谈谈你对keep-alive的理解？

​ keep-alive 是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
​ 它的工作原理是：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
​ 可以设置以下props属性:
​ include - 字符串或正则表达式。只有名称匹配的组件会被缓存
​ exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
​ max - 数字。最多可以缓存多少组件实例
​

33 vue中的key 有什么作用？

​ key 的作用主要是为了高效的更新虚拟 DOM

34 你对vue项目进行哪些优化？

​ v-for循环的时候加key
​ v-for和v-if不要放在一行(计算属性)
​ v-if和v-show区分使用场景
​ 路由懒加载 组件动态加载
​ keepAlive
​

35 Vue 组件中的 data 为什么需要是一个函数?

​ 因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
　　组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

36 vue2操作数据哪些不是响应式 为什么不是,解决方案?

​ 对象新增的属性没有响应式
​ 删除也不是响应式的,删除对象中某个属性
​ 数组的部分操作没有响应式 通过索引修改数组内容
​ 原因:
​ 对象后续新增的key赋值,因为vue2通过Object.defineProperty去递归劫持的每一个属性,如果这些属性是后续新增的则不会被劫持到通过索引修改数组内容, Object.defineProperty支持对数组的劫持,作者出于性能原因没有这样做
​ 解决:
​ this.$set,或者vue.set删除解决方案this.$delete

37

38 说一下对vuex的理解

​ vuex 是为了解决整个网站状态数据共享问题的,虽然有父向子,子向父等数据传递,但在网站开发过程中一些无直接关联关系的组件也需要共享相同的数据时,就需要使用 vuex 了
​ vuex 中有五个主要的成员:
​ state 是用来存储数据的
​ mutations 是用来修改 state 中的数据的方法
​ actions 是用来处理一些异步操作数据的行为方法
​ getters 有点类似计算属性,是对 state 中的数据做了一些处理
​ modules 是用来对复杂业务分模块的,每个模块也可以有 state,mutaions,actions,getters

39 nextTick的原理是?

因为vue是异步操作dom 的,对更新后的dom进行处理,就需要使用nextTick,
原理是vue通过任务队列控制dom 和 回调函数先后执行的方式
vue2中$nextTick: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法， 获取更新后的 DOM。

40 简单描述一下$set

​ 数据变化视图不更新问题, 当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，这个时候，你会 发现页面并没有更新。这是因为 Object.defineProperty()限制，监听不到变化.
​ 如果目标是数组，直接使用数组的 splice 方法触发相应式
​ 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理

41 vue3 有了解过吗？能说说跟 vue2 的区别吗？

​ 1.生命周期函数钩子不同
​ 2.数据双向绑定原理不同
​ 3.定义变量和方法不同
​ 4.指令和插槽的使用不同
​ 5.API类型不同
​ 6.是否支持碎片
​ 7.父子组件之间传参方式不同
​ 8.main.js文件部分设置不同

42 v-if和v-show有什么区别

​ 相同点： v-show 和v-if都是true的时候显示，false的时候隐藏

​ 1.原理不同:v-if本质是元素新增与移除,v-show本质是修改元素的display属性
​ 2.场景不同:v-if用于不需要频繁切换的元素,v-show用于需要频繁切换的元素
​ 3.性能不同:v-if初始渲染性能高,切换性能低.v-show初始化渲染性能低,切换性能高

43 vuex中action和mutation的区别

1. mutation是同步更新数据(内部会进行是否为异步方式更新数据的检测) 

2. action异步操作，可以获取数据后调用mutation 提交最终数据。

44 Vue响应式原理

​ 数组和对象类型的值变化的时候, 通过defineReactive方法, 借助defineProperty, 将所有的属性添加了getter和setter . 用户在取值和设置的时候, 可以进行一些操作

45 ajax和axios的区别

ajax用对原生XHR,实现异步数据交互的技术

而axios是对这种交互技术的封装

46 $route和$router的区别？

routes : 数组。 路由匹配规则
router ： 对象。 路由对象
$router ： 对象。 用于跳转路由 和 传递参数
$route ： 对象。 用于接收路由跳转参数

47 前端web优化方案?

1.减少HTTP请求数 具体示例 ： 精灵图、多个文件合并成一个

2.资源压缩 通过压缩文件体积来优化web

3.合理利用浏览器缓存

一些接口的数据是固定的,服务器就没有必要每一次都响应数据。可以让浏览器进行缓存。例如省市的名字

48 小程序的生命周期函数

onLoad() 页面加载时触发,只会调用一次,可获取当前页面路径中的参数
onShow() 页面显示/切入前台时候触发，- -般用来发送数据请求
onReady() 页面初次渲染完成时触发,只会调用- -次,代表页面已可和视图层进行交互
onHide() 页面隐藏/切入后台时触发,如底部tab切换到其他页面或小程序切入后台等 onUnload(页面卸载时触发,如redirectTO或navigateBack到其他页面时

49 scoped作用与原理

作用：组件css作用域，避免子组件内部的css样式被父组件覆盖
默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式
原理：给元素添加一个自定义属性 v-data-xxxxx
一针见血答案： 通过属性选择题来提高css权重值

50 es6数组操作方法有哪些？

​ 1、map方法；2、find方法；3、findIndex方法；4、filter方法；5、every方法；6、some方法；7、reduce方法；8、reduceRight方法；9、foreach方法；10、keys方法等等

51 es6新特性

​ 1、解决原有语法上的一些不足 let 和 const 的块级作用域
​ 2、对原有语法进行增强 解构赋值、展开运算符、参数默认值、模板字符串
​ 3、全新的对象、全新的方法、全新的功能 promise、proxy、object的assign、is
​ 4、全新的数据类型和数据结构 symbol、set、map

​ 箭头函数(this的指向)

52 如何判断this指向

1.以函数的形式调用时，this永远都是window。比如fun);相当于window.fun);
2.以方法的形式调用时，this 是调用方法的那个对象
3.以构造函数的形式调用时，this是 新创建的那个对象
4.使用call和apply调用时，this是指定的那个对象
5、箭头函数:箭头函数的this看外层是否有函数如果有，外层函数的this就是内部箭头函数的this如果没有,就
是window
6、特殊情况:通常意义上this指针指向为最后调用它的对象。这里需要注意的一-点就是如果返回值是一 个对象,
那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例

53 http状态码有哪些

1xx 表示消息状态码
200 表示请求成功
301 永久重定向会缓存 302临时重定向不会缓存
400 服务器参数错误 401 未认证(没有登录) 403未授权(没有权限) 404url写错 405方法写错 413文件大小超出限制 以4开头的都是与服务器有关
500 服务器端错误 以5开头的都是后端有关

54 强缓存和协商缓存的理解

​ 强缓存就是缓存过期之后,不管资源有没有变化,都会重新发起请求,重新获取资源,而协商缓存实现了资源文件没有更新的情况下,过期了也不重新获取资源,继续…
​ 协商缓存(发请求到服务器)
协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程

55 超出隐藏显示三个点如何实现

​ 一,单行文本超出隐藏 二,多行文本超出隐藏

56 em和rem的区别

共同点：都是相对单位,都是相对元素字体大小
不同点：参考元素不同
em ： 参考元素自身字体大小
rem : 参考根元素（html）字体大小

57 Vue中重新定义了7个响应式方法分别是哪七个

push()、pop()、shift()、unshift()、sort()、reverse() splice ()

58 了解 webpack吗?webpack做过哪些配置?常见的loader和plugins有哪些？

​ webpack核心理念 1.入口 2.出口 3.loader 4.插件
​ 常用配置1.安装依赖 2.工作模式:开发模式,生产模式,不使用任何默认优化选项3.配置文件
​ loader在模块加载时的预处理文件,运行在打包文件之前.plugins处理loader无法处理的事物，在整个编译周期都起作用

有没有改过webpack配置?

改过 , vue.config.js文件里面去更改 作用域提升与优化

59 ajax跨域的解决方案?有几个

浏览器要遵循同源策略,不同的域名,协议,端口不同,第三方的服务器数据进行拦截
三种 jsonp cros 反向代理

1. cros 服务端设置响应头, 允许所有的源跨域 后端设置响应头 Access-Control-Allow-Origin 资源共享 后端解决
2. JSONP方案, 利用script标签的src属性
   JSONP是服务端利用前端定义的一个函数, 用这个函数包裹数据返回给前端, 前端就可以利用这个回调函数拿到数据
   缺点: JSONP只能解决get请求, 不能解决post请求
3. 反向代理(开发最常用)
   在项目的配置文件中设置, 原理: 服务器之间没有跨域限制, 通过前端的代理服务器去请求后端服务器的数据, 然后返回给前端

60 ref与reactive区别

1.定义的数据类型不同

ref定义是基本数据类型,将其转为对象,并具有唯一属性value

reactive定义对象或数组数据类型

2.实现原理不同

ref通过Object.defineProperty()的get和set实现数据劫持

reactive通过Proxy实现数据劫持

3.操作和读取数据方式不同

ref操作数据value,读取是不需要value

reactive操作和度数数据不需要value

ref 的原理

ref在Vue中是用来给元素或是子组件注册引用信息到父组件或是 Vue实例上，注册后的引用信息都会呈现在父组件/Vue实例的 (. r e f s ) 上 ， 这 时 ， 我 们 就 可 以 通 过 ( .refs) 上，这时，我们就可以通过(.refs)上，这时，我们就可以通过(.refs) 获取到引用的 DOM 对象或是子组件信息。

61 v-slot插槽与作用域插槽

1.插槽作用：父组件 传递 html结构 给 子组件
2.具名插槽作用：父组件 传递 多个html结构 给 子组件
3.作用域插槽作用：父组件 给 子组件 传递插槽 时，可以使用子组件内部的数据

62 excel导入导出

一.导入excel文件
1.安装xlsx插件 npm i xlsx
2.将vue-element-admin提供的导入功能新建一个公共组件,将组件引入到我们的页面中
3.在我们的import/index.vue组件中，传给UploadExcel/index.vue一个onsuccess方法，在这个方法里面我们可以拿到excel表的header表头和results表格数据。拿到这些数据就可以根据我们的业务需求来转换数据，来实现我们的业务需求逻辑代码
二.导出excel文件
1.下载所需js文件
2.安装2个导出excel所需依赖包
3.按需导入引用方法,由于下载的Export2Excel.js文件还挺大的，我们可以用按需导入的方法导入到我们的组件中。然后调用导入文件的导出对象上的方法，这个方法需要我们传入一些参数

63 webpack是什么?有什么作用(随便说几点)?

1. webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具
2. (1)模块打包: 将不同的模块的文件打包整合
   (2)编译兼容: 通过loader让浏览器兼容不同格式的文件
   (3)能力扩展: 可以利用plugin扩展webpack的功能

64 var、let、const 之间的区别

1.var 声明变量可以重复声明，而 let 不可以重复声明
2.var 没有块级作用域，而 let 和const有块级作用域
3.var 会与 window 相映射（会挂一个属性），而 let 和const不与 window 相映射
4.var 可以在声明之前访问变量，而 let 和const有暂存死区，在声明的上面访问变量会报错
5.const 声明之后必须赋值，否则会报错
6.const 定义常量，改变了就会报错

65 前端下载接口 返回数据流文件(导出文件) post下载数据流

1.接口直接返回url，通过 js手动创建a标签、属性src指向返回的url，模拟点击事件来进行下载。
2.接口直接返回数据流 或是 base64 格式数据、这类数据就需要用的 blob 对象和 URL.createObjectURL() 来手动生成url了，然后再通过模拟点击事件来进行下载

66 如果用js里面的set转换为Array

1. 方法1：使用Array.from()方法**

Array.from()方法从对象或可迭代对象（如Map，Set等）返回一个新数组。

语法 Array.from(arrayLike object);

2. 方法二：使用扩展运算符(三点运算符)“…”
3. 使用forEach

67 虚拟列表核心原理

虚拟列表 核心原理就是 比如有100条数据 如果全部渲染出来，那么dom结构里面对应有100个对应的dom，比如1000 10000的时候，就会开始影响页面性能，那么就要实现虚拟列表， dom结构里面永远只渲染10条 或者 页面可展示的条数，那么性能就会大大提升

68 数组去重方法 5种

1.Set去重 : (1) 创建set对象 : 自动去掉数组重复元素 (2)把set转成数组

2.indexOf方式 : (1)声明新数组,存储去重之后的元素 (2)遍历arr数组 (3)通过indexOf方法判断 元素 在不在新数组中,如果没有就添加

3.every方式 : (1)声明新数组 存储去重之后的元素 (2)遍历arr数组 (3)检查arr[i] 在不在新数组中,如果不在则添加到新数组 通过indexOf方法判断 元素 在不在新数组中 通过every方法判断 元素 在不在新数组中

every : 逻辑与 一假则假,全真则真

4.排序法去重 : (1)对数组进行排序 (2)声明新数组存储去重的元素 3)遍历arr,检查相邻的元素是否相等,如果不相等说明没有重复,就添加岛新数组

5.对象法去重 核心原理 : 对象属性名不能重复

(1)声明一个空对象 : 将数组元素值作为属性名 (2)遍历数组,将元素值,作为对象属性名

69 持久化存储 3种

1. localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 (存储token时会用到)
2. sessionStorage数据在当前浏览器窗口关闭后自动删除 (上限5MB)
3. cookie设置的cookie过期时间之前一直有效，与浏览器是否关闭无关

70 async await 是什么？它有哪些作用？

async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。它可以很好的替代promise 中的then
async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

71 重绘和回流

回流: 当Render Tree 中部分或者全部元素尺寸,结构,布局发生改变时,浏览器就会重新渲染部分或者全部文档的过程称为回流

重绘: 由于节点(元素)的样式的改变并不影响文档流中的位置和文档布局时(比如color background-color outline等) 称为重绘

重绘不一定引起回流,而回流一定会引起重绘.

72 双向绑定原理

vue.js采用数据劫持， 通过object.defineProperty(）来劫持各个属性的setter， getter，在数据发生变动时触发响应的监听回调 。

利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

​ 我们在vue里面使用v-model实现双向数据绑定，原理是检测用户输入，把输入的值获取到 ，然后同步更新给页面的元素。

73 标准盒子模型怪异盒子模型

标准盒模型：content（内容区）+padding（内部安居）+border（边框）+ margin (外边距)

怪异盒模型：width{content（内容区）+padding（填充区）+border（边框）}+ margin（外边距）

标准盒模型和怪异盒模型本质上都是一个盒子，它们的区别就是计算宽度和高度的不同。
标准盒模型是盒子的总宽度=内容区+填充区+边框+外边距，它的内容区是不包含填充区和边框的；
怪异盒模型是盒子的总宽度=内容区+外边距,，它和标准盒模型相反，它的内容区是包含填充区和边框的

74 微信小程序开发原生与uniapp框架区别

原生: 特点 -> 1. 技术随官方更新而更新 2. 专属于小程序开发，匹配度高

​ 缺点 -> 不能通用其他平台小程序，兼容度底

uniapp 特点 -> 1、通用大多数平台小程序 2、低项目，速成快 3、对于具有vue基础的小伙伴来说，上手快

​ 缺点: -> 多平台部分兼容性具有一定的问题存在

75 set 和 map 的区别

Map 是一种键值对的集合，和对象不同的是，键可以是任意值 Map(数据储存)

map 可以遍历，可以和各种数据格式转换

set 是类似数组的一种的数据结构，但在Set中没有重复的值 Set(数组去重)

76 vue2和vue3的区别

1、生命周期的改变(setup代替了之前的beforeCreate和created,其他生命周期名字有些变化，功能都是没有变化的) proxy代替defineProperty

2、性能方面的改变(Diff算法的提升)

3、新增的compositionAPI（组合式API）

4、v-model的变化

77 移动端 1px 问题

就是我们在 pc 的浏览器上设置的 1 px 的边框，在移动 端的浏览器上看上去会“更粗” 一些。