手写简易 Vue3 响应式系统深度解析
手写 Vue3 响应式的 reactive、effect、computed、ref、watch 五个核心模块加起来不到一百行,却是理解框架的终极钥匙。 面试手写不考记忆力,考的是否理解 WeakMap 三层数据结构的设计意图与 cleanup 清理依赖的必要性。
手写 Vue3 响应式的 reactive、effect、computed、ref、watch 五个核心模块加起来不到一百行,却是理解框架的终极钥匙。 面试手写不考记忆力,考的是否理解 WeakMap 三层数据结构的设计意图与 cleanup 清理依赖的必要性。
nextTick 本质是微任务回调注册器,Vue 把同一帧内的多次数据变更合并为一次 DOM 更新,回调在 DOM 更新后执行。 底层按 Promise.then 大于 MutationObserver 大于 setImmediate 大于 setTimeout 依次降级,面试常考为什么用微任务以及它和事件循环的关系。
computed 与 watch 共享同一个底层 ReactiveEffect,差异只在两行配置:computed 加 lazy 加 scheduler,watch 加 scheduler 加 immediate。 面试能讲清 dirty 标志位的惰性求值与两者配置差异,就覆盖了 Vue3 响应式最常被追问的两个 API。
Vue3 响应式的发动机是 track 收集依赖与 trigger 触发更新,用 WeakMap 三层结构实现 O(1) 定位。 get 时记账、set 时讨账、effect 重跑前清旧账,理解这套三层数据结构就理解了整个框架高效更新的数学保证。
Vue3 响应式基于 Proxy,能代理整个对象的 get、set、deleteProperty 等十多种操作,一举解决 Vue2 defineProperty 的三大死穴。 配合 Reflect 保住 this 与原型链,再用 WeakMap 三层结构追踪依赖,面试常考为什么 Proxy 能监听数组下标和动态增删属性。
DeepReadonly 递归把对象及其嵌套子对象全部标记为 readonly,是 type-challenges 的中等标杆题。 难点不在语法而在分支顺序:数组、函数、对象、原始类型必须按对顺序判断,一步走错类型就变形,面试常考递归加条件类型的组合。
Partial、Required、Readonly、Pick、Omit、Exclude 等内置工具类型源码加起来才几十行,却是面试手写率最高的部分。 底层全是映射类型加条件类型加 infer 三板斧的组合,拆懂这三招就能手写任意内置工具类型。
类型体操就是用 TS 类型系统写程序:条件类型当 if/else,映射类型当 map,infer 当解构,递归当循环,是 Vue3、Prisma、zod 等库的类型基础设施。 面试重点不在炫技,而在分布式条件类型的分发机制、infer 的提取心法,以及什么时候用中括号包裹关闭分发。
模板字面量类型让 TypeScript 能在类型层面拼接、匹配、解析字符串,是路由参数、国际化 key、CSS 属性值的精确约束利器。 核心是占位符的笛卡尔积展开,配合 Uppercase、Capitalize 等内置工具与 infer 做模式匹配,告别运行时正则。
协变与逆变是函数类型兼容性的底层法则:返回值位置协变(可更具体),参数位置逆变(可更宽泛)。 面试常考 strictFunctionTypes 开启后参数为何逆变、为什么能把 Handler Animal 赋给 Handler Dog,理解子类型关系即可答对。