【前端面试题✨】Vue篇（一）

1. Vue 有了数据响应式，为何还要 diff ？

答： 响应式只能告诉 “哪个组件需要更新”，但不告诉 “DOM如何最小化变更”。diff（虚拟 DOM 对比）用来在旧/新 VNode之间定位差异，生成最小 DOM。
操作序列（如移动/插入/删除子节点），尤其列表更新、节点重排时至关重要（如基于 key 的最长递增子序列优化）。

2. Vue 3 为什么不做（或基本不需要）时间分片（time slicing）？

答：
React 引入时间分片为可中断渲染，解决大渲染任务阻塞事件响应。
Vue 3 采用编译期优化（Patch Flags、静态提升）+ 非常细粒度的更新（effect/scheduler），单次更新开销更小，通常同步渲染即可完成。
Vue也有调度器（微任务队列）做批量与去重，在多数场景无需引入复杂的可中断机制；若极端场景需要让步，可自行 requestIdleCallback 分块渲染。

3. Vue 3 为什么引入 Composition API？

答： 解决 Options API 的逻辑切散与复用笨重问题。CompositionAPI 用函数（setup/hooks）按特性聚合逻辑，易抽离为可复用的composable；同时更友好地支持 TS 类型推断、逻辑组织与代码分割。

4. 说一下 Vue 事件机制，并手写 $on/$off/$emit/$once

class Emitter {constructor(){ this.events = new Map(); }$on(type, handler){(this.events.get(type) || this.events.set(type, new Set()).get(type)).add(handler);}$off(type, handler){if (!type) { this.events.clear(); return; }const set = this.events.get(type);if (!set) return;if (!handler) set.clear();else set.delete(handler);}$emit(type, ...args){const set = this.events.get(type);if (!set) return;[...set].forEach(fn => fn(...args));}$once(type, handler){const wrap = (...args)=>{ handler(...args); this.$off(type, wrap); };this.$on(type, wrap);}
}

答： Vue 内部事件中心机制类似，$emit 触发事件，$on
注册监听，$off 移除，$once 注册一次性监听。

5) computed 为什么可以依赖另一个 computed？

答： computed 内部是惰性副作用（lazy effect），访问它会执行
getter 并 track 依赖。A 计算属性读取 B 时，会触发 B 的 getter → 建立
A 对 B 的依赖链。B 的依赖变化导致 B 的 dirty，进而在下次读取 A
时联动更新。

6) 说一下 vm.$set 原理（Vue 2）

答： Vue 2 用 Object.defineProperty劫持，新增属性默认不响应。$set(obj, key, val) 会：
1)若是数组：调用 splice 触发依赖通知；
2) 若是对象：执行 defineReactive(obj, key, val) 把新键转为响应式，并 dep.notify() 通知视图。
Vue 3 用 Proxy，无需 $set。

7) 怎么在 Vue 中定义全局方法?

答：

• Vue 2：Vue.prototype.$xxx = fn；
• Vue 3：app.config.globalProperties.$xxx = fn;
  更推荐用插件或 provide/inject 实现解耦。

8) Vue 中父组件怎么监听到子组件的生命周期？

答： Vue 2 可用 @hook:mounted，Vue 3 需子组件 emit自定义事件，父组件监听。或子用 expose()，父用 ref。

9) Vue 组件里写的原生 addEventListener 要销毁吗？

答： 绑定到 window/document/全局对象的必须在 beforeUnmount清理。模板指令绑定 Vue 会自动清理。推荐 AbortController 简化。

10) 说说 Vue 3 的响应式设计原理

答： 基于 Proxy：

• track：读时收集依赖；
• trigger：写时通知effect；
• ref 包装 .value；
• computed 用 dirty 缓存；
• 迭代 key / 数组 方法额外处理。

11) Vue 列表 diff 为何强调 key？

答： key
保证节点稳定身份，减少错误复用与无谓重建。缺失时可能导致状态错乱。

12) Vue 3 的编译期优化有哪些？

答： 静态提升、Patch Flags、VNode/事件缓存等，最大化缩减运行时 diff。

13) watch、watchEffect、computed 区别？

答：

• computed：有返回值、带缓存；
• watch：精确侦听源，能拿到新旧值；
• watchEffect：立即执行，自动依赖收集。

14) provide/inject 与全局单例的取舍

答： provide/inject 是组件树范围的依赖注入，作用域隔离强，可测试。全局单例更耦合。

15) Vue 2 与 Vue 3 的 v-model 差异

答： Vue 2 默认 value/input，Vue 3 改为 modelValue/update:modelValue，且支持多绑定。

16) 组件缓存：keep-alive 原理

答： 缓存组件实例，不销毁。生命周期有 activated/deactivated。配合 include / exclude 控制。

17) Vue 项目的性能优化

答：

• 合理 key；
• computed 代替模板大计算；
• 路由懒加载；
• 图片懒加载；
• 打包 Tree-shaking。

18) Vue 与事件循环

答： Vue 更新任务进入微任务队列，nextTick 用 Promise/MO/降级。这样实现批量与去重。

19) SPA 的安全防护

答：

• XSS：避免 v-html、CSP、防止注入；
• CSRF：SameSite、Token。

20) SSR/CSR/SSG 区别

答： CSR 部署简单；SSR 首屏快/SEO好但复杂；SSG 静态内容高效。