前端面试题（二）

20. Vue3中的组合式Api有哪些？ 和Vue2的Options Api又什么不同?

了解 Options Api

Options API，即大家常说的选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。

Composition

在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合），即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API，Compositon API，将某个逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去。

• composition APi：
  Vue3.0中一个新的配置向，值为一个函数
  setup是所有Composition API（组合API） ”表演的舞台“
  组件中所有用到的:数据、方法等等，均要配置在setup中
  
• setup语法糖

<script setup> 语法糖里面的代码会被编译成组件setup()函数的内容，不需要通过return
 暴露声明的变量、函数以及import引入的内容，即可在<template/>使用，并且不需要
 export default{}

• ref函数
  作用：定义一个响应式的数据。
  基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的
  对象类型的数据：内部“求助”了Vue3.0的一个新的函数------reactive函数
  

21.css3有什么新特性

• 新增各种CSS选择器 (: not(input): 所有 class 不是“input”的节点)
• 圆角 (border-radius:8px)
• 多列布局 (multi-column layout)
• 阴影和反射 (Shadoweflect)
• 文字特效 (text-shadow)
• 文字渲染"(Text-decoration)
• 线性渐变 (gradient)
• 旋转 (transform)
• 增加了旋转,缩放,定位,倾斜,动画,多背景

23. Vue3中组件通信的流程【父传子，子传父】

父传子（ defineProps）：

父组件提供数据
父组件将数据传递给子组件 
子组件通过 defineProps 进行接收
子组件渲染父组件传递的数据

子传父（defineEmit）：

子组件通过defineEmit获取emit对象
子组件通过emit触发事件 并传递数据
父组件提供方法
父组件通过自定义事件的方式给子组件注册事件

24. Apply/call/bind的原理是什么？

call，apply， bind方法都可以改变函数的this指向

call方法apply调用后函数会立即执行，bind方法不会立即执行函数。

cal方法和bind万法后面跟的是参数列表，apply的参数据是一个数组。

25. 说说你对原型和原型链的理解？

原型？

每一个构造函数都有一个prototype属性，这个属性称之为函数的显示原型

构造函数实例化后或者对象都有一个 prot0_ 属性，称之为对象的隐式原型，后续原型链就是通过proto查找属性的.

原型链?

当我们访问对象的某个属性时，会先从当前对象中查找，如果没有找到的则继续去对象的proto隐士原型中去查找，如果还没找到则继续向上级对象的原型中查找，直到找到顶层Obiec对象，如果没有找到返回undefined，这种通过对象的proto隐式原型查找属性的链条关系称之为原型链。

会先从当前对象中查找，如果没有找到的则继续去对象的proto隐士原型中去查找，，

如果还没找到则继续向上级对象的原型中查找，直到找到顶层Object对象，如果没有找到返回undefined，这种通过对象的 _proto__隐式原型查找属性的链条关系称之为原型链。

26. 说说你对ES6中Generator的理解？

简述：

如果说JavaScript是ECMAScript标准的一种具体实现、Iterator遍历器是Iterator的具体实现，那么Generator函数可以说是Iterator接口的具体实现方式。

执行Generator函数会返回一个遍历器对象，每一次Generator函数里面的yield都相当一次遍历器对象的next()方法，并且可以通过next(value)方法传入自定义的value,来改变Generator函数的行为。

Generator函数可以通过配合Thunk 函数更轻松更优雅的实现异步编程和控制流管理。

原理：

Generator 是 ES6中新增的语法，和 Promise 一样，都可以用来异步编程。

// 使用 * 表示这是一个 Generator 函数
// 内部可以通过 yield 暂停代码
// 通过调用 next 恢复执行
function* test() {
  let a = 1 + 2;
  yield 2;
  yield 3;
}
let b = test();
console.log(b.next()); // >  { value: 2, done: false }
console.log(b.next()); // >  { value: 3, done: false }
console.log(b.next()); // >  { value: undefined, done: true }

27. 说说你对Event Loop的理解

为什么会有event loop

因为js是单线程的，如果某段程序需要等待一会再执行，后面的程序都会被阻塞，这样也就带来了一些问题。为了解决这个问题，js出现了同步和异步两种任务，两种任务的差异就在于执行的优先级不同。event loop就是对任务的执行顺序做了详细的规范。

什么是 event loop

事件循环（event loop）就是 任务在主线程不断进栈出栈的一个循环过程。任务会在将要执行时进入主线程，在执行完毕后会退出主线程。

循环的步骤：

1.把同步任务队列 或者 微任务队列 或者 宏任务队列中的任务放入主线程。

2.同步任务 或者 微任务 或者 宏任务在执行完毕后会全部退出主线程。

在实际场景下大概是这么一个顺序：

