👉👉 一尾流莺的面试专栏
👉👉 面试题集合
👉👉 前端面试真题
👉👉 jsliang 求职系列
待加深
git常用命令了解哪些
👉👉 Git命令速查表
Vue2 相比 Vue3 有什么缺点
- 1、性能问题：Vue2 采用的是双向数据绑定和脏检查的方式，对于大型应用或复杂组件来说，性能可能会受到影响。
- 2、大量代码：Vue2 需要引入大量的代码来支持其功能，使得包的体积较大。
- 3、逻辑复用：Vue2 对于逻辑复用的支持不是很好，Vue3 的 compositionApi 很好的解决了这个问题。
- 4、TypeScript 支持不佳：Vue2 对于 TypeScript 的支持较弱，需要借助额外的插件来实现类型检查和补充 IntelliSense 等功能。
- 5、原生支持数组的响应式，无需重写数组原型方法。
diff 算法中 key 是做什么用的
- key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速
Vue2 和 Vue3 有什么区别
基本回答点：
一：用组合式api替换选项式api，方便逻辑更加的聚合
二：一些细节改变 具体细节：
- 1、因为改成组合式api所以没有this
- 2、生命周期没有creat，setup等同于create，卸 载改成unmount
- 3、vue3中v-if高于v-for的优先级
- 4、根实例的创建从new app变成了createApp方法
- 5、一些全局注册，比如mixin，注册全局组件， use改成了用app实例调用，而不是vue类调用
- 6、新增了传送门teleport组件
- 7、template模板可以不包在一个根div里
三：响应式原理改成了用proxy，解决了数组无法 通过下标修改，无法监听到对象属性的新增和删 除的问题。也提升了响应式的效率
---深入回答：vue3并不是完全抛弃了 defineProperty，通过reactive定义的响应式数 据使用proxy包装出来，而ref还是用的 defineProperty去给一个空对象，定义了一个 value属性来做的响应式
四：支持按需引入，可以更好tree-shaking
五：性能优化，增加了静态节点标记。会标记静态 节点，不对静态节点进行比对。从而增加效率
----深入回答：文本内容为变量会标记为1，属性为动 态会标记为2，如果静态则不标记跳过比对
进阶回答： 1，vue3不推荐使用mixin进行复用逻辑提取，而 是推荐写成hook 2，v-model应用于组件时，监听的事件和传递的 值改变 3，ts更好地配合
vue的虚拟dom
一些常用的优化手段
mvvm
双向数据绑定原理
原型和原型链？？
在JavaScript中是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性，它的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说不应该能够获取到这个值的，但是现在浏览器中都实现了 proto 属性来访问这个属性，但是最好不要使用这个属性，因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法，可以通过这个方法来获取对象的原型。
当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。
**特点：**JavaScript 对象是通过引用来传递的，创建的每个新对象实体中并没有一份属于自己的原型副本。当修改原型时，与之相关的对象也会继承这一改变。
vue有哪些内置指令
从输入
url到页面渲染完成之间发生了什么？？
（1）**解析URL：**首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。
（2）**缓存判断：**浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。
（3）**DNS解析：**下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用户。用户向本地 DNS 服务器发起请求属于递归请求，本地 DNS 服务器向各级域名服务器发起请求属于迭代请求。
（4）**获取MAC地址：**当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源端口号和目的端口号，然后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目的地址。然后将下发给数据链路层，数据链路层的发送需要加入通信双方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目的 MAC 地址需要分情况处理。通过将 IP 地址与本机的子网掩码相与，可以判断是否与请求主机在同一个子网里，如果在同一个子网里，可以使用 APR 协议获取到目的主机的 MAC 地址，如果不在一个子网里，那么请求应该转发给网关，由它代为转发，此时同样可以通过 ARP 协议来获取网关的 MAC 地址，此时目的主机的 MAC 地址应该为网关的地址。
（5）**TCP三次握手：**下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接收到请求后向客户端发送一个 SYN ACK报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的确认应答后，进入连接建立的状态，同时向服务器也发送一个ACK 确认报文段，服务器端接收到确认后，也进入连接建立状态，此时双方的连接就建立起来了。
（6）**HTTPS握手：**如果使用的是 HTTPS 协议，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送使用的协议的版本号、一个随机数和可以使用的加密方法。服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证书。客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。服务器端接收后，使用自己的私钥对数据解密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。这个时候双方都有了三个随机数，按照之前所约定的加密方法，使用这三个随机数生成一把秘钥，以后双方通信前，就使用这个秘钥对数据进行加密后再传输。
（7）**返回数据：**当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。
（8）**页面渲染：**浏览器首先会根据 html 文件构建 DOM 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后，根据它们来构建渲染树。渲染树构建好后，会根据渲染树来进行布局。布局完成后，最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。
（9）**TCP四次挥手：**最后一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。服务端收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连接已经释放，不再接收客户端发的数据了。但是因为 TCP 连接是双向的，所以服务端仍旧可以发送数据给客户端。服务端如果此时还有没发完的数据会继续发送，完毕后会向客户端发送连接释放请求，然后服务端便进入 LAST-ACK 状态。客户端收到释放请求后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有服务端的重发请求的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。
总结：域名解析>>缓存判断>>dns解析>>mac解析>>三次握手>>https握手>>返回数据>>渲染数据>>tcp四次挥手
待了解
浏览器兼容问题
webpack构建过程
promise的原理
diff算法怎么做的
在新老虚拟DOM对比时：
- 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换
- 如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
- 比较如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作（diff核心）。
- 匹配时，找到相同的子节点，递归比较子节点
在diff中，只对同层的子节点进行比较，放弃跨级的节点比较，使得时间复杂从O(n3)降低值O(n)，也就是说，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。
如何进行移动端适配
bfc等
浏览器缓存
函数柯里化
http2对比http1
解决跨域问题
CDN加速静态资源的经验？？？
如何使用
Webpack进行项目打包、优化和部署？请举例说明在项目中如何实现压缩和优化
如何实现首页内容的分模块异步加载？？
css选择器
常见的居中方案
👉👉【面试题解】宽高固定的12种和宽高不固定的29种CSS居中方案
对比
call和apply的作用和区别
👉👉【面试题解】你了解call，apply，bind吗？那你可以手写一个吗？
Vue2中$set是干什么用的，引出Vue的响应式原理
Vue.js 是采用 数据劫持 结合 发布者-订阅者模式 的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：
- 使用
observe对需要响应式的数据进行递归，将对像的所有属性及其子属性，都加上setter和getter这样的话，给这个对象的某个属性赋值的时候，就会触发setter，那么就能监听到了数据变化。 compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
-
在自身实例化时往属性订阅器(
dep)里面添加自己 -
自身必须有一个
update()方法 -
待属性变动触发
dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，完成视图更新。 总结：通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到一个数据响应式的效果。
v-model 的原理
增强一个组件，如何把插槽透传到组件里，引出插槽的原理
csrf和xss是什么，如何避免
如何给后端传递一个文件？
前端工程化
我看你熟悉
vue，那你讲讲vue的模板编译原理吧
👉👉 Vue模板编译原理
讲一讲
vuex的挂载过程??？？
讲一讲
vue-router的几种模式和守卫吧
👉👉 【面试题解】vue-router有几种钩子函数？具体是什么及执行流程是怎样的？
高频问题
-
一些常用的页面布局要了解
-
es6新特性，遍历数组的n种方法 -
JS原型和原型链 -
浏览器缓存策略
-
ts跟js有什么区别，特点，优点和缺点 -
什么是跨域问题，如何解决
-
项目中有什么亮点或者难点，如何解决的
-
Vue响应式原理，diff算法，虚拟dom，可能是工作经验多了，相比之前更喜欢问一些原理上面的问题了 -
Vue3和Vue2有什么区别，这个是问的最多的，基本每家都会问，可能是上次找工作的时候，Vue3还没怎么用，现在大家都开始用了，后来答的我都烦了 -
CSS盒模型
-
一些常用的页面布局要了解
-
es6新特性，遍历数组的n种方法 -
JS原型和原型链 -
ts跟js有什么区别，特点，优点和缺点 -
promise的使用及其原型方法 -
浏览器从输入
url到页面渲染之间做了哪些事情 -
什么是跨域问题，如何解决
-
前端安全问题
-
如果你写了自己会
node，可能会问express和koa的相关问题 -
webpack优化
