2020前端面试专题整理

1. 全是从网上整理的（狗头保命）

2. vue3.0 与vue2.0的区别：https://juejin.im/post/6844904128628391944

   1. 目录结构发生变化：
      1. 移除了配置文件目录（config与build文件夹），但是多了env.production与env.development，除了文件位置，实际配置和2.0没有什么不同，没有config文件，跨域配置转移到vue.config文件中，配置方法不变
   2. 部分命令发生变化：
      1. 删除了vue list
   3. 数据监听发生变化：
      1. 2.0用的是object.definePromerty的getter与setter
      2. 3.0使用proxy监听，按需监听，速度加快。
   4. Vue更小：runtime-core体积压缩成了约10kb
   5. 创建命令：
      1. 2.0：vue init webpack project-name
      2. 3.0：vue create project-name
   6. 启动：
      1. 2.0：npm run dev
      2. 3.0：npm run serve
   7.  

3. 双向绑定与vuex的冲突：

   1. 不允许将vuex的值绑定到组件上，直接使用会报错：have no setter
   2. 解决：
      1. 使用get与set：

      2. 

      3.  使用watch监听：
      4. 

4. vue3.0的响应式原理

   1. 使用proxy代替object.defineproperty，因为proxy可以直接监听对象与数组的变化
   2. 但是Proxy只会代理对象的第一层，Vue3.0是如何处理这个问题的
      1. 判断当前的reflect.get是否为一个obj，如果是，就使用reactive做代理
   3. 检测数组的时候可能多次触发get、set，如何避免该问题？
      1. 可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，满足条件之一，才可能只需trigger

5. 虚拟DOM与key值

   1. 什么是虚拟dom：

      1. 是js对象记录dom节点的副本，通过对象的方式表示dom结构，通过一些机制，将多次dom修改的结果一次性更新到页面上，来减少页面渲染次数，减少修改dom的重绘重拍次数，提高渲染性能
      2. 在每次数据变化前，都会把虚拟dom缓存一份，将现在的虚拟dom与缓存的虚拟dom使用diff进行对比，不同的地方就重新渲染，大大的缩减了操作真实dom的性能
      3. 现在前端框架基本要求就是不需手动操作dom，尤雨溪说过：框架给你保证的是，你不需要手动优化的情况下，我依然给你过得去的性能
   2. 修改真实dom：
      1. 生成html结构 =》重绘重排
      2. 虚拟dom：
         1. 生成vnode =》使用diff算法 =》更新必要的dom
   3. 优点：
      1. 跨平台：本质是js对象，可以方便的垮平台操作，比如服务端渲染，uniapp
   4. 缺点：
      1. 首次渲染大量dom，由于多了一层虚拟dom，会比innerHTML慢
   5. key：
      1. 在diff中，当新旧子节点顺序不同的时候，最佳操作应该移动元素位置达到目的
      2. 需要在新旧子节点中保存映射关系，以便能够在旧节点中找到哦啊可以复用的节点

6. keep-alive：

   1. 对组价进行缓存，当组件切换时不会将组件进行卸载
   2. 狗子函数：
      1. actived：每进入缓存的页面就会触发一次，不像created、mounted只会触发一次

7. 类数组与数组区别：

   1. 类数组是个对象，具有length属性，但是不具有数组的方法
   2. 常见的类数组：
      1. arguements
      2. document.getElementsByTagName
   3. 类数组如何转换为数组：
      1. Array.property.slice.all
      2. Array.from
      3. Array.prototype.forEach遍历生成新的数组

8. 浏览器和node的event loop

   1. 首先js是单线程，同一时间只能执行一个任务，那么他是如何做到异步回调的呢
      1. CPU：
         1. 计算机的核心，就像是一个工厂，所有的任务都在其中执行，并且是实时的
      2. 进程：
         1. 代表cpu所能处理的单个任务，就像一个工厂资源有限，只能一个车间运行，其他停止工作，也就是说一个cpu只能进行一个进程，但是可以通过时间片轮调度算法，同时运行多个进程
      3. 线程：
         1. 好比这一个车间的每一个工人，完成同一个任务，共享同一个资源，所以一个进程可以包含多个线程，多个线程共享同一个资源
   2. 浏览器的event loop
      1. js任务分为同步与异步任务，同步任务会在执行栈先执行，异步任务放到任务队列中，等待js引擎线程执行空闲之后才会依次执行异步任务
      2. 先执行宏任务
      3. 如果遇到微任务，就将其添加到任务队列中
      4. 宏任务执行完毕，执行任务队列的微任务
   3. 渲染进程：包含以下线程
      1. GUI渲染线程：
         1. 负责页面的绘制、布局
         2. 页面重绘重排就执行该线程
         3. 与js引擎线程互斥，可能会影响绘制ixaoguo
      2. js引擎线程：
         1. 负责解析执行js相关脚本
      3. 事件触发线程：
         1. 用于控制事件循环
         2. 满足触发条件，执行事件，将回调放入任务队列中
      4. 定时器触发线程：
         1. 执行相关定时任务
         2. 执行完毕后将相关的回调函数交由事件触发线程处理
      5. 异步http请求线程：
         1. 处理http请求
         2. 回调函数给事件触发线程处理

9. promise

   1. 是异步编程的一种解决方案，每一个异步任务都返回一个promise对象，该对象都可以使用then方法，允许指定的回调函数
   2. 从语法上来说，是一个构造函数
   3. 方法：
      1. then：可以接收构造函数状态处理变化，有两个参数，resolve与reject
         1. then也会返回一个promise对象，可以继续使用.then方法，这样也可以解决回调地狱
      2. all：他接收一个以promise对象组成的数组作为参数，当这个数组的所有promise对象状态变为resolve或者rejected，才会调用then方法
      3. race：也是以promise对象组成的数组作为参数，当数组其中一个promise对象状态为resolve或者rejected，就会调用then方法
   4. 状态：
      1. pending、fulfilled、rejected
   5. 原理：
      1. 构造一个promise实例需要给promise构造函数传入一个函数，传入的函数有两个形参，同时这两个形参都是函数类型的参数，分别为resolve与reject
      2. promise的原型上还有个then方法，then方法就是来指定promise状态改变时确定执行的操作，resolve时执行第一个函数（onFulfilled），reject执行第二个（Onrejected）
      3. 当状态为resolve就不能变为reject
   6. 缺点：
      1. 一旦执行，无法取消
      2. 当处于pending状态，无法得知他进展到哪一步了
      3. 如果不设置回调函数，内部错误无法抛出