面试题（2022）

1.vue双向数据绑定的原理？

vue的v-model实现数据与dom的双向绑定，vue2.0是 Object.defineProperty()方法实行发布订阅者模式实现数据的双向绑定，vue3.0实现是通过proxy代理实现双向绑定。vue的是基于创建用户UI界面的JavaScript渐进式框架，采用Mvvm模式，model层发生变化view层也会发生变化，view层发生变化model层也会变化。

2.vue的生命周期有哪些
beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

created可以操作没更新前的数据和dom'（可以用$nextTick进行更新后的dom操作）

mounted 真实dom挂载完成 （可以进行dom操作）

updated只要data数据被改变 就会自动更新触发（更新触发，第一次加载不触发）

destroy销毁全局计时器和自定义事件

如果使用了keep-alive会在多两个：activated、deactivated

当组件初次加载会执行前4个生命周期，分别为： beforeCreate、created、beforeMount、mounted

3.v-if 和v-show有什么区别？
相同点:都可以控制dom元素的显示和隐藏

不同点:v-show只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面，渲染消耗大，场景应用频繁使用

v-if直接将dom元素从页面删除，再次切换需要重新渲染页面，内存消耗大，场景不频繁使用

4.async await 是哪些作用？
async await 是ES6的新增，async用于声明一个函数，await用于等待一个异步方法执行完成。async函数返回的是一个promise对象,可以用.then方法添加回调函数，在函数执行的中，一旦遇到await就回先返回,等到这个异步操作完成之后，它再进行函数体内后面的这个语句

5、数组常用的方法？哪些方法会改变原数组，哪些不会
会改变原数组：

pop (删除数组的最后一个元素并返回删除的元素)

push(向数组的末尾添加一个或更多元素，并返回新的长度)

shift(删除并返回数组的第一个元素）

unshift(向数组的开头添加一个或更多元素，并返回新的长度)

reverse(反转数组的元素顺序)

sort(对数组的元素进行排序)

splice(用于插入、删除或替换数组的元素) （index，howmany,arrary.item）

不会改变原数组：

concat---连接两个或更多的数组，并返回结果。

every---检测数组元素的每个元素是否都符合条件。

some---检测数组元素中是否有元素符合指定条件。

filter---检测数组元素，并返回符合条件所有元素的数组。

indexOf---搜索数组中的元素，并返回它所在的位置。

join---把数组的所有元素放入一个字符串。

toString---把数组转换为字符串，并返回结果。

lastIndexOf---返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

map---通过指定函数处理数组的每个元素，并返回处理后的数组。

slice---选取数组的的一部分，并返回一个新数组。

valueOf---返回数组对象的原始值

不同遍历：（1）map()会分配内存空间存储新数组并返回，forEach()不会返回数据。

(2)forEach()允许callback更改原始数组的元素。map()返回新的数组。

for in  index遍历，  for of value遍历

6.什么是原型链？

函数对象显示式 prototype属性，还有隐式原型-proto-，都指向原型对象，原型对象可以继续找原型，形成原型链，顶层是，回去找他的construct可以找构造函数。

7.什么是闭包？闭包有哪些优缺点？
 概念：函数嵌套函数，内部变量能访问外部变量，这个变量称为自由变量
 解决的问题：保存变量
 带来的问题：会造成内存泄漏问题
 闭包的应用：防抖debonce节流throute
8.es6有哪些新特性？
模板字符串
箭头函数
for of  for in 
 Promise 对象纳入规范，提供了原生的 Promise 对象。
 let 和 const 命令，用来声明变量。
 解构赋值

async awiat
9.v-for 循环为什么一定要绑定key ?
给每个dom元素加上key作为唯一标识 ，diff算法可以正确的识别这个节点，使页面渲染更加迅速!

10.组件中的data为什么要定义成一个函数而不是一个对象？
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他

11.常见的盒子垂直居中的方法有哪些请举例3种？
利用子绝父相定位方式来实现

    <style>
        .container{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .conter{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>

利用Css3的transfor