手写简易 Vue3 响应式系统

一句话概括手写 Vue 3 响应式系统的三个核心模块：reactive（Proxy 代理）、effect（副作用追踪）、computed（惰性求值），加起来不到 80 行代码，却是理解整个框架的钥匙。核心知识点 1. reactive——代理 + 依赖收集 + 触发更新 const targetMap = new WeakMap(); let activeEffect = nul...

2026/02/24 前端核心, Vue

nextTick 实现原理

一句话概括 nextTick 是 Vue 的异步更新”守门员”——它将同一事件循环内的多次数据变更合并为一次 DOM 更新，回调在 DOM 更新完成后执行。底层利用微任务（Promise.then）实现。核心知识点 1. nextTick 解决的问题 const count = ref(0); count.value = 1; console.log(document.query...

2026/02/23 前端核心, Vue

computed 与 watch 原理

一句话概括 computed 是带缓存的派生值，只在被读取且依赖变化时才重新计算；watch 是响应式的副作用触发器，监听数据变化执行回调。两者共享 ReactiveEffect 底层，差异仅在 scheduler 和 dirty 标志位。核心知识点 1. computed——dirty 标志位 + 惰性求值 class ComputedRefImpl<T> { p...

2026/02/22 前端核心, Vue

依赖收集与触发机制

一句话概括 Vue 3 响应式的核心引擎是依赖收集（track）与触发更新（trigger）——在数据读取时”记住谁在用我”，在数据修改时”通知所有依赖者”，通过 WeakMap → Map → Set 三层数据结构实现 O(1) 级查找。核心知识点 1. targetMap——中央仓库的数据结构 WeakMap<target, Map<key, Set<effe...

2026/02/21 前端核心, Vue

Proxy 响应式原理

一句话概括 Vue 3 响应式基于 ES6 Proxy——它能拦截整个对象（而非单个属性）的 get/set/deleteProperty 等 13 种操作，一举解决 Vue 2 Object.defineProperty 的三大痛点：数组下标监听、属性动态增删、深层递归性能。核心知识点 1. Proxy 基础——代理整个对象 const target = { name: 'Ali...

2026/02/20 前端核心, Vue

类型挑战：DeepReadonly

一句话概括 DeepReadonly<T> 把对象及其所有嵌套子对象的属性全部递归标记为 readonly。它是 type-challenges 的中等难度标杆题，考的是递归类型 + 映射类型 + 边界条件处理的组合能力。核心知识点 1. 最简实现——先跑通再说 type DeepReadonly<T> = { readonly [K in keyof ...

2026/02/18 前端核心, TypeScript

内置工具类型源码解读

一句话概括 TypeScript 内置工具类型（Partial、Pick、Exclude、ReturnType 等）面试手写率极高。它们的源码加起来不过几十行，核心是映射类型 + 分布式条件类型 + infer 的三件套。核心知识点 1. Partial / Required / Readonly —— 映射类型修饰符 type MyPartial<T> = { [P ...

2026/02/18 前端核心, TypeScript

类型体操入门实践

一句话概括类型体操 = 用 TypeScript 的类型系统写”程序”——利用条件类型、映射类型、infer、递归类型等特性，在编译期完成类型推导和校验。它决定了你是”会用 TS”还是”精通 TS”，也是大厂面试的高频深水区。核心知识点 1. 分布式条件类型——拆开联合，逐个判断 // 裸类型参数触发分发 type MyExclude<T, U> = T extend...

2026/02/16 前端核心, TypeScript

模板字面量类型

一句话概括模板字面量类型 = 类型空间的字符串拼接——${Prefix}${Name} 能在类型层面拼字符串、做模式匹配、解析路由，TypeScript 4.1 后类型系统才有了”字符串运算”的能力。核心知识点 1. 基础：类型空间的 ${} type EventName = "click" | "focus" | "blur"; type HandlerName = `on${...