高频面试题
1.js中的类数组有哪些，如何转换为真数组？
类数组：nodeList HTMLCollection arguments
转换：扩展运算符，Array.from(),Array.prototype.slice.apply()
2.封装一个dialog组件
3.npm run dev流程
在npm run dev的时候，首先会去项目的package.json文件里找scripts 里找对应的 dev ，然后执行 dev 的命令。
4.vue 加载流程
5.垂直水平居中的方式
第一种：定位+transform
.work {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
第二种：使用绝对定位 + margin: auto，给子元素添加如下样式
.work2 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
}
第三种：弹性盒子
.par-work {
height: 100vh;
display:flex;
justify-content:center;
align-items:center;
}
第四种：grid布局
.par-work3 {
display: grid;
height: 500px;
}
.son-work3 {
align-self: center; /*设置单元格内容的垂直位置*/
justify-self: center; /*设置单元格内容的水平位置*/
}
6.JS中的this指向
普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window。
箭头函数：箭头函数的this指向于函数作用域所用的对象。
如果单独使用，this 表示全局对象。
在事件中，this 表示接收事件的元素。
构造函数中，this指向实例。
7.let const var区别
let const 不能重复声明，不存在变量提升，存在暂时性死区，块级作用域，var声明的变量挂载在window上。
8.vue双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
9.vue组件传值的方式
父->子 自定义属性
子->父 自定义方法
vuex
provide inject
$ref
$parent
$children
10.什么是虚拟DOM
虚拟DOM本质就是用树型结构的JS对象来描述真实的DOM结构的信息，这个树结构的JS对象包含了整个DOM结构的信息.
11.列表渲染中key的作用
在渲染成新的真实dom前，会执行diff算法，将新的虚拟dom和旧的虚拟dom，根据key来进行对比
12.apply call bind的区别
call和apply是改变后页面加载之后就立即执行，是同步代码。
call和bind的参数逐一传入，apply的参数放在数组中。
bind是异步代码，改变后不会立即执行；而是返回一个新的函数。
13.promise的三个状态
pending reject resolve
14.父子组件的生命周期执行顺序
父beforeCreate->父created->->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父beforeMount->父mounted
销毁阶段
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
15.箭头函数和普通函数的区别
16.判断数据类型的方法
1.typeof
缺点：用typeof检测构造函数创建的Number，String，Boolean都返回object，检测数组和对象也都返回object
2.instranceof
缺点：Number，String，Boolean字面量方式的数据无法使用instanceof准确判断
例如：
let str="abc"
console.log(str instanceof String) //false
3.constructor
缺点：如果输出一个类型的实例的constructor返回不可见的底层代码
4.Object.prototype.toString.call()
var toString = Object.prototype.toString;
toString.call(123); //"[object Number]"
17.移动端设置0.5像素的边框
伪类结合transform:scale(0.5)
.box::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border-radius: 8px;
border: 1px solid royalblue;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
}
18.性能优化
1.体积优化
静态资源（图片，字体，图标等）压缩，JS、CSS压缩，TreeShaking去除多余代码，第三方库按需引入
2.传输优化
路由懒加载，gzip压缩，缩小TCP传输时js、css文件的体积，cdn托管
3.用户体验优化
设置加载动画，骨架屏等视觉等待效果，图片懒加载
19.vuex持久化存储
使用persistedState插件或存储到本地存储中
20.Object.freeze()函数的作用
Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。
21.keep-alive的作用
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置，这个时候就需要保存状态，要缓存状态。
22.computed和watch的区别
computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作
computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作
computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器
23.$route和$router的区别
$router是用来操作路由，$route是用来获取路由信息
24.vue中的插槽
25.首屏加载慢如何解决
26.JS垃圾回收机制
引用计数和标记清除
