Vue 3 面试题全套题库

Vue 3 面试题全套题库

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


一.基础 API 使用

1. refreactive

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

2. computed

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

3. watch / watchEffect

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

4. provide / inject

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

二.响应式核心

1. 响应式原理

  • 问题:Vue 3 的响应式核心是怎样实现的?
  • 回答:基于 Proxy 对对象进行扩展,同时使用 effecttrack/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,你会怎样解决响应式和组件模型?

相关推荐
悟能不能悟1 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶1 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice2 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip3 小时前
js上下文
前端·javascript
中草药z3 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)3 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休3 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel3 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组3 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架