2024-8月前端最新面试题

1. 性能优化、分区打包怎么打的？

从宏观的角度说性能优化呢，就是说图片的压缩、js文件的压缩，css文件的压缩，代码分割、懒加载用箭头函数的方式引入组件这些。
微观的话角度说就是要去更注意代码的细节，比如v-if和v-show分情况去使用、避免v-for和v-if同时使用、合理的使用watch和computed、引入路由的时候使用路由懒加载、引入第三方资源的时候把资源放到第三方cdn服务上，可以提高页面速度，减少打包后的项目体积、使用一些库和包的时候尽量按需导入、beforeDestory及时清除一些定时器或监控什么的，使用节流和防抖。
另外如果想要优化项目的话，我们还要结合项目本身，例如我的上个项目就是有一个思极地图的js文件，当时是放在项目本地引入页面会加载很慢，最后我们是放到了服务器上去在组件内单独引入，还有一些我们封装的公共组件库比较大的，我们会去给他分区打包等等，如果实在找不到性能问题的原因还可以使用build --report去生成一个内存性能占比页面或者第三方库去生成。

2. 宏任务是什么，微任务是什么？

宏任务是指script、setTimeout、setInterval、异步的ajax、ui render等，微任务是指promise、async/await、process.nextTick、Object.observe、MutationObserver,同步代码首先被执行，直到遇到第一个宏任务或微任务。如果遇到微任务，则将其添加到微任务队列中，并继续执行同步代码。如果遇到宏任务，则将其添加到宏任务队列中，并继续执行同步代码。当前同步任务执行完毕后，JavaScript引擎会先执行所有微任务队列中的任务，直到微任务队列为空。然后执行宏任务队列中的第一个任务，直到宏任务队列为空。重复步骤4和5，直到所有任务都被执行完毕。

3. react和vue和angular的区别？

设计理念：Vue的设计理念是渐进式框架，采用自底向上增量开发的设计，非常适合初学者和需要快速上手的开发者。React则是由Facebook开发的，强调函数式编程的理念，更适合构建大型应用。
数据流：Vue支持双向数据绑定，即数据可以从视图流向模型，也可以从模型流向视图。React则采用单向数据流，数据只能从父组件流向子组件，通过props传递数据。
组件化：Vue和React都推崇组件化开发，但Vue提供了mixins和自定义指令等特性，而React则通过高阶组件(HOC)和自定义Hooks来实现组件的组合和扩展。
性能优化：Vue通过响应式系统和异步更新机制进行性能优化，而React则通过虚拟DOM和shouldComponentUpdate等生命周期方法进行优化。
生态系统和社区支持：React拥有更大的社区和更丰富的生态系统，提供了大量的第三方库和工具。Vue虽然相对较新，但已经拥有一些受欢迎的插件和工具，如Vue Router和Vuex。
学习曲线：Vue的模板语法和数据绑定使得学习曲线相对平缓，而React的JSX语法和函数式编程理念可能让初学者感到有些陡峭。

4. hash和history模式？

hash模式的实现原理是通过监听hashChange事件来实现的，前端js把当前hash地址对应的组件渲染到浏览器中。
history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，
并更换地址栏地址信息，但是页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；
监听popstate事件是为了响应浏览器的前进后退功能。

5. http协议？

HTTP (“超文本传输协议”) 是一种应用非常广泛的 应用层协议, 我们平时打开一个网站, 就是通过 HTTP 协议来传输数据的
HTTP 往往是基于传输层的 TCP 协议实现的, (HTTP1.0, HTTP1.1(最主流), HTTP2.0 均为TCP, HTTP3 基于 UDP 实现)
当我们在浏览器中输入一个 CSDN 的"网址" (URL) 时, 浏览器就给 CSDN 的服务器发送了一个 HTTP 请求, CSDN 的服务器返回了一个 HTTP 响应
这个响应结果被浏览器解析之后, 就展示成我们看到的页面内容, (这个过程中浏览器可能会给服务器发送多个 HTTP 请求, 服务器会对应返回多个响应, 这些响应里就包含了页面 HTML, CSS, JavaScript, 图片, 字体等信息)

