vue面试题

vue如何监听对象中的属性

• 在watch中设置deep为true
• 使用computed配合watch进行监听

nextTick主要用来干什么的？原理是什么？

用于下次DOM更新完后执行回调函数，主要用于获取更新后的DOM

data为什么是一个函数而不是一个对象

如果data是一个函数，那么实例化多个组件时会共享一个对象，每个组件内对data值的修改会相互影响，而data是函数，那么每个组件可以维护一份被返回对象的独立拷贝

基础数据类型和引用数据类型的区别

基本数据类型存放在栈中，引用数据类型将指针存放在栈中，这个指针指向堆内存中的地址，赋值相当于将地址复制了一份

区别：

• 声明变量是内存分配不同
• 复制变量不同
• 参数传递不同

堆和栈的主要区别

• 栈由系统自动分配，而堆是人为申请开辟的，容易产生内存泄漏
• 栈获得的空间较小，而堆获得的空间较大
• 栈是连续的空间，而堆是不连续的空间

301和302的区别

• 301：永久重定向
• 302：临时重定向

区别：

• 301重定向时会将旧地址的资源永久移除，搜索引擎在抓取新内容的同时也将旧网址交换为重定向之后的网址，302会保留旧的网址资源，这个重定向只是临时从旧地址跳转到新地址，搜索引擎会抓取新的内容而保存旧的网址

尽量使用301跳转，因为302会引起网址劫持

如果有人在自己的网址A做一个302重定向到网址B，搜索引擎搜索的结果是网址A，但是内容却是网址B的

http2优势

http1.1不足：http使用长连接解决了http1.0每次请求都要建立连接的问题，但使用keep-alive模式，如果需要传输10个文件，那么只能依次逐个传输，传输完前一个才能传输后一个，http1.1中的数据都是基于文本格式来传输的，这就要求保证在传输过程中必须按照文本原有顺序传输，因此无法并行传输

（1）二进制分帧
http2采用二进制格式传输数据，http2将请求和响应数据分割为更小的二进制帧。在http2中，同域名下所有通信都是在单个连接上完成的，该连接可以承载任意数量的双向数据流，每个数据流以消息形式发送，而消息又由一个或多个帧组成，多个帧可以乱序发送，根据帧首部对流标识可以重新组装。

http引入二进制数据帧和流的概念，其中帧对数据进行顺序表示，这样浏览器收到数据之后就可以按照序列对数据进行合并。同样因为有了序列，服务器可以并行传输数据。

（2）多路复用

http1中一个TCP连接同时只能有一个http请求和响应，如果正在发送一个http请求，那么其他的http请求就得排队，这种排队会产生一个请求队列，当队头的请求发生意外，后面的请求就会延迟，就会发生队头阻塞的现象，为了环节这个问题，浏览器会对同一个域名建立多个TCP连接，来实现http请求的并发，但是这样会对服务端造成负担，因此同域名下TCP连接数最多为6-8个

如果网页一次性加载资源太多，那么6个TCP连接可能并不能满足，为了解决这个问题，采用域名分片的方法，就是将资源放到不同的域名下

在http2，connection和keep-alive是被忽略的，主要使用多路复用来进行连接管理，同域名只需要占用一个TCP连接，使用一个连接并行发送多个请求和响应，消除了因多个TCP连接带来的延迟和内存消耗

http2的多路复用能够解决http队头阻塞的问题，更充分利用TCP带宽，但是因为还是在TCP协议上，所以不能解决TCP队头阻塞的问题

（3）头部压缩
在一个页面中，许多资源的header是高度相似的，http2使用HPACK算法对头部进行压缩 ，即避免了重复的header传输，又减小了下需要传输数据的大小

HPACK基本原理：客户端和服务端分别缓存一份索引表，如果头部存在于索引表，则使用对应的索引值；否则进行霍夫曼编码，并加入索引表

静态表是预先定义的，只有固定的几十个值；动态表是一个由先进先出的队列维护的有空间限制的表，每个动态表只针对一个连接，当一个头部没有出现过的时候，就会被插入到动态表中

（4）服务端推送
服务端主动推送js和css文件给客户端，而不需要解析html时在发送这些请求

HTTP2存在的问题：一般来说，同一个域名下只需要一个TCP连接，但当这个连接中出现了丢包的情况，TCP会进行重新传输，也就是把所有请求都重传一遍，这也会导致数据被阻塞。这种情况一般在http2网络较差的时候会出现

http3

http3解决了http2的队头阻塞问题，http2只解决了应用层的阻塞，但是没有解决TCP阻塞。http3是基于UDP协议实现的，在一个连接上可以有多个流，流与流之间是互不影响的，当一个流出现丢包影响范围非常小。由于采用UDP协议，UDP在发送请求时不需要服务器响应就可以一直想服务器发送数据，可以减少传输和连接的延时，减少网络拥塞。

101状态码：切换协议

Tree-shaking原理：基于ES6模块特性

作用：用于移除未使用的代码，减小打包体积

原理：tree-shaking会在打包过程中静态分析模块之间的导入导出，确定哪些模块导出值没有被使用并打上标记，并将其删除

实现一个双向绑定

（1）vue2

<input id='input' type='text'>
<p id='p'></p>

const input = document.getElementById('input')
const p = document.getElementById('p')
let obj = {}
Object.defineProperty(obj,'name',{
	get:()=>{
		return obj.name
	},
	set:(val)=>{
		input.value = val
		p.innerHTML = val
	}
})