1.把同步任务相继加入同步任务队列。

2.把同步任务队列的任务相继加入主线程。

3.待主线程的任务相继执行完毕后，把主线程队列清空。

4.把微任务相继加入微任务队列。

5.把微任务队列的任务相继加入主线程。

6.待主线程的任务相继执行完毕后，把主线程队列清空。

7.把宏任务相继加入宏任务队列。无time的先加入，像网络请求。有time的后加入，像setTimeout(()=>{},time)，在他们中time短的先加入。

8.把宏任务队列的任务相继加入主线程。

9.待主线程的任务相继执行完毕后，把主线程队列清空

28. 说说Promise和async/await 的区别？

promise：

Promise是ES6中的新增的异步处理方法，主要是用于解决ES5中使用回调函数产生的地狱回调的问题Promise有三种状态,
pedding准备中，fulfiled已完成，rejected失败，状态只能有准备中=>已完成或准备中=>失败。

async/await：

1.async函数返回的是一个promise函数，可以使用then（）回调函数，return返回的值便是then方法里的参数
2.async返回的promise对象只有内部的await全部执行完，才会执行then（）的回调函数
3.await语句后面可能会等具体的值也可能会等promise对象，如果是promise对象，一般返回的是resolve的结果，如果是reject，
则后续的await将不会在执行。
4.await命令只能在async函数里，普通函数会报错 

三者区别

promise和 async/await都是解决异步编程的一种方式，但是async/await使得异步代码看起来像同步代码。
函数前面多了一个async关键字。await关键字只能用于async定于的函数内。async函数会隐式地返回一个Promise,
该promise的resolve值就是return的值。

29. 说说浏览器事件循环和nodeJs的事件循环的区别？

点击详情

30. 说说你对浏览器缓存机制的理解

浏览器的缓存机制

浏览器缓存机制有两种，一种为强缓存，一种为协商缓存

对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。

对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存。

协商缓存相关设置

Exprires：服务端的响应头，第一次请求的时候，告诉客户端，该资源什么时候会过期。Exprires的缺陷是必须保证服务端时间和客户端时间严格同步。

Cache-control：max-age：表示该资源多少时间后过期，解决了客户端和服务端时间必须同步的问题，

If-None-Match/ETag：缓存标识，对比缓存时使用它来标识一个缓存，第一次请求的时候，服务端会返回该标识给客户端，客户端在第二次请求的时候会带上该标识与服务端进行对比并返回If-None-Match标识是否表示匹配。

Last-modified/If-Modified-Since：第一次请求的时候服务端返回Last-modified表明请求的资源上次的修改时间，第二次请求的时候客户端带上请求头If-Modified-Since，表示资源上次的修改时间，服务端拿到这两个字段进行对比

31. 说说你对浏览器内核的理解

浏览器内核两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
• JS引擎则：解析和执行javascript来实现网页的动态效果

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

32. 说说你对Vue的响应式原理的理解

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

VUE双向数据绑定，其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法，当获取数据的时候，调用get方法，修改data中的数据的时候调用set方法，通过watcher监听器去更新视图，完成数据的双向绑定。

1. 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，
给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。
 2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定
更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
3.watcher订阅者是observer和compile之间通信的桥梁，主要做的事情是：1*.在自身实例化时往属性订阅器里面添加自己
  2*.组件自身必须有一个update()方法.3*待属性变动dep.notice()通知时，能调用自身的update（）方法，
并触发complie中绑定的回调，则功成身退。
4. MVVM作为数据绑定的入口，整合observer、compile和watcher三者，通过observer来监听自己的model数据变化，
通过compile来解析编译模板指令，最终利用watcher搭起来Observer和Compile之间的通信桥梁，达到数据变化，
视图更新，视图交互话变化，数据model变更的双向绑定效果。

33. Methods watch computed区别是什么？

computed

它支持缓存，只有依赖的数据发生了变化，才会重新计算
不支持异步，当Computed中有异步操作时，无法监听数据的变化computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，
也就  是基于data声明过，或者女组件传递过来的props中的数据进行计算的。如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，
一般会使用computed如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值: 在computed中，属性有一个get
方法和一个set方法，当数据发生变化时，会调用set方法。

对于Watch:

它不支持缓存，数据变化时，它就会触发相应的操作

支持异步监听

监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值

当一个属性发生变化时，就需要执行相应的操作

监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数:

immediate: 组件加载立即触发回调函数0

deep: 深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注0意的是，deep无法监听到数组和对象内部的变化。当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。

运用场景:

当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。

当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作(访问一个 API)，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

Computed 和 Methods 的区别

可以将同一函数定义为一个 method 或者一人计算属性。对于最终的结果，两种方式是相同的

不同点:

·computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值;