6. 路由钩子？

组件内的路由守卫: beforeRouteEnter() beforeRouterUpdate() beforeRouteLeave() 组件内调用
全局路由守卫: beforeEach() afterEach() 一般main.js内调用
单个路由守卫: beforeEnter() 路由内调用

7. 强缓存和协商缓存？

强缓存其实就是浏览器本地经过判断服务器设置的过期时间来判断是否过期的，没有过期就使用缓存的数据，如果过期了就重新请求服务器。
协商缓存是浏览器每次都向服务器请求，由服务器告诉浏览器该拿缓存的资源还是返回最新的资源

8. 怎么判断对象是个数组和对象？

.toString=== [object Object] constructor proto ===Object.prototype getPrototypeOf(val)=Object.prototype
数组的 isArray（） toString（）=[object Array] val instanceof Array 为true代表为数组 constructor proto ===Array.prototype getPrototypeOf(val)===Array.prototype

9. 怎么深层拷贝对象？

利用JSON.parse()和JSON.stringify（）方法， object.assign方法 利用递归方法新创建一个数组或对象，然后重新赋值,

10. vuex的使用？

state mauations actions getters modal commit dispath
js的继承性？
一、原型链继承二、借用构造函数继承三、组合继承（组合原型链继承和借用构造函数继承）四、原型式继承五、寄生式继承六、寄生组合式继承

11. call bind apply有什么区别？

call、apply是同步的他们只是调用方法然后改变了this的指向只是临时的一次，而bind方法是异步的，他是永久的修改了this的指向，然后返回了一个新的函数，他修改的不是原来的函数 apply和其他两个传参不一样，一个传数组，其他两个单个传

12. 项目的难点亮点？

难点一是权限判断方面的和 页面tabs切换方面的 当时的场景呢是领导们当时呢为了追求开发速度，权限这块的设计还没有讨论出一个结果就开始做功能了，做到了一半才讨论出结果需要加权限，那么权限呢就涉及到两个方面，一个是页面的路由权限
还有一个呢是页面下按钮的权限，当时我们那个后台给前端的数据呢菜单分为一级菜单二级菜单三级菜单四级菜单，但是无论第几级菜单下都可能有很多个详情页面之类的，当时领导们就说像这些详情页不去配置，因为太多了，所以我们加路由权限的时候是
这样判断的，首先把后台返回的菜单递归遍历全部放到一个数组里放在vuex里，然后要跳转的路由必须是后台返回的路由或者是路由里包含有后台返回的菜单的才可以正常跳转。 那按钮的权限也是把所有的权限遍历，然后放到一个对象里，菜单的id当做key，
value是一个数组放的是这个菜单页面下的所有按钮的权限，然后封装了一个指令类似于v-show的指令，去判断是否有此权限，还附带了一个权限判断的方法
难点二是当时有个功能他是可能有五百多个word文件，每个文件呢都需要做成一个form表单去填写提交，由于1.0的系统是按照字段判断写死的页面，那么这个写死肯定不行，以后假如说1千个文件呢，所以我就对这个模块进行了设计，就是我首先新建了一个页面
用来配置表单和表格的增删改查以及表单的类型，等我编辑好了提交给后台一个json，后台去保存，，然后当我去填写的时候根据当时新增的这个json后台去给我返回，然后我再去写一些组件循环判断去展示不同的页面。

13. vue2和vue3的区别

Vue 2和Vue 3之间的主要区别包括：

1. 响应式原理‌：
   Vue 2：使用Object.defineProperty来实现数据的响应式更新，这种方式只能监听对象的属性变化，对于数组的某些操作（如数组长度变化）无法监听。
   Vue 3：使用Proxy对象来实现数据的响应式更新，提供了更多的拦截操作，能够监听数组的变化和对象的属性新增与删除。

