Vue高级面试题及答案.docx

Vue高级面试题及答案

1.Vue2响应式原理中，数组的push、pop等方法为什么能触发更新？和对象新增属性有什么本质区别？

答案：

Vue2对对象用Object.defineProperty劫持属性的get/set，但数组不能像对象那样逐个劫持索引（因为数组长度可能频繁变化，劫持所有索引性能太差）。所以Vue2做了特殊处理：

先获取数组的原型链，然后重写了push、pop、shift、unshift、splice、sort、reverse这7个会改变数组本身的方法（称为“变异方法”）；

重写后的方法里，除了执行原方法逻辑，还会手动触发依赖更新（调用dep.notify()），所以能触发视图更新。

而对象新增属性（比如this.obj.newKey=1）无法触发更新，是因为Object.defineProperty只能劫持已存在的属性，新增属性时没有提前定义get/set，Vue监测不到。这时候需要用this.$set(obj,newKey,1)，本质是手动给新增属性添加get/set，并触发依赖更新。

2.Vue的虚拟DOM和Diff算法核心逻辑是什么？为什么Diff时要“同层比较”？

答案：

虚拟DOM是用JS对象（比如{tag:div,props:{},children:[]}）描述真实DOM的结构，目的是减少直接操作DOM的性能消耗（DOM操作比JS计算慢得多）。

Diff算法是虚拟DOM更新时，对比新旧两个虚拟DOM树，找出差异部分再更新真实DOM的逻辑，核心步骤：

同层比较：只对比同一层级的节点，不跨层级比较（比如根节点的子节点只和根节点的子节点比，不会和孙子节点比）；

key的作用：列表渲染时，key作为节点的唯一标识，帮助Diff算法快速找到“相同节点”（比如列表重新排序时，有key能避免重复创建/销毁节点，只做位置移动）；

节点类型判断：如果两个节点的tag不同，直接销毁旧节点、创建新节点；如果tag相同，再对比props和children。

为什么要同层比较？因为真实DOM树中，跨层级的节点移动场景极少，而同层比较能把Diff的时间复杂度从O(n3)（全量比较）降到O(n)，大幅提升性能——如果允许跨层级比较，需要遍历所有节点找匹配，效率太低，不符合“性能优化”的初衷。

3.Vue3的CompositionAPI相比OptionsAPI，解决了哪些核心问题？实际项目中怎么判断该用哪种？

答案：

OptionsAPI的痛点是“逻辑碎片化”——比如一个表单提交功能，逻辑可能分散在data（定义表单数据）、methods（提交方法）、watch（监听表单变化）、computed（表单验证）里，当组件复杂时，找相关逻辑要在多个选项间跳，维护成本高；而且复用逻辑只能靠mixin，还会有命名冲突、来源不清晰的问题。

CompositionAPI刚好解决这些问题：

逻辑聚合：把同一功能的逻辑（比如表单处理）集中在一个setup函数里，用ref/reactive定义数据、watch/computed处理响应式、方法直接定义，不用跨选项拆分；

逻辑复用：通过“组合函数”（比如useForm()）复用逻辑，调用组合函数就能拿到相关的数据和方法，没有mixin的冲突问题，来源也清晰；

TypeScript友好：OptionsAPI的this指向不明确，TS类型推导困难，而CompositionAPI的变量和方法都是显式定义的，TS能精准推导类型。

实际项目选择：

简单组件（比如按钮、卡片）：用OptionsAPI更简洁，不用写setup和返回值；

复杂组件（比如表单、列表页）或需要复用逻辑的场景：用CompositionAPI，维护和复用更高效。

4.Vue项目中，首屏加载慢有哪些常见原因？对应的优化方案是什么（至少说3种）？

答案：

常见原因：打包体积过大、请求资源过多、服务器响应慢、没有做缓存等。

优化方案：

路由懒加载：把路由组件从“打包时全部加载”改成“访问时才加载”，用()=import(@/views/Home.vue)的写法，减少首屏打包体积；

第三方库按需引入：比如ElementUI、Vuex，不要全量引入（importElementUIfromelement-ui），而是按需引入（import{Button,Table}fromelement-ui），配合babel-plugin-component插件，减少无用代码；

图片优化：用懒加载（vue-laz