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

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

（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
})

浏览器缓存

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

页面性能优化

如何优化首屏加载

项目如何部署

webpack如何配置

用过哪些loader和plugin

websocket使用场景

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

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

node的事件循环机制？stream两种模式的区别？

七层协议/四层协议

TCP和UDP的区别

webpack的babel原理，抽象AST树

polyfill打包api