2. 生命周期‌：
   Vue 2：生命周期钩子函数名称没有变化，但在Vue 3的组合式API中，生命周期钩子的使用方式有所不同，需要先引入才能使用。
   Vue 3：虽然大部分生命周期钩子的名称没有变化，但在组合式API中，生命周期钩子的使用方式有所调整。
   beforeCreate --------> setup(()=>{}) 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
   created --------> setup(()=>{})
   beforeMount --------> onBeforeMount(()=>{})组件挂载到节点上之前执行的函数
   mounted --------> onMounted(()=>{})组件挂载完成后执行的函数；
   beforeUpdate --------> onBeforeUpdate(()=>{})组件更新之前执行的函数；
   updated --------> onUpdated(()=>{})组件更新完成之后执行的函数
   beforeDestroy --------> onBeforeUnmount(()=>{})组件卸载之前执行的函数；
   destroyed --------> onUnmounted(()=>{})组件卸载完成后执行的函数
   activated --------> onActivated(()=>{})被包含在 中的组件，会多出两个生命周期钩子函数，被激活时执行
   deactivated --------> onDeactivated(()=>{})比如从 A 组件，切换到 B 组件，A 组件消失时执行；
   errorCaptured --------> onErrorCaptured(()=>{})当捕获一个来自子孙组件的异常时激活钩子函数。

3. ‌API类型‌：
   Vue 2：使用选项型API（Options API），将数据、计算属性、方法等分割在不同的属性中。
   Vue 3：使用组合式API（Composition API），允许将相关的逻辑写在一起，提高了代码的可读性和可维护性。

4. ‌多根节点‌：
   Vue 2：不支持多根节点，每个组件只能有一个根节点。
   Vue 3：支持多根节点（Fragments），允许组件拥有多个根节点。

5. ‌其他特性‌：
   Vue 3提供了更多的新特性，如Teleport组件（用于将部分DOM移动到Vue应用之外的位置）、Suspense组件（用于异步组件加载时的加载状态显示）、更好的TypeScript支持等。

6. ‌性能优化‌：
   Vue 3在性能上进行了优化，包括更高效的虚拟DOM实现、编译模板的优化、更高效的组件初始化和更新性能等。

14. http和https？

HTTP 传输的数据都是未加密的，也就是明文的，因此使用 HTTP 传输信息非常不安全。为了保证数据能加密传输，网景公司设计了 SSL(Secure Sockets Layer) 协议用于对 HTTP 传输的数据进行加密，从而就诞生了 HTTPS。二者主要区别如下：

1. HTTPS 需要到 ca 申请证书，一般免费证书较少，因而需要一定费用。

2. HTTP 信息是明文传输，HTTPS 则是具有安全性的 ssl 加密传输协议。

3. HTTP 和 HTTPS 连接方式完全不同，端口也不一样，前者是 80，后者是 443。

4. HTTP 的连接很简单，是无状态的。HTTPS 是由 SSL+HTTP 构建的可进行加密传输、身份认证的网络协议，比 HTTP 安全。

5. 性能影响：由于HTTPS需要对数据进行加密和解密处理，因此在某些情况下可能会略微增加延迟并减少缓存效率。这意味着，相对于HTTP而言，HTTPS在访问速度上可能稍逊一筹。然而，随着硬件性能的提升和加密技术的优化，HTTPS的性能影响已经逐渐减小。

6. 资源消耗：HTTPS的加密和解密过程需要消耗更多的计算资源。因此，在资源有限的环境下使用HTTPS可能会增加服务器的负担。然而，对于大多数现代服务器而言，这种资源消耗是可以接受的。此外，通过合理配置和优化SSL/TLS协议参数，可以进一步降低资源消耗并提高性能。