input.addEventListener('input',(e)=>{
	obj.name = e.target.value
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

（2）vue3

let newProxy = new Proxy(obj,{
	get:(target,key,receiver)=>{
		return Reflect.get(target,key,receiver)
	},
	set:(target,key,value,receiver)=>{
		if(key=='text'){
			p.innerHTML = value	
		}
		Reflect.set(target,key,value,receiver)
	}
})

input.addEventListener('input',(e)=>{
	newProxy.text = e.target.value
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

浏览器缓存

客户端发送请求前，先从本地缓存中查找结果以及缓存标识，根据缓存标识判断缓存是否有效，如果有效，则直接使用本地缓存，否则需要想服务器发送http请求

根据是否需要向服务器发送http请求，将浏览器缓存分为强缓存和协商缓存

（1）强缓存
浏览器第一次发送请求，服务器返回资源，浏览器缓存到本地，并且服务器会通知浏览器一个缓存时间，下次请求如果在缓存时间内，则直接从本地缓存中读取数据，否则进入协商缓存

在http1.0中，强缓存的字段是expires，它是一个绝对时间，表示这个时间点之前发起的请求都可以从缓存中读取数据；在http1.1中使用cache-control，他有一个max-age表示相对时间，表示自上次请求多少秒时间有效，cache-control还有其他字段，no-cache表示不使用强缓存，需要与服务器验证缓存是否有效；no-store表示不可以使用缓存

cache-control的优先级要高于expires，cache-control解决了expires因为浏览器时间被手动篡改而导致缓存判断错误

（2）协商缓存
主要用于判断缓存是否有效

在http1.0中，使用last-modified配合If-Modified-Since关键字来判断缓存是否有效，last-modified表示资源最后的修改时间，下一次请求，将last-modified的值放入If-Modified-Since字段中，服务器将If–modified-since的值和last-modified值进行对比，如果相等，则说明缓存有效，返回304状态码，如果不相等，表示缓存已过期，返回200状态码

因此，只要资源修改，无论内容是否发生实质性变化，都会将该资源返回客户端

在http1.1中，使用Etag关键字配合If-None-Match字段来使用，Etag的值实际上相当于文件的hash值，etag的优先级要高于last-modified

为什么一定要三次握手？为什么一定要四次挥手？

两次握手只能保证客户端的初始化序列号被服务端接收，无法保证服务端的初始化序列号被客户端接收。四次握手可以确保可靠的初始化序列号，但是第二次和第三次可以优化成一步，减少开销

第二次挥手不能和第三次挥手合并是由于TCP的半关闭造成的，即TCP提供连接的一方在结束它的发送后仍具有接收另一方数据的能力

TCP不允许处于半打开状态就发送数据，因此需要三次握手才能传输数据

当连接处于半关闭状态，也就是第二次挥手后，TCP是允许单向传输数据的，此时服务端可以想客户端传输数据，只有等服务端不再发送数据时他才会发送FIN报文段请求断开连接，这个时间间隔可能会很久

Time_wait等待时间为什么是2MSL

（1）保证客户端最后发送的ACK信号能正常达到服务端，帮助其正常关闭
（2）防止已失效的报文段出现在本连接中

页面性能优化

1. 懒加载
2. 减少http请求
3. 资源压缩与合并
4. 使用浏览器缓存
5. 使用CDN

如何优化首屏加载

1. 路由懒加载
2. loading时使用动画

项目如何部署

webpack如何配置

出口、入口、plugins、loader

用过哪些loader和plugin

1. 配置ES6转ES5：babel-loader
2. 多进程打包：thread-loader
3. 提升二次构建速度：cache-loader
4. 处理文件图片：file-loader
5. 对小图片进行转化：url-loader
6. 处理css文件：css-loader（生成css文件）、style-loader（将css-loader生成文件内容挂载到页面中）
7. htmlwebpackplugin：自动生成一个html，并把js文件自动引入

websocket使用场景

高即时性服务，如群聊、社交订阅、多玩家游戏、协同编程、股票基金报价、比赛比分实况

怎么看待virtual dom？ast语法树了解吗？vue-loader做了哪些事情？vue diff？vue computed和watch区别？vue3双向数据绑定实现？createRender？和vue2有哪些不同，提到了函数式编程，说下对函数式编程对的理解

七层协议/四层协议

TCP和UDP的区别

• TCP是面向连接的，UDP是面向无连接的，无需要三次握手
• TCP只能一对一通信，UDP可以一对多、多对多通信
• TCP的传输方式是面向字节流的，UDP的传输方式是面向报文的
• UDP更不可靠，原因在于UDP是无连接的，一直以恒定速率发送数据，这样产生的问题是当网络不好时容易产生丢包，但适用于某些实时性要求较高的场合
• TCP首部最少20个字节，最多60个字节，UDP首部开销小，仅8个字节

webpack的babel原理，抽象AST树

1. 将代码转化为抽象语法树
2. 对前面的AST树遍历修改获得新的AST树
3. 将抽象语法树转换成代码

polyfill打包api

babek只能转换新的语法，如将ES6转换成ES5，但是无法处理新的API，如promise，这时就需要polyfill，它主要用于实现浏览器不支持的原生api代码

http和https

https其实就是http+TLS

https使用了非对称加密算法交换对称加密的密钥，使用对称加密传输数据

computed怎么实现的缓存（dirty）？