前端面试题

1、vue的双向绑定原理是什么？里面的关键点在哪里?

通过数据劫持侦测数据变化，结合发布订阅者模式进行依赖收集与视图更新，
核心是通过Object.defineProperty()函数把数据(data)设置为getter和setter的访问形式

2、实现水平垂直居中的方式？

绝对定位+margin，绝对定位+transform，flex布局，grid布局(给父级设display:grid;给子元素设align-self: center;justify-self: center;)

3、移动端如何适配不同屏幕尺寸？

媒体查询，flex+rem布局

4、本地存储有哪一些？他们三者有什么区别？

存储三种方式：cookie、sessionStorage、localStorage
1.cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，
仅在本地保存。
2.存储大小限制也不同，cookie存储要比 sessionStorage、localStorage更小。
3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效；localStorage：始终有效；
cookie在设置的cookie过期时间之前一直有效

5、JS的数据类型？如何判断js的数据类型?

基本数据类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt
引用数据类型：Object、function、array
判断方法： 
1.typeof 通常用来判断基本数据类型，它返回表示数据类型的字符串(使用typeof来判断null和引用类型 返回的结果都是 'object')
2.instanceof 判断参照对象（大写字母A）的prototype属性所指向的对象是否在被行测对象a的原型链上,
instanceof 只能用来判断两个对象是否属于实例关系，而不能判断一个对象实例具体属于哪种类型
3.Object.prototype.toString.call() 
4.constructor 

6、说一下ES6的新特性有哪些？

1.新增了块级作用域（let，const）
2.提供了定义类的语法糖（class）
3.新增了一种基本数据类型（Symbol）
4.新增了变量的解构赋值
5.函数参数允许设置默认值，引入了rest参数，新增了箭头函数。
6.数组新增了一些API，如isArray / from / of 方法；数组实例新增了 entries()，keys() 和 values() 等方法。
7.对象和数组新增了扩展运算符
8.ES6新增了模块化（import / export）
9.ES6新增了Set和Map数据结构。
10.ES6原生提供Proxy构造函数，用来生成Proxy实例
11.ES6新增了生成器（Generator）和遍历器（Iterator）

7、Let、const、var三者有什么区别？

1.var 具有变量提升
2.let const具有块级作用域的特点，只能在当前声明的代码块中使用，必须先声明后使用
3.const声明必须赋值
4.const声明的常量不可更改

8、数组去重有哪些办法？

1. 双重for循环去重
2. 利用indexOf(),判断该数值第一次出现的索引下标是不是和本身的索引下标一样，如果不一样就说明有重复
3. 利用filter方法 ，如果数据数值第一次出现的索引下标和自身的索引下标一样则返回到新的数组中
4. includes判断新数组里有没有这个元素，如果有就不添加，没有就添加 
5. 通过 ...展开运算符将 set 数据类型中每一个单元存储的数据展开

9、说一下深拷贝和浅拷贝，如何自己实现一个深拷贝？

浅拷贝：拷贝基本数据类型时，不受任何影响，当拷贝引用类型时，源对象也会被修改。
深拷贝：深拷贝就是完完全全拷贝一份新的对象，它会在内存的堆区域重新开辟空间，修改拷贝对象就不会影响到源对象即深浅拷贝是针对于引用数据类型
实现深拷贝:
1、扩展运算符(第一层是深拷贝)
2、JSON.parse(JSON.stringify(待拷贝对象)
3、jQuery 中的 $.extend (添加true就是深拷贝,不添加就是浅拷贝)
4、手写递归的方式来实现深拷贝
实现浅拷贝:
1.Object.assign()
2.Array.prototype.concat
3.Array.prototype.slice
4.扩展运算符(第二层是浅拷贝)

10、Vue的生命周期有哪一些？说一下它们每个阶段做什么操作？
直接上图

11、组件通讯方式有哪一些？

1.父组件向子组件传值(父在子上通过v-bind绑定自定义名称，子通过props接收)
2.子组件向父组件传递数据($emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数)
3.ref / $refs
这种方式也是实现父子组件之间的通信
ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法
4.eventBus事件总线（$emit / $on）
eventBus事件总线适用于父子组件、非父子组件等之间的通信
5.依赖注入（provide / inject）

vue3 中的父子值传值
12、Vuex有几个属性及作用？

1、state: vuex的基本数据，用来存储变量；
2、getters: 从基本数据（state）派生的数据，相当于state的计算属性；
3、mutations: 提交更新数据的方法，必须是同步的(如果需要异步使用action)
4、action: 和mutation的功能大致相同(异步)
5、modules: 模块化vuex，可以让每一个模块拥有自己的 state、mutation、action、 getters，使得结构非常清晰，方便管理。

13、Vue的监听属性和计算属性有什么区别？

computed（计算属性）：
1、监听值未在data中定义，以return返回值形式；
2、计算属性的值会被缓存，只有实例中相关依赖值改变时，才重新计算，性能好但不适合做异步请求；
3、计算属性默认只有get来读取，手动修改计算属性时，会触发手写的set函数。
watch(监听器）：
1、监听值要在data中先定义，可以不写return返回值；
2、不支持缓存，可以做异步操作；
3、监听值改变，回调函数自动调用。

14、说一下防抖和节流。怎么实现？

1.防抖就是防止抖动，避免事件的重复触发
设计思路：事件触发后开启一个定时器，如果事件在这个定时器限定的时间内再次触发，则清除定时器。
2.节流就是控制事件触发的频率
设计思路：设置开关变量，事件触发时开关关闭，过一段时间后再将这个开关打开，再次触发事件。