7. 兼容性：由于HTTPS需要使用SSL/TLS证书和加密技术，因此在某些情况下可能会出现兼容性问题。例如，某些旧版浏览器或操作系统可能不支持最新的SSL/TLS协议或证书格式。然而，随着技术的不断进步和普及，HTTPS的兼容性已经得到了极大的改善。现代浏览器和操作系统普遍支持HTTPS协议，并且越来越多的网站开始采用HTTPS来保护用户数据的安全

8. SEO优化：对于搜索引擎优化（SEO）而言，HTTPS也具有一定的优势。搜索引擎更倾向于将采用HTTPS协议的网站排在搜索结果的前列，因为这表明这些网站更加注重用户数据的安全性和隐私保护。因此，采用HTTPS协议可以帮助网站提高搜索引擎排名和吸引更多用户访问。

15. diff算法有什么变化？

diff算法是一种递归算法，他从虚拟dom树的根节点开始逐层比较新旧节点，在比较两个节点时，先比较他们的标签类型是否相同，如果不同则直接判定为不同节点，直需要替换整个节点，如果类型相同，则继续比较节点的属性和子节点。在比较属性时如果新旧节点的属性相同，则不需要任何操作，如果属性不同则需要更新相应的属性。在比较子节点时如果新节点没有子节点，而旧节点有子节点，就需要删除就节点的子节点，如果新节点有子节点，就节点没有子节点就需要添加新的子节点，如果新旧节点都有子节点则需要递归比较他们的子节点。

1. Virtual DOM的优化
   Vue 2 中的 diff 算法针对整个 Virtual DOM 树进行了完整的比较，导致在大型应用中可能存在性能问题。
   Vue 3 中通过静态分析和标记，将组件标记为静态、动态或稳定，从而避免不必要的 Virtual DOM 比较，提高了渲染性能。
2. 动态指令的优化
   Vue 2 中动态指令的 diff 算法在某些情况下效率不高，可能会导致不必要的重新渲染。
   Vue 3 中通过优化动态指令的处理方式，提高了动态指令的 diff 效率，减少了不必要的更新操作，提升了性能。
3. 事件侦听器的优化
   在 Vue 2 中，每次更新都会重新设置事件侦听器，存在一定性能损耗。
   Vue 3 中通过事件侦听器的缓存和重用，减少了事件侦听器的重复创建和销毁，提高了事件的处理效率。
4. 静态树的处理
   Vue 2 中没有对静态树（即不会发生变化的部分）做特殊处理，仍然会进行完整的 diff 操作。
   Vue 3 中对静态树进行了优化处理，避免了不必要的比较和更新，提高了整体渲染性能。
5. Fragments的处理
   在 Vue 2 中，使用 Fragments 时会引入额外的 Virtual DOM 节点，导致在 diff 过程中产生额外的开销。
   Vue 3 中通过优化 Fragments 的处理方式，减少了额外节点的创建和比较，提高了对 Fragments 的 diff 效率。

16. vue2的minxs和vue3的区别？

17. vue的传参？

1. props传参
2. $attrs和$listeners
3. $emit通知
4. < slot v-bind:user=“user” name=“header”> < /slot > < template v-slot:header=“slot”>{{slot.user}}< /template>
5. project/inject 注入的值是非响应的
6. Vuex
7. 浏览器缓存
8. eventbus

18. vue3组合式api？

组合式api是compotion

19. ref & reactive？

1. ref 用于构建简单值的响应式数据，比如String，Number，基于 Object.defineProperty 监听 value 值,原理是将普通的值转化为对象，并且在获取和设置值时可以增加依赖收集和触发更新功能
2. reactive 参数必须是对象(json 或 Array）,不能定义普通类型【ref 与reactive的区别与联系】
3. 一般来说，ref被用来定义基本数据类型，reactive定义引用数据类型，ref定义对象时，value返回的是proxy，reactive定义对象时返回的也是proxy，而这确实存在一些联系，ref来定义数据时，会对里面的数据类型进行一层判断，当遇到复杂的引用类型时,还是会使用reactive来进行处理
4. 两种方式声明变量类型不同