Vue 3 面试题全套题库

Vue 3 面试题全套题库

本题库分为基础 API 使用，源码原理，应用场景，性能优化，项目实战，高级技术分析等模块，进行精精精致的分组与综合评估。

一.基础 API 使用

1. ref 和 reactive

• 问题：ref 和 reactive 有什么区别？它们在源码中如何实现？
• 回答：ref 创建原始值的对象，包裹为 RefImpl ，通过 Object.defineProperty 实现 value getter/setter。reactive 创建是 Proxy 封装的对象，实现添调。

2. computed

• 问题：computed 是如何管理依赖与缓存的？
• 回答：它封裹了 ComputedRefImpl，内部管理一个 lazy effect ，通过 scheduler 充斥缓存。仅当 .value 被读取时，才会计算。

3. watch / watchEffect

• 问题：watchEffect 和 watch 有什么本质区别？
• 回答：watchEffect 是合成效果，不需要明确指定监听的属性，依赖收集由\u reactive effect 控制；watch 需要明确指定监听为 getter 或者 ref 对象。

4. provide / inject

• 问题：这两者是如何通过组件树传递值的？
• 回答：通过设置和搜索 currentInstance.provides ，它使用原型链解决继承，接收组件后续自动寻找父组件的 provides。

二.响应式核心

1. 响应式原理

• 问题：Vue 3 的响应式核心是怎样实现的？
• 回答：基于 Proxy 对对象进行扩展，同时使用 effect 和 track/trigger 构建依赖。通过 targetMap => key => dep 存储依赖关系。

2. 带有 scheduler 的 effect

• 问题：effect 的 scheduler 有什么用？
• 回答：充斥性能调度系统，如 computed 的 lazy 模式，watch 系统延迟触发或 batch 执行。

三.组件组合 API 和生命周期

1. setup 与设置范围

• 问题：setup 中的代码是如何解析和结合到组件中的？
• 回答：setup 执行给 component instance 创建后，属性保存在 setupState，并通过 proxy 打通对外接口。

2. 生命周期

• 问题：生命周期函数是如何设置和触发的？
• 回答：通过处理器函数（如 onMounted ）将代码 push 到 instance.lifecycleHooks 列表，在相应阶段同一次调用。

四.虚拟 DOM 和模板编译

1. VNode 和模板编译

• 问题：说说模板编译和虚拟 DOM 组成的流程
• 回答：模板 => AST => 代码生成 => render 函数 => VNode 树 => patch

2. Patch 迁移策略

• 问题：如何确保最小 DOM 操作？
• 回答：通过同步方法、关键等等对比。当有键时使用动态迁移策略，如内置的最长递增子序列算法。

五.性能和优化

1. Suspense

• 问题：Suspense 是怎样支持 async setup 或延迟加载组件的？

2. KeepAlive

• 问题：KeepAlive 是如何实现的，是怎样保存 VNode 的？

六.项目实战

1. 项目中组件通信使用场景：

• props/emits
• mitt 中央事件管理
• provide/inject
• vuex / pinia

七.源码实战问题

1. Vue 的源码是如何管理它的依赖的？
2. Vue 是如何解析 template 并生成 render 函数的？
3. Vue 响应式核心中 track/trigger 的相关功能是如何实现的？
4. 如果你自己做一个 mini-vue，你会怎样解决响应式和组件模型？