【前端面经】2025-第二场面试(偏八股文)

338 阅读5分钟

1.vue2到vue3响应式做了什么改变?具体说一说

vue2使用Object.defineProperty监听属性变化;vue3使用Proxy代理对象进行监听;两者都需要进行深度递归,但前者是在组件生成阶段,对data写的数据进行递归添加监听;后者是在你使用reactive这样的函数包裹对象才会去代理,并且在不使用具体属性时,不会发生深度递归监听;此外Proxy内部有13种方法可以劫持,对数组直接改下标这些都可以监听得到;而之前的Object.defineProperty只要get\set所以不能对数组进行很好的监听,还有新增属性,需要使用数组重写的方法来操作数组,或者使用$set新增属性等

2.vue3的watch和wactheffect区别

两者都能实现响应式地执行有副作用的回调;主要区别是追踪响应式依赖的方式;watch是需要传入监听的对象,根据它来追踪响应式的依赖,不会追踪回调里的访问的数据;另外,仅在数据源确实改变时才会触发回调。watchEffect是追踪回调里使用的响应式数据的依赖,在每次使用到的响应式属性变化,就会再次执行;

3.组件的缓存,keepalive做了什么,生命周期有什么?

可以使用keepAlive进行缓存,组件实例不会销毁,会被保存进缓存里,等下一次访问,直接从缓存里取出,再挂载就可以,生命周期有activated和deactivated;首次进入组件beforeCreate → created → beforeMount → mounted → activated;再次进入视图触发activated;离开触发deactivated;

4.域名解析过程

浏览器发起DNS查询,先从本地DNS服务器,未缓存该记录,向根域名服务器发起请求,根域名服务器返回顶级域名服务器地址,然后本地DNS服务器再访问顶级域名服务器查询,返回权威 DNS服务器地址;本地DNS服务器再向权威DNS服务器访问,查询到ip地址;本地DNS服务器将ip返回给用户,并缓存;(域名解析通过分层查询机制(浏览器 → 系统 → 本地 DNS → 根/TLD/权威 DNS))

5.commonJs和EsModule区别

1.标准来源不一致,前者为社区来源,后者是官方标准;2.模块加载机制不同,前者是动态,后者是静态,必须位于模块的顶层作用域(可以进行静态分析,从而实现树摇(tree shaking)等优化);运行时不同,前者同步,后者是异步3.语法不同,前者引入和抛出require、module.export或exports,后者import\export;4.循环依赖,前者因为动态会因为复杂引用关系导致难以追踪,后者因为结构,更为稳定追踪;

6.get和post区别,post发起2次请求为啥?

请求参数位置不同,get在url拼接且长度受限,不够安全,并且get具有幂等性,多次执行同一个get请求,服务器返回相同结果,可以被缓存;post参数在请求体里,可以发送大量数据,相对安全,但是安全性更依赖一些加密方式比如ssl/tls加密、证书等,post不是幂等性,每次都会创建新的请求,post缓存需要在请求头进行Cache-Control\Expires字段设置。post请求第一次是一个预检请求,向服务器确认是否可以发起请求,如果服务器拒绝,则不会发起真正的请求,服务器同意才会发起第二次请求。

7.promise和async await区别,await会阻塞后续代码?

简单回答:后者是前者的语法糖,async后面返回就是promise,await相当于把异步做到了一个同步的概念;Promise链式操作,自己catch异常,async则要在函数内catch,prmoise有很多并行器,比如promise.all\promise.race,但是async没有;await后面有了结果才会执行下一行代码,所以await会阻塞后面代码,并放入微任务队列。

8.事件循环?

个人理解:碰到执行代码块(宏任务)先进入执行栈,执行栈先进行同步代码的执行,并把遇到的异步代码放入任务队列里,这里异步代码可能会存在setTimeout\promise.then\await后面代码等,任务队列会对异步任务(代码)进行分类,优先级最高的叫微任务,一般就是promise.then、process.nextTict,还有宏任务setTimeout\setInterval\I/O操作、点击方法;当前执行栈同步代码完毕后就会去任务队列找微任务执行,等微任务执行完,再从宏任务取;这个栈先从不断循环取任务执行的过程就是事件循环;图片展示更为直观;其实这样看来,先从宏任务进栈,然后把本次宏任务里的异步微任务再进栈执行,完成本次循环;下一次则从新的宏任务开始。

9.webpack5和4比新增了什么?

个人理解:性能更好,引入tree-shaking去除没有用到的,之前全打包;引入了持久化缓存,hash生成文件名,利用浏览器缓存来进行是否需要更新,cache的功能更细,可以配置针对第三方包的缓存;

10.vue3diff算法做了什么优化?为什么用最长递增子序列?

个人目前不是很好的理解:静态提升(静态节点提升到渲染函数外部),实现对静态节点复用,不用重新创建和对比;优化了比较虚拟dom的算法,使用了最长递增子序列算法,做到最小化操作dom;为了可以保证移动次数最少,因为在位置数组中递增就能保证在旧数组中的相对位置的有序性,从而不需要移动,递增子序列的最长可以保证移动次数的最少。

总结:每道题都知道大概,但是感觉并不够精准,应该是核心理解上还不够,所以重复看重复忘,当然这次面试不止这些,还有一些css的position、bfc、布局等,简单或者客观的问题,工程化的理解、项目的打包优化;回答仅供参考,没有正确价值,有误可以进行指导或者补充,感谢!面经的分享是枯燥的!