·method 调用总会执行该函数

34. 说说你对Virtual DOM的理解？

概述：

虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）

实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上。

在Javascript对象中，虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别

创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应。

为什么使用虚拟dom：

DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的

35. 说说你对nextTick的理解和作用

vue的$nextTick其本质是对js执行原理EventLoop的一种应用。

$nextTick的核心是利用promise，mutationObserver、setImmediate、setTimeout的原生

javascript方法来模拟对应的微/宏任务的实现，本质是为了利用JavaScript的这些异步回调任务队列来实现vue框架中自己的异步回调队列。

nextTick是典型的将底层的javascript执行原理应用到具体案例中的示例，引入异步更新队列机制的原因:

如果是同步更新，则多次对一个或者多个属性赋值，会频繁触发dom的渲染，可以减少一些无用的渲染。
同时由于virtualDom的引入，每一次状态发生变化之后，状态变化的信号会发送给组件，组件内部使用virtualDom进行计算得
出需要更新的具体的dom节点，然后对dom进行更新操作，每次更新状态后的渲染过程需要更多的计算，而这种无用功也将
浪费更多的性能，所以异步渲染变得更加至关重要。
 vue采用了数据驱动的思想，但是在一些情况下，仍然需要操作dom。有时候，可能遇到这样的情况，
 dom1的数据发生了变化，而dom2需要从dom1中获取数据，那这时候就会发现dom2的试图并没有更新，这时就需要
 用到nextTick了。

36. 说说你对webpack的理解

点击查看详情

37. 谈谈GET和POST的区别

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求只能进行url编码，而POST支持多种编码方式
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST没有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

更详细回答：

GET和POST还有一个重大区别，简单的说：

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去。

因为POST需要两步，时间上消耗的要多一点，看起来GET比POST更有效。因此Yahoo团队有推荐用GET替换POST来优化网站性能。但这是一个坑！跳入需谨慎。为什么？

1. GET与POST都有自己的语义，不能随便混用。
2. 据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，
 两次包的TCP在验证数据包完整性上，有非常大的优点。
3. 并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

38. 说说HTTP和HTTPS的区别，HTTPS加密原理是?

HTTPS

HTTPS是在HTTP上建立SSL加密层，并对传输数据进行加密，是HTTP协议的安全版。

HTTPS主要作用是：

1.对数据进行加密，并建立一个信息安全通道，来保证传输过程中的数据安全;
2.对网站服务器进行真实身份认证。

HTTPS替代HTTP的原因：

1.通信使用明文（不加密），内容可能被窃听
2.无法证明报文的完整性，报文数据有可能会被篡改
3.不验证通信方的身份，因此有可能遭遇伪装

HTTPS 与 HTTP 的区别

HTTP 是明文传输协议，HTTPS 协议是由 SSL + HTTP 协议构建的可进行加密传输、身份认证的网络协议，HTTPS 协议安全

HTTPS 相比 HTTP 更加安全，对搜索引擎更友好，利于SEO,谷歌、百度优先索引 HTTPS 网页

HTTPS 需要用到SSL证书，而 HTTP 不用

HTTPS 标准端口443，HTTP 标准端口80

HTTPS 基于传输层，HTTP 基于应用层

HTTPS 在浏览器显示绿色安全锁，HTTP 没有显示

加密分类：对称加密 、非对称加密

**对称加密**：加密和解密使用的是同一个秘钥。
**非对称加密**：与对称加密不同，它有两个密钥：公开密钥（publickey）和私有密钥（privatekey）。公钥与私钥是一对，如果用公钥对
数据进行加密，只有用对应的私钥才能解密；如果用私钥对数据进行加密，那么只有用对应的公钥才能解密。因为加密和解密使用的是两个
不同的密钥，所以这种算法叫作非对称加密算法。

39. TCP为什么要三次握手？

三次握手（Three-way Handshake）其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包

主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备

第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 ISN©，此时客户端处于 SYN_SENT 状态

第二次握手：服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，为了确认客户端的 SYN，将客户端的 ISN+1作为ACK的值，此时服务器处于 SYN_RCVD 的状态

第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK 报文，值为服务器的ISN+1。此时客户端处于 ESTABLISHED 状态。服务器收到 ACK 报文之后，也处于 ESTABLISHED 状态，此时，双方已建立起了连接。

40. 说说Proxy代理的原理

Proxy的作用

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

拦截和监视外部对对象的访问
降低函数或类的复杂度
在复杂操作前对操作进行校验或对所需资源进行管理

41. 说说内存泄漏的理解？内存泄漏的情况有哪些?

内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存

并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费

常见内存泄露情况

意外的全局变量

定时器也常会造成内存泄露

没有清理对DOM元素的引用同样造成内存泄露