From a22eeeb94072b276931ce2979e27fc045f13d1c0 Mon Sep 17 00:00:00 2001
From: "WRSNDM\\Administrator" <kurosago@outlook.com>
Date: Sun, 4 Jan 2026 21:19:13 +0800
Subject: [PATCH] no message

---
 react/README.md |  236 ++++++
 ts/README.md    |  240 ++++++
 vue3/README.md  | 2102 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 2578 insertions(+)
 create mode 100644 react/README.md
 create mode 100644 ts/README.md
 create mode 100644 vue3/README.md

diff --git a/react/README.md b/react/README.md
new file mode 100644
index 0000000..ba00c1b
--- /dev/null
+++ b/react/README.md
@@ -0,0 +1,236 @@
+# React 深度面试题及解析 (Vue 3 开发者视角版)
+
+> 本文档专为熟悉 Vue 3 + TypeScript 的开发者编写。我们将通过对比 Vue 3 的核心概念（响应式、Composition API、Diff 算法等）来深度解析 React 的原理，帮助你快速建立映射关系并掌握 React 高频面试点。
+
+---
+
+## 目录
+
+1. [核心设计理念对比](#1-核心设计理念对比)
+2. [Hooks 与 Composition API](#2-hooks-与-composition-api)
+3. [Fiber 架构与并发模式](#3-fiber-架构与并发模式)
+4. [状态管理与组件通信](#4-状态管理与组件通信)
+5. [性能优化机制](#5-性能优化机制)
+6. [Diff 算法深度解析](#6-diff-算法深度解析)
+7. [TypeScript 实战差异](#7-typescript-实战差异)
+
+---
+
+## 1. 核心设计理念对比
+
+### Q1: React 的"不可变数据" (Immutable) 与 Vue 的"可变响应式" (Mutable) 有什么本质区别？为什么 React 需要它？
+
+**Vue 3 视角解析：**
+在 Vue 3 中，我们习惯直接修改对象 `state.count++`，Proxy 会拦截这个操作并自动触发更新。这是 **"Mutable + 细粒度依赖收集"**。
+
+**React 原理：**
+React 是 **"Immutable + 全量检测"**（组件级）。
+- **不可变性**：React 中不能直接修改 state (`this.state.count++` 是无效的)，必须调用 `setState` 传入一个新的值。
+- **为什么**：React 没有细粒度的依赖收集系统。当状态变化时，React 默认不知道具体哪个属性变了，它只知道"组件需要更新了"。通过比较 `oldState === newState` (浅比较) 来决定是否需要重新渲染。如果数据是可变的，引用没变但内容变了，React 就无法快速感知变化，或者需要昂贵的深比较。
+
+**面试回答要点：**
+1.  **数据流向**：React 强调单向数据流和不可变性，通过 `setState` 触发更新，生成全新的 Virtual DOM 树。
+2.  **更新策略**：Vue 是"推"（Push）模式，依赖变了自动推送到组件；React 是"拉"（Pull）模式，状态变了，React 重新执行组件函数，产出新 UI。
+3.  **心智模型**：React 组件本质是 `UI = f(state)`，每次 Render 都是一次全新的函数调用，闭包在其中扮演核心角色（Capture Value 特性）。
+
+---
+
+### Q2: JSX 与 Vue Template 的编译结果有什么不同？
+
+**Vue 3 视角解析：**
+Vue Template 编译成 Render Function，但 Vue 做了大量**编译时优化**（PatchFlags、静态提升、Block Tree），能静态分析出哪些节点是动态的。
+
+**React 原理：**
+JSX 本质是 `React.createElement` (或 `_jsx`) 的语法糖。
+- **灵活性**：JSX 是完全的 JavaScript，拥有 JS 的全部能力（变量、逻辑控制）。
+- **优化难度**：因为太灵活（动态性太强），React 很难像 Vue 那样做极致的编译时优化（虽然 React Compiler/React Forget 正在尝试解决这个问题）。React 更多依赖运行时的 Fiber 架构来调度更新。
+
+**代码对比：**
+
+```typescript
+// React JSX
+const element = <div className="foo">{isShow && <Span />}</div>;
+// 编译为: React.createElement('div', { className: 'foo' }, isShow && React.createElement(Span))
+```
+
+---
+
+## 2. Hooks 与 Composition API
+
+### Q3: `useEffect` 的依赖数组 (Dependency Array) 为什么容易产生闭包陷阱？与 Vue `watch` 有何不同？
+
+**Vue 3 视角解析：**
+Vue 的 `watchEffect` 自动收集依赖，`watch` 也可以直观地监听 ref。Vue 的组件 setup 只运行一次，闭包问题较少。
+
+**React 原理：**
+React 函数组件**每次渲染都会重新执行**。
+- **闭包陷阱**：如果在 `useEffect` 中使用了某个 state 但没放入依赖数组，`useEffect` 内部引用的就是**上一次渲染时的旧变量**（闭包捕获了旧值）。
+- **Stale Closure**：这是 React Hooks 最核心的痛点之一。
+
+**示例：**
+
+```typescript
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      // 错误：这里的 count 永远是 0 (第一次渲染时的闭包)
+      console.log(count); 
+      // 修正：setCount(c => c + 1) 或将 count 加入依赖数组
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []); // [] 导致 effect 只执行一次，捕获了初始作用域
+}
+```
+
+**面试回答要点：**
+1.  **执行机制**：Hooks 依赖于函数组件的多次执行，利用闭包保存状态。
+2.  **依赖数组**：必须诚实地列出所有依赖，否则会读取到旧值。
+3.  **对比 Vue**：Vue 的 setup 仅执行一次，响应式数据是引用的 Proxy，不存在"旧值"问题，心智负担更小；React 需要开发者手动维护依赖。
+
+### Q4: 为什么 React Hooks 不能写在条件语句（if/for）里？
+
+**Vue 3 视角解析：**
+Vue Composition API (`ref`, `reactive`) 可以随便写，因为 setup 只跑一次，变量声明了就在那。
+
+**React 原理：**
+React 内部通过**链表**（Linked List）来存储 Hooks 的状态。
+- **顺序很重要**：React 没有名字来区分 `useState(1)` 和 `useState(2)`，它完全依赖**调用顺序**来对应状态。
+- 如果放在 `if` 里，某次渲染跳过了一个 Hook，后面的 Hook 拿到的状态就会错位（比如把 `name` 的 state 给了 `age`）。
+
+**源码简化逻辑：**
+```javascript
+// 伪代码
+let hooks = [];
+let currentHookIndex = 0;
+
+function useState(initial) {
+  const hook = hooks[currentHookIndex] || { state: initial };
+  hooks[currentHookIndex] = hook;
+  currentHookIndex++; // 索引自增，依赖顺序
+  return [hook.state, setState];
+}
+```
+
+---
+
+## 3. Fiber 架构与并发模式
+
+### Q5: 什么是 React Fiber？它解决了什么问题？（对比 Vue 的更新机制）
+
+**Vue 3 视角解析：**
+Vue 的更新是**细粒度**的。组件级 Watcher 知道具体哪个组件变了，更新过程通常很快，不需要"时间切片"这种复杂机制。
+
+**React 原理：**
+React 的更新通常是**全量递归**（从根节点或 Context Provider 开始）。在 React 15（Stack Reconciler）时代，一旦开始 Diff，就必须递归到底，中间无法中断。如果树很深，JS 线程被占用超过 16ms，页面就会掉帧卡顿。
+
+**Fiber 架构：**
+1.  **数据结构**：将递归的树结构转变为**链表**结构（Fiber Node）。这使得遍历可以**暂停、中止、恢复**。
+2.  **时间切片 (Time Slicing)**：将渲染任务拆分成小块。浏览器空闲时（`requestIdleCallback` 概念）执行一部分 Diff，有高优先级任务（如用户输入）插队时，暂停低优先级任务。
+3.  **双缓存 (Double Buffering)**：在内存中构建好新的 Fiber 树（workInProgress tree），构建完成后一次性替换 Current tree，减少页面闪烁。
+
+**面试回答要点：**
+- **核心目标**：实现**并发渲染 (Concurrent Rendering)**，解决 CPU 密集型更新导致的页面卡顿。
+- **实现方式**：将同步的递归 Diff 改为异步的可中断遍历。
+
+---
+
+## 4. 状态管理与组件通信
+
+### Q6: Redux/Zustand 与 Vuex/Pinia 的区别？
+
+**Vue 3 视角解析：**
+Pinia 本质是基于 Proxy 的全局响应式对象，非常直观，修改 state 直接赋值即可。
+
+**React 原理：**
+Redux 是典型的**单向数据流** + **不可变数据**。
+- **Action -> Reducer -> New Store**。
+- 必须返回新的 State 对象，不能直接修改。
+- **Context API**：React 自带的跨组件通信，但有性能缺陷（Provider 更新，所有 Consumer 强制重渲染），通常配合 `useMemo` 优化，或者使用 Zustand/Recoil 等库。
+
+**Zustand (推荐)**：
+Zustand 的用法非常像 Vue 3 的 Composition API + Pinia，去除了 Redux 的样板代码，支持直接修改（通过 immer）或返回新对象，是目前 React 生态中最符合直觉的库。
+
+---
+
+## 5. 性能优化机制
+
+### Q7: `useMemo` 和 `useCallback` 是做什么的？Vue 为什么很少需要它们？
+
+**Vue 3 视角解析：**
+Vue 的 `computed` 自动缓存，组件更新也是自动精确控制的。子组件 props 没变，Vue 默认就不会去递归更新子组件（除非插槽等情况）。
+
+**React 原理：**
+React 组件默认行为：**父组件更新，所有子组件无条件重新渲染**。
+- **性能浪费**：即使子组件 props 没变，也会运行。
+- **React.memo**：高阶组件，用于包裹子组件，做 Props 的浅比较（类似 Vue 的默认行为）。
+- **useCallback**：
+  - 问题：父组件每次 Render，定义的函数 `const handleClick = () => {}` 都是**新引用**。
+  - 后果：传给子组件时，`React.memo` 发现 props.onClick 变了，导致子组件重渲染。
+  - 解决：`useCallback` 缓存函数引用，只有依赖变了才生成新函数。
+- **useMemo**：缓存计算结果（类似 Vue `computed`），避免每次 Render 都进行昂贵计算。
+
+**面试回答要点：**
+- React 的优化是**手动挡**（开发者决定何时缓存），Vue 是**自动挡**（响应式系统自动处理）。
+- 滥用 `useMemo` 也有开销，只在昂贵计算或引用稳定性关键时使用。
+
+---
+
+## 6. Diff 算法深度解析
+
+### Q8: React Diff 算法与 Vue Diff 算法的区别？
+
+**Vue 3 视角解析：**
+Vue 2 使用双端 Diff，Vue 3 使用**最长递增子序列 (LIS)** 算法处理乱序移动，效率极高。
+
+**React 原理：**
+React Fiber 的 Diff 算法（Reconciliation）相对简单，采用**单向遍历**。
+1.  **仅右移**：React 在对比数组列表时，采用 `lastPlacedIndex` 指针。如果新节点在旧集合中存在且位置靠后，则不动；如果位置靠前，则向后移动。
+2.  **为什么不用双端？**：Fiber 结构是单向链表（Sibling 指针），很难像数组那样方便地从尾部开始对比（没有反向指针）。
+3.  **Key 的重要性**：和 Vue 一样，Key 是识别节点的唯一标识。没有 Key，React 只能按索引对比，导致状态错乱或性能低下。
+
+**总结对比：**
+- **Vue**：双端比较 / 最长递增子序列 -> 移动次数最少，算法复杂度稍高但 DOM 操作最少。
+- **React**：单向遍历 / 右移策略 -> 算法简单，但在特定逆序场景下 DOM 移动次数可能多于 Vue。
+
+---
+
+## 7. TypeScript 实战差异
+
+### Q9: React.FC 还需要用吗？Hooks 怎么定义泛型？
+
+**Vue 3 视角解析：**
+Vue `defineComponent` 或 `<script setup lang="ts">` 自动推导类型，Props 定义非常清晰。
+
+**React 最佳实践：**
+1.  **React.FC (FunctionComponent)**：
+    - **不推荐**（React 18 以前包含隐式 `children`，容易导致类型不严谨；React 18 后移除了，但手动写 Props 类型更纯粹）。
+    - **推荐写法**：直接定义 Props 接口。
+    ```typescript
+    interface Props {
+      title: string;
+      children?: React.ReactNode; // 显式声明 children
+    }
+    const MyComp = ({ title, children }: Props) => { ... }
+    ```
+
+2.  **Hooks 泛型**：
+    ```typescript
+    // useState
+    const [user, setUser] = useState<User | null>(null);
+    
+    // useRef (DOM)
+    const inputRef = useRef<HTMLInputElement>(null);
+    
+    // forwardRef (难点)
+    const MyInput = forwardRef<HTMLInputElement, Props>((props, ref) => { ... });
+    ```
+
+---
+
+## 总结：给 Vue 开发者的 React 学习建议
+
+1.  **忘掉"自动"**：习惯手动管理依赖（useEffect deps）、手动优化性能（memo/useCallback）。
+2.  **拥抱"函数式"**：理解闭包、纯函数、不可变数据。
+3.  **深入 Fiber**：这是 React 区别于其他框架最核心的底层技术，也是高级面试必问。
diff --git a/ts/README.md b/ts/README.md
new file mode 100644
index 0000000..fd4dae5
--- /dev/null
+++ b/ts/README.md
@@ -0,0 +1,240 @@
+# TypeScript 深度面试题及解析
+
+> 本文档汇集了高频且具有深度的 TypeScript 面试题，旨在帮助开发者掌握 TS 类型系统的核心原理及高级应用。
+
+## 目录
+
+1. [基础概念与类型系统](#1-基础概念与类型系统)
+2. [高级类型与类型体操](#2-高级类型与类型体操)
+3. [TS 模块与工程化](#3-ts-模块与工程化)
+4. [React/Vue 实战场景](#4-reactvue-实战场景)
+
+---
+
+## 1. 基础概念与类型系统
+
+### Q1: `interface` 和 `type` (Type Alias) 的核心区别是什么？在什么场景下应该优先使用哪一个？
+
+**解析：**
+虽然两者在很多场景下可以互换，但设计初衷不同。
+
+* **Interface (接口)**：主要用于定义**对象**的形状（Shape）和类的契约。它支持**声明合并 (Declaration Merging)**，这对于扩展第三方库的类型非常重要。
+* **Type (类型别名)**：不仅仅是对象，它可以定义基本类型别名、联合类型 (Union)、元组 (Tuple) 等。它**不支持**声明合并。
+
+**深度对比：**
+
+1. **扩展方式**：`interface` 使用 `extends`，`type` 使用交叉类型 `&`。
+2. **声明合并**：同名的 `interface` 会自动合并，同名的 `type` 会报错。
+3. **索引签名**：`type` 在某些复杂的映射类型中表现更好，而 `interface` 在索引签名上有时会有限制（例如不能直接映射非对象类型）。
+
+**最佳实践：**
+
+* **编写库或公共 API 时**，优先使用 `interface`，以便使用者可以通过声明合并扩展类型。
+* **定义联合类型、复杂的工具类型、提取类型时**，必须使用 `type`。
+* **一般应用开发中**，保持一致即可，`type` 因其灵活性目前更受欢迎。
+
+### Q2: 解释 TypeScript 中的 `any`、`unknown` 和 `never` 的区别
+
+**解析：**
+这是考察对类型安全理解深度的经典问题。
+
+* **`any` (任意类型)**：
+  * **含义**：关闭类型检查。任何类型都能赋值给 `any`，`any` 也能赋值给任何类型。
+  * **风险**：使用 `any` 会失去 TS 的保护，像是在写普通的 JS。应尽量避免。
+* **`unknown` (未知类型)**：
+  * **含义**：类型安全的 `any`。任何类型都能赋值给 `unknown`，但 `unknown` **不能**直接赋值给其他类型（除了 `any` 和 `unknown`），也不能直接调用其方法。
+  * **使用**：必须先进行**类型收窄 (Type Narrowing)**（如 `typeof`, `instanceof`, 类型断言）才能使用。
+* **`never` (永不存在的类型)**：
+  * **含义**：表示那些永远不存在的值的类型。例如：抛出异常的函数返回值、无限循环的函数返回值、联合类型中被排除后的剩余类型。
+  * **特性**：`never` 是所有类型的子类型（Bottom Type），可以赋值给任何类型，但没有类型可以赋值给 `never`。
+  * **应用**：常用于**全面性检查 (Exhaustiveness Checking)**。
+
+**代码示例：全面性检查**
+
+```typescript
+type Shape = 'circle' | 'square';
+
+function getArea(shape: Shape) {
+  switch (shape) {
+    case 'circle': return Math.PI;
+    case 'square': return 1;
+    default:
+      // 如果 Shape 扩展了 'triangle'，这里会报错，因为 'triangle' 不能赋值给 never
+      const _exhaustiveCheck: never = shape; 
+      return _exhaustiveCheck;
+  }
+}
+```
+
+### Q3: 什么是协变 (Covariance) 和逆变 (Contravariance)？在 TS 中如何体现？
+
+**解析：**
+这是类型系统中非常底层的概念，主要体现在**函数类型**的兼容性上。
+
+* **协变 (Covariance)**：允许子类型赋值给父类型。
+  * **体现**：**对象属性**、**函数返回值**。
+  * 如果 `Dog extends Animal`，那么 `() => Dog` 可以赋值给 `() => Animal`。
+* **逆变 (Contravariance)**：允许父类型赋值给子类型（看起来是反直觉的）。
+  * **体现**：**函数参数**（在开启 `strictFunctionTypes` 时）。
+  * 如果 `Dog extends Animal`，那么 `(animal: Animal) => void` 可以赋值给 `(dog: Dog) => void`。
+  * **理解**：如果一个函数能处理所有的 `Animal`，那它一定能处理 `Dog`。反之，如果一个函数只能处理 `Dog`，你传给它一个 `Cat` (也是 Animal) 它就崩了。
+
+**口诀：**
+> **参数逆变，返回值协变。**
+
+---
+
+## 2. 高级类型与类型体操
+
+### Q4: 如何实现一个 `DeepReadonly<T>` 工具类型？
+
+**解析：**
+考察递归类型和映射类型 (Mapped Types)。
+
+```typescript
+type DeepReadonly<T> = {
+  readonly [P in keyof T]: T[P] extends object 
+    ? (T[P] extends Function ? T[P] : DeepReadonly<T[P]>) // 处理函数和对象的递归
+    : T[P];
+};
+```
+*注意：实际面试中，简单的递归对象即可，处理 Function 的情况属于加分项。*
+
+### Q5: 解释 `infer` 关键字的作用，并写一个提取 Promise 返回值的类型 `UnwrapPromise<T>`
+
+**解析：**
+`infer` 用于在条件类型 (Conditional Types) 中声明一个类型变量，用于**推断**类型。
+
+```typescript
+type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+
+// 进阶：处理嵌套 Promise (递归)
+type DeepUnwrapPromise<T> = T extends Promise<infer U> 
+  ? DeepUnwrapPromise<U> 
+  : T;
+```
+
+### Q6: 什么是分布式条件类型 (Distributive Conditional Types)？
+
+**解析：**
+当条件类型作用于**泛型**，并且传入的是**联合类型**时，条件类型会**分发**（Distribute）执行。
+
+**公式：**
+`(A | B) extends T ? X : Y`  
+=> `(A extends T ? X : Y) | (B extends T ? X : Y)`
+
+**应用：Exclude 的实现**
+
+```typescript
+type MyExclude<T, U> = T extends U ? never : T;
+
+type Result = MyExclude<'a' | 'b' | 'c', 'a'>; 
+// 过程：
+// ('a' extends 'a' ? never : 'a') | 
+// ('b' extends 'a' ? never : 'b') | 
+// ('c' extends 'a' ? never : 'c')
+// => never | 'b' | 'c' 
+// => 'b' | 'c'
+```
+
+**如何阻止分发？**
+用元组包裹：`[T] extends [U] ? X : Y`。
+
+---
+
+## 3. TS 模块与工程化
+
+### Q7: `const enum` 和普通 `enum` 有什么区别？
+
+**解析：**
+
+* **普通 `enum`**：
+  * 运行时**存在**。会编译成一个双向映射的 JavaScript 对象（如果是数字枚举）。
+  * 优点：可以反向查找（值 -> 键）。
+  * 缺点：增加 bundle 体积。
+* **`const enum` (常量枚举)**：
+  * 运行时**不存在**。在编译阶段会被**内联**（Inlined）替换为具体的值。
+  * 优点：零运行时开销，体积小。
+  * 缺点：不能反向查找；在某些构建工具（如 Babel 早期版本）或 `isolatedModules` 模式下可能存在兼容性问题（因为没有运行时对象）。
+
+### Q8: 什么是类型守卫 (Type Guard)？有哪些方式可以实现？
+
+**解析：**
+类型守卫用于在运行时检查类型，从而在特定作用域内**收窄**类型。
+
+1. **`typeof`**: 识别基础类型 (`string`, `number` 等)。
+2. **`instanceof`**: 识别类实例。
+3. **`in` 关键字**: 检查对象是否包含某属性。
+4. **自定义类型谓词 (Type Predicate)**: `parameter is Type`。
+
+**示例：自定义类型谓词**
+
+```typescript
+interface Fish { swim: () => void; }
+interface Bird { fly: () => void; }
+
+function isFish(pet: Fish | Bird): pet is Fish {
+  return (pet as Fish).swim !== undefined;
+}
+
+// 使用
+if (isFish(pet)) {
+  pet.swim(); // TS 知道这里 pet 是 Fish
+}
+```
+
+---
+
+## 4. React/Vue 实战场景
+
+### Q9: 在 React 中，`React.FC` 还需要用吗？为什么现在不推荐了？
+
+**解析：**
+在 React 18 之前，`React.FC` (FunctionComponent) 曾是定义组件的标准方式，但现在社区（包括 Create React App 模板）倾向于直接声明函数参数类型。
+
+**`React.FC` 的问题（旧版）：**
+
+1. **隐式 `children`**：旧版 `React.FC` 默认包含了 `children` 属性，即使你的组件不需要 children，这破坏了类型严格性。
+2. **泛型支持差**：给 `React.FC` 组件添加泛型比较麻烦。
+3. **组件静态属性**：`defaultProps` 在 `React.FC` 下处理较为复杂。
+
+**推荐写法：**
+
+```typescript
+interface Props {
+  title: string;
+  children?: React.ReactNode; // 显式声明 children
+}
+
+const MyComponent = ({ title, children }: Props) => {
+  return <div>{title}{children}</div>;
+};
+```
+
+### Q10: Vue 3 中 `defineProps` 如何结合 TypeScript 使用？运行时声明 vs 类型声明？
+
+**解析：**
+Vue 3 提供了两种方式定义 props：
+
+1. **运行时声明 (Runtime Declaration)**:
+   ```typescript
+   const props = defineProps({
+     foo: { type: String, required: true }
+   })
+   ```
+   * 优点：运行时有校验。
+   * 缺点：TS 类型推导不如纯类型声明直接。
+
+2. **基于类型的声明 (Type-based Declaration) - 推荐**:
+   ```typescript
+   const props = defineProps<{
+     foo: string
+     bar?: number
+   }>()
+   ```
+   * 优点：纯 TS 语法，DX（开发体验）更好，支持复杂类型。
+   * 注意：`withDefaults` 宏用于设置默认值。
+
+---
+
+> **总结**：TypeScript 面试的核心在于理解**类型系统是图灵完备的**（可以通过类型编程解决复杂问题），以及理解**编译时类型**与**运行时代码**的边界（Erasure）。
diff --git a/vue3/README.md b/vue3/README.md
new file mode 100644
index 0000000..2e5c439
--- /dev/null
+++ b/vue3/README.md
@@ -0,0 +1,2102 @@
+# Vue 3 深度面试题及解析
+
+> 本文档涵盖 Vue 3 核心原理、Composition API、响应式系统、性能优化等高频面试考点，适合中高级前端工程师面试准备。
+
+---
+
+## 目录
+
+1. [响应式系统原理](#1-响应式系统原理)
+2. [Composition API 深度](#2-composition-api-深度)
+3. [虚拟 DOM 与 Diff 算法](#3-虚拟-dom-与-diff-算法)
+4. [编译优化](#4-编译优化)
+5. [生命周期与调度机制](#5-生命周期与调度机制)
+6. [组件通信与状态管理](#6-组件通信与状态管理)
+7. [性能优化](#7-性能优化)
+8. [Vapor Mode 深度解析](#8-vapor-mode-深度解析)
+9. [Vue 3 与 Vue 2 核心区别](#9-vue-3-与-vue-2-核心区别)
+10. [实战场景题](#10-实战场景题)
+
+---
+
+## 1. 响应式系统原理
+
+### Q1: Vue 3 的响应式原理是什么？与 Vue 2 有什么本质区别？
+
+**答案：**
+
+**Vue 3 响应式原理（基于 Proxy）：**
+
+```javascript
+// Vue 3 响应式核心简化实现
+function reactive(target) {
+  return new Proxy(target, {
+    get(target, key, receiver) {
+      // 依赖收集
+      track(target, key)
+      const result = Reflect.get(target, key, receiver)
+      // 深层响应式
+      if (typeof result === 'object' && result !== null) {
+        return reactive(result)
+      }
+      return result
+    },
+    set(target, key, value, receiver) {
+      const oldValue = target[key]
+      const result = Reflect.set(target, key, value, receiver)
+      if (oldValue !== value) {
+        // 触发更新
+        trigger(target, key)
+      }
+      return result
+    }
+  })
+}
+```
+
+**核心区别对比：**
+
+| 特性 | Vue 2 (Object.defineProperty) | Vue 3 (Proxy) |
+|------|------------------------------|---------------|
+| 数组监听 | 需要重写数组方法 | 原生支持 |
+| 新增/删除属性 | 需要 `Vue.set/Vue.delete` | 自动检测 |
+| 性能 | 递归遍历所有属性 | 惰性代理（访问时才代理） |
+| Map/Set/WeakMap | 不支持 | 原生支持 |
+| 深层嵌套 | 初始化时递归 | 访问时才递归（懒代理） |
+
+**深度解析：**
+
+1. **惰性代理（Lazy Proxy）**：Vue 3 只有在访问嵌套对象时才会创建其代理，大幅提升初始化性能
+2. **依赖收集更精准**：通过 `WeakMap -> Map -> Set` 的数据结构存储依赖关系
+3. **支持更多数据类型**：Proxy 可以拦截更多操作（如 `in`、`delete` 等）
+
+---
+
+### Q2: 请详细解释 `ref` 和 `reactive` 的区别及实现原理
+
+**答案：**
+
+```javascript
+// ref 核心实现
+function ref(value) {
+  return new RefImpl(value)
+}
+
+class RefImpl {
+  private _value
+  public dep = new Set()
+  public __v_isRef = true
+  
+  constructor(value) {
+    this._value = isObject(value) ? reactive(value) : value
+  }
+  
+  get value() {
+    trackRefValue(this)
+    return this._value
+  }
+  
+  set value(newVal) {
+    if (hasChanged(newVal, this._value)) {
+      this._value = isObject(newVal) ? reactive(newVal) : newVal
+      triggerRefValue(this)
+    }
+  }
+}
+```
+
+**核心区别：**
+
+| 特性 | ref | reactive |
+|------|-----|----------|
+| 适用类型 | 任意类型（基本类型推荐） | 仅对象类型 |
+| 访问方式 | 需要 `.value` | 直接访问 |
+| 解构 | 保持响应式 | 失去响应式（需 toRefs） |
+| 模板中使用 | 自动解包（无需 .value） | 直接使用 |
+| 重新赋值 | 保持响应式 | 失去响应式 |
+
+**面试加分点：**
+- `ref` 使用 class 的 getter/setter 实现，而非 Proxy
+- `shallowRef` 只追踪 `.value` 的变化，不做深层响应式
+- `triggerRef` 可以强制触发 shallowRef 的更新
+
+---
+
+### Q3: 请解释 Vue 3 的依赖收集和触发更新的完整流程
+
+**答案：**
+
+```javascript
+// 依赖收集核心数据结构
+// targetMap: WeakMap<target, Map<key, Set<effect>>>
+const targetMap = new WeakMap()
+
+// 当前正在执行的 effect
+let activeEffect = null
+const effectStack = []
+
+function effect(fn, options = {}) {
+  const effectFn = () => {
+    cleanup(effectFn) // 清除旧依赖
+    activeEffect = effectFn
+    effectStack.push(effectFn)
+    const result = fn()
+    effectStack.pop()
+    activeEffect = effectStack[effectStack.length - 1]
+    return result
+  }
+  effectFn.deps = []
+  effectFn.options = options
+  if (!options.lazy) {
+    effectFn()
+  }
+  return effectFn
+}
+
+function track(target, key) {
+  if (!activeEffect) return
+  let depsMap = targetMap.get(target)
+  if (!depsMap) {
+    targetMap.set(target, (depsMap = new Map()))
+  }
+  let dep = depsMap.get(key)
+  if (!dep) {
+    depsMap.set(key, (dep = new Set()))
+  }
+  if (!dep.has(activeEffect)) {
+    dep.add(activeEffect)
+    activeEffect.deps.push(dep) // 反向收集，用于清理
+  }
+}
+
+function trigger(target, key) {
+  const depsMap = targetMap.get(target)
+  if (!depsMap) return
+  const effects = depsMap.get(key)
+  const effectsToRun = new Set()
+  effects && effects.forEach(effect => {
+    // 避免无限递归
+    if (effect !== activeEffect) {
+      effectsToRun.add(effect)
+    }
+  })
+  effectsToRun.forEach(effect => {
+    if (effect.options.scheduler) {
+      effect.options.scheduler(effect)
+    } else {
+      effect()
+    }
+  })
+}
+```
+
+**流程图解：**
+
+```
+组件渲染 → 创建 effect → 执行 render 函数 → 访问响应式数据 
+   ↓                                              ↓
+模板更新 ← scheduler 调度 ← trigger ← 数据变化    track（收集依赖）
+```
+
+---
+
+### Q4: 什么是 `effectScope`？它解决了什么问题？
+
+**答案：**
+
+`effectScope` 是 Vue 3.2+ 引入的 API，用于批量管理和清理副作用。
+
+```javascript
+import { effectScope, ref, watch, computed } from 'vue'
+
+const scope = effectScope()
+
+scope.run(() => {
+  const count = ref(0)
+  
+  // 这些副作用都会被 scope 收集
+  const doubled = computed(() => count.value * 2)
+  
+  watch(count, () => {
+    console.log('count changed')
+  })
+})
+
+// 一次性清理所有副作用
+scope.stop()
+```
+
+**解决的问题：**
+
+1. **组合式函数中的副作用管理**：不需要手动收集和清理每个 watch/computed
+2. **内存泄漏预防**：确保组件卸载时所有副作用都被清理
+3. **跨组件共享状态的副作用管理**：如 Pinia 内部就使用了 effectScope
+
+**面试加分点：**
+- `getCurrentScope()` 获取当前活跃的 scope
+- `onScopeDispose()` 注册 scope 销毁时的回调
+- 组件的 `setup()` 函数内部就运行在一个 effectScope 中
+
+---
+
+## 2. Composition API 深度
+
+### Q5: `setup` 函数的执行时机和上下文是什么？
+
+**答案：**
+
+```javascript
+export default {
+  props: ['initialCount'],
+  setup(props, context) {
+    // props: 响应式的 props 对象（使用 toRefs 解构）
+    // context: { attrs, slots, emit, expose }
+    
+    console.log('setup 执行')
+    
+    onBeforeMount(() => console.log('beforeMount'))
+    onMounted(() => console.log('mounted'))
+    
+    return { /* 暴露给模板的数据 */ }
+  },
+  beforeCreate() {
+    console.log('beforeCreate')
+  },
+  created() {
+    console.log('created')
+  }
+}
+
+// 执行顺序：setup → beforeCreate → created → beforeMount → mounted
+```
+
+**关键点：**
+
+1. **执行时机**：在 `beforeCreate` 之前执行
+2. **没有 `this`**：setup 中不能访问 this
+3. **只执行一次**：setup 只在组件初始化时执行一次
+4. **context 不是响应式的**：可以直接解构
+
+**props 注意事项：**
+```javascript
+setup(props) {
+  // ❌ 错误：解构会失去响应式
+  const { count } = props
+  
+  // ✅ 正确：使用 toRefs
+  const { count } = toRefs(props)
+  
+  // ✅ 或使用 toRef
+  const count = toRef(props, 'count')
+}
+```
+
+---
+
+### Q6: `watch` 和 `watchEffect` 的区别及使用场景？
+
+**答案：**
+
+```javascript
+import { ref, watch, watchEffect } from 'vue'
+
+const count = ref(0)
+const name = ref('Vue')
+
+// watchEffect: 自动收集依赖，立即执行
+watchEffect(() => {
+  console.log(`count: ${count.value}, name: ${name.value}`)
+})
+
+// watch: 明确指定依赖，惰性执行
+watch(count, (newVal, oldVal) => {
+  console.log(`count: ${oldVal} → ${newVal}`)
+})
+
+// watch 多个源
+watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
+  // ...
+})
+
+// watch 深层对象
+const state = reactive({ nested: { count: 0 } })
+watch(
+  () => state.nested.count,
+  (count) => console.log(count)
+)
+```
+
+**核心区别：**
+
+| 特性 | watch | watchEffect |
+|------|-------|-------------|
+| 依赖收集 | 显式指定 | 自动收集 |
+| 执行时机 | 惰性（默认） | 立即执行 |
+| 获取旧值 | ✅ 可以 | ❌ 不可以 |
+| 深度监听 | 需要配置 deep | 自动深度追踪 |
+| 使用场景 | 需要旧值/条件执行 | 副作用同步 |
+
+**高级用法：**
+
+```javascript
+// 清理副作用
+watchEffect((onCleanup) => {
+  const controller = new AbortController()
+  fetch(url, { signal: controller.signal })
+  
+  onCleanup(() => {
+    controller.abort()
+  })
+})
+
+// flush 时机控制
+watchEffect(callback, {
+  flush: 'post' // 'pre' | 'post' | 'sync'
+})
+
+// watchPostEffect 等价于 flush: 'post'
+watchPostEffect(() => {
+  // DOM 更新后执行
+})
+```
+
+---
+
+### Q7: 请解释 `computed` 的缓存机制和实现原理
+
+**答案：**
+
+```javascript
+// computed 简化实现
+function computed(getterOrOptions) {
+  let getter, setter
+  
+  if (typeof getterOrOptions === 'function') {
+    getter = getterOrOptions
+    setter = () => console.warn('computed is readonly')
+  } else {
+    getter = getterOrOptions.get
+    setter = getterOrOptions.set
+  }
+  
+  let value
+  let dirty = true // 脏值标记
+  
+  const effectFn = effect(getter, {
+    lazy: true,
+    scheduler() {
+      if (!dirty) {
+        dirty = true
+        trigger(obj, 'value') // 触发依赖此 computed 的更新
+      }
+    }
+  })
+  
+  const obj = {
+    get value() {
+      if (dirty) {
+        value = effectFn()
+        dirty = false
+      }
+      track(obj, 'value') // computed 也要收集依赖
+      return value
+    },
+    set value(newVal) {
+      setter(newVal)
+    }
+  }
+  
+  return obj
+}
+```
+
+**缓存机制核心：**
+
+1. **dirty 标志**：标记是否需要重新计算
+2. **惰性求值**：只有访问 `.value` 时才计算
+3. **依赖变化时**：只将 dirty 设为 true，不立即计算
+4. **再次访问时**：发现 dirty 为 true，重新计算
+
+**面试加分点：**
+```javascript
+// computed 也支持 debug
+const plusOne = computed(() => count.value + 1, {
+  onTrack(e) {
+    debugger
+  },
+  onTrigger(e) {
+    debugger
+  }
+})
+```
+
+---
+
+## 3. 虚拟 DOM 与 Diff 算法
+
+### Q8: Vue 3 的 Diff 算法相比 Vue 2 有哪些优化？
+
+**答案：**
+
+**Vue 2 Diff（双端比较）：**
+```javascript
+// 同时从新旧子节点的两端开始比较
+while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+  // 头头、尾尾、头尾、尾头 四种比较
+}
+```
+
+**Vue 3 Diff（快速 Diff + 最长递增子序列）：**
+
+```javascript
+// 1. 预处理：头部相同节点
+while (i <= e1 && i <= e2) {
+  if (isSameVNodeType(n1[i], n2[i])) {
+    patch(n1[i], n2[i], container)
+    i++
+  } else break
+}
+
+// 2. 预处理：尾部相同节点
+while (i <= e1 && i <= e2) {
+  if (isSameVNodeType(n1[e1], n2[e2])) {
+    patch(n1[e1], n2[e2], container)
+    e1--
+    e2--
+  } else break
+}
+
+// 3. 新节点有剩余 → 新增
+// 4. 旧节点有剩余 → 删除
+// 5. 乱序情况 → 使用最长递增子序列（LIS）最小化移动
+```
+
+**最长递增子序列（LIS）优化：**
+
+```javascript
+// 旧节点: [a, b, c, d, e, f, g]
+// 新节点: [a, b, e, c, d, f, g]
+// 
+// 建立新节点索引映射后：
+// 新位置数组: [4, 2, 3, 5]（对应 e, c, d, f 在新数组中的位置）
+// LIS: [2, 3, 5]（对应 c, d, f）
+// 
+// 只需要移动不在 LIS 中的节点（e），其他节点保持不动
+```
+
+**优化效果：**
+
+| 场景 | Vue 2 | Vue 3 |
+|------|-------|-------|
+| 头部连续相同 | O(n) | O(1) 跳过 |
+| 尾部连续相同 | O(n) | O(1) 跳过 |
+| 乱序移动 | 可能多余移动 | 最少移动（LIS） |
+
+---
+
+### Q9: 什么是 PatchFlags？它如何提升性能？
+
+**答案：**
+
+PatchFlags 是 Vue 3 编译时生成的优化标记，用于运行时快速判断节点需要更新的部分。
+
+```javascript
+// 模板
+<div>
+  <span>静态文本</span>
+  <span>{{ dynamic }}</span>
+  <span :class="cls">动态 class</span>
+  <span :id="id" :class="cls">多个动态属性</span>
+</div>
+
+// 编译后（简化）
+import { createVNode as _createVNode } from 'vue'
+
+// PatchFlag 枚举
+const PatchFlags = {
+  TEXT: 1,           // 动态文本
+  CLASS: 2,          // 动态 class
+  STYLE: 4,          // 动态 style
+  PROPS: 8,          // 动态属性（非 class/style）
+  FULL_PROPS: 16,    // 有动态 key 的属性
+  HYDRATE_EVENTS: 32,// 需要事件监听器
+  STABLE_FRAGMENT: 64,
+  KEYED_FRAGMENT: 128,
+  UNKEYED_FRAGMENT: 256,
+  NEED_PATCH: 512,   // ref/指令
+  DYNAMIC_SLOTS: 1024,
+  HOISTED: -1,       // 静态提升
+  BAIL: -2           // 跳出优化模式
+}
+
+_createVNode('span', null, dynamic, PatchFlags.TEXT)
+_createVNode('span', { class: cls }, '动态 class', PatchFlags.CLASS)
+```
+
+**优化效果：**
+
+```javascript
+// 运行时 patch 函数
+function patchElement(n1, n2) {
+  const patchFlag = n2.patchFlag
+  
+  if (patchFlag > 0) {
+    // 有 patchFlag，走快速路径
+    if (patchFlag & PatchFlags.CLASS) {
+      // 只更新 class
+      patchClass(el, n2.props.class)
+    }
+    if (patchFlag & PatchFlags.STYLE) {
+      // 只更新 style
+      patchStyle(el, n1.props.style, n2.props.style)
+    }
+    // ... 其他按需更新
+  } else {
+    // 没有 patchFlag，全量 diff
+    patchProps(el, n1.props, n2.props)
+  }
+}
+```
+
+---
+
+## 4. 编译优化
+
+### Q10: 请解释 Vue 3 的静态提升（Static Hoisting）
+
+**答案：**
+
+静态提升是将模板中的静态内容提升到 render 函数外部，避免每次渲染时重新创建。
+
+```javascript
+// 模板
+<template>
+  <div>
+    <span class="static">静态内容</span>
+    <span>{{ dynamic }}</span>
+  </div>
+</template>
+
+// Vue 2 编译结果（每次渲染都创建）
+function render() {
+  return h('div', [
+    h('span', { class: 'static' }, '静态内容'),
+    h('span', this.dynamic)
+  ])
+}
+
+// Vue 3 编译结果（静态提升）
+const _hoisted_1 = h('span', { class: 'static' }, '静态内容')
+
+function render() {
+  return h('div', [
+    _hoisted_1, // 复用同一个 VNode
+    h('span', this.dynamic)
+  ])
+}
+```
+
+**提升级别：**
+
+1. **元素提升**：完全静态的元素
+2. **props 提升**：静态的 props 对象
+3. **树提升**：连续多个静态节点合并成静态字符串
+
+```javascript
+// 多个连续静态节点
+<div>
+  <span>1</span>
+  <span>2</span>
+  <span>3</span>
+  <!-- ... 大量静态内容 -->
+</div>
+
+// 编译为静态 HTML 字符串
+const _hoisted = createStaticVNode('<span>1</span><span>2</span><span>3</span>...')
+```
+
+---
+
+### Q11: 什么是 Block Tree？它如何优化更新性能？
+
+**答案：**
+
+Block Tree 是 Vue 3 中用于收集动态节点的优化机制，跳过静态节点的 diff。
+
+```javascript
+// 模板
+<div>
+  <span>静态</span>
+  <span>静态</span>
+  <span>{{ msg }}</span>
+  <div>
+    <span>静态</span>
+    <span :class="cls">动态</span>
+  </div>
+</div>
+
+// 传统 Diff：遍历整棵树
+// Block Tree：只比较动态节点数组
+
+// 编译结果
+function render() {
+  return (openBlock(), createBlock('div', null, [
+    createVNode('span', null, '静态'),
+    createVNode('span', null, '静态'),
+    createVNode('span', null, msg, PatchFlags.TEXT),
+    createVNode('div', null, [
+      createVNode('span', null, '静态'),
+      createVNode('span', { class: cls }, '动态', PatchFlags.CLASS)
+    ])
+  ]))
+}
+```
+
+**Block 的动态节点收集：**
+
+```javascript
+// Block 节点会收集所有后代中的动态节点
+const block = {
+  type: 'div',
+  children: [...],
+  dynamicChildren: [
+    // 扁平化的动态节点数组
+    { type: 'span', children: msg, patchFlag: TEXT },
+    { type: 'span', props: { class: cls }, patchFlag: CLASS }
+  ]
+}
+
+// 更新时直接遍历 dynamicChildren
+function patchBlock(n1, n2) {
+  for (let i = 0; i < n2.dynamicChildren.length; i++) {
+    patch(n1.dynamicChildren[i], n2.dynamicChildren[i])
+  }
+}
+```
+
+**Block 边界：**
+结构不稳定的节点（v-if、v-for）会创建新的 Block：
+
+```javascript
+<div> <!-- Block -->
+  <div v-if="show"> <!-- Block -->
+    <span>{{ msg }}</span>
+  </div>
+</div>
+```
+
+---
+
+## 5. 生命周期与调度机制
+
+### Q12: Vue 3 的组件更新是同步还是异步？请解释调度机制
+
+**答案：**
+
+Vue 3 的组件更新是**异步批量**的，通过调度器（Scheduler）管理更新时机。
+
+```javascript
+// 响应式数据变化时，不会立即更新组件
+const count = ref(0)
+count.value++ // 不会立即触发更新
+count.value++ // 不会立即触发更新
+count.value++ // 只会触发一次更新（批量处理）
+
+// 调度器简化实现
+const queue = []
+let isFlushing = false
+let isFlushPending = false
+const resolvedPromise = Promise.resolve()
+
+function queueJob(job) {
+  if (!queue.includes(job)) {
+    queue.push(job)
+  }
+  queueFlush()
+}
+
+function queueFlush() {
+  if (!isFlushing && !isFlushPending) {
+    isFlushPending = true
+    resolvedPromise.then(flushJobs)
+  }
+}
+
+function flushJobs() {
+  isFlushPending = false
+  isFlushing = true
+  
+  // 排序：父组件先于子组件更新
+  queue.sort((a, b) => a.id - b.id)
+  
+  for (const job of queue) {
+    job()
+  }
+  
+  queue.length = 0
+  isFlushing = false
+  
+  // 检查是否有新的任务加入
+  if (queue.length) {
+    flushJobs()
+  }
+}
+```
+
+**三个队列：**
+
+```javascript
+// 1. Pre 队列：组件更新前的任务（watchEffect 默认）
+const pendingPreFlushCbs = []
+
+// 2. 组件更新队列
+const queue = []
+
+// 3. Post 队列：组件更新后的任务（onMounted、watchPostEffect）
+const pendingPostFlushCbs = []
+
+// 执行顺序
+async function flushJobs() {
+  // 1. 执行 Pre 队列
+  flushPreFlushCbs()
+  
+  // 2. 执行组件更新
+  for (const job of queue) {
+    job()
+  }
+  
+  // 3. 执行 Post 队列
+  flushPostFlushCbs()
+}
+```
+
+**nextTick 原理：**
+
+```javascript
+function nextTick(fn) {
+  return fn 
+    ? resolvedPromise.then(fn) 
+    : resolvedPromise
+}
+
+// 使用
+await nextTick()
+console.log(document.querySelector('.count').textContent) // 更新后的 DOM
+```
+
+---
+
+### Q13: 父子组件的生命周期执行顺序是什么？
+
+**答案：**
+
+```
+挂载阶段：
+  父 setup
+  父 onBeforeMount
+    子 setup
+    子 onBeforeMount
+    子 onMounted
+  父 onMounted
+
+更新阶段：
+  父 onBeforeUpdate
+    子 onBeforeUpdate
+    子 onUpdated
+  父 onUpdated
+
+卸载阶段：
+  父 onBeforeUnmount
+    子 onBeforeUnmount
+    子 onUnmounted
+  父 onUnmounted
+```
+
+**记忆口诀：**
+- 挂载：父 before → 子全部 → 父 mounted（子先完成）
+- 更新：父 before → 子全部 → 父 updated（子先完成）
+- 卸载：父 before → 子全部 → 父 unmounted（子先完成）
+
+**特殊情况 - 异步组件：**
+
+```javascript
+const AsyncComp = defineAsyncComponent(() => import('./Comp.vue'))
+
+// 父组件会先完成挂载，不等待异步子组件
+// 父 mounted → 异步加载 → 子 mounted
+```
+
+---
+
+## 6. 组件通信与状态管理
+
+### Q14: Vue 3 有哪些组件通信方式？各自的使用场景是什么？
+
+**答案：**
+
+```javascript
+// 1. Props / Emit（父子组件）
+// 父组件
+<Child :count="count" @update="handleUpdate" />
+
+// 子组件
+const props = defineProps(['count'])
+const emit = defineEmits(['update'])
+emit('update', newValue)
+
+// 2. v-model（双向绑定语法糖）
+// Vue 3 支持多个 v-model
+<Child v-model="value" v-model:title="title" />
+
+// 子组件
+defineProps(['modelValue', 'title'])
+defineEmits(['update:modelValue', 'update:title'])
+
+// 3. Provide / Inject（跨层级）
+// 祖先组件
+provide('theme', ref('dark'))
+
+// 后代组件
+const theme = inject('theme')
+
+// 4. Expose / Ref（父访问子）
+// 子组件
+defineExpose({
+  childMethod: () => console.log('called from parent')
+})
+
+// 父组件
+const childRef = ref(null)
+childRef.value.childMethod()
+
+// 5. Attrs / Slots（透传）
+const { attrs, slots } = useAttrs(), useSlots()
+
+// 6. EventBus（任意组件，Vue 3 推荐 mitt）
+import mitt from 'mitt'
+const emitter = mitt()
+emitter.emit('event', data)
+emitter.on('event', handler)
+
+// 7. Pinia（全局状态管理）
+export const useStore = defineStore('main', () => {
+  const count = ref(0)
+  const increment = () => count.value++
+  return { count, increment }
+})
+```
+
+**选择指南：**
+
+| 场景 | 推荐方案 |
+|------|----------|
+| 父→子 | props |
+| 子→父 | emit |
+| 双向绑定 | v-model |
+| 深层传递 | provide/inject |
+| 父调用子方法 | expose + ref |
+| 全局状态 | Pinia |
+| 兄弟/任意组件 | Pinia 或 mitt |
+
+---
+
+### Q15: Pinia 相比 Vuex 有哪些优势？请解释其核心原理
+
+**答案：**
+
+**优势对比：**
+
+| 特性 | Vuex | Pinia |
+|------|------|-------|
+| TypeScript 支持 | 需要额外配置 | 完美支持 |
+| 模块化 | 需要 modules | 天然多 store |
+| Mutations | 必须有 | 移除了 |
+| Devtools | 支持 | 支持 |
+| 代码体积 | 较大 | 约 1KB |
+| Composition API | 需要 mapState 等 | 原生支持 |
+
+**Pinia 核心实现原理：**
+
+```javascript
+// 简化版 Pinia 实现
+import { reactive, effectScope, computed } from 'vue'
+
+function createPinia() {
+  const stores = new Map()
+  
+  return {
+    _stores: stores,
+    install(app) {
+      app.provide('pinia', this)
+    }
+  }
+}
+
+function defineStore(id, setup) {
+  return function useStore() {
+    const pinia = inject('pinia')
+    
+    if (!pinia._stores.has(id)) {
+      // 使用 effectScope 管理副作用
+      const scope = effectScope()
+      const store = scope.run(() => {
+        const setupResult = setup()
+        return reactive(setupResult)
+      })
+      
+      pinia._stores.set(id, store)
+    }
+    
+    return pinia._stores.get(id)
+  }
+}
+
+// 使用
+const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const double = computed(() => count.value * 2)
+  const increment = () => count.value++
+  
+  return { count, double, increment }
+})
+```
+
+**核心概念：**
+
+1. **响应式状态**：使用 Vue 的响应式系统
+2. **effectScope**：管理 store 中的副作用（watch、computed）
+3. **单例模式**：同一个 store 只创建一次
+4. **支持 SSR**：通过 pinia.state.value 实现状态序列化
+
+---
+
+## 7. 性能优化
+
+### Q16: Vue 3 有哪些性能优化手段？
+
+**答案：**
+
+**编译时优化（自动）：**
+
+```javascript
+// 1. 静态提升
+const _hoisted = createVNode('span', null, '静态内容')
+
+// 2. PatchFlags 标记
+createVNode('span', null, msg, 1 /* TEXT */)
+
+// 3. Block Tree
+openBlock()
+createBlock('div', null, [...])
+
+// 4. 缓存事件处理函数
+onClick: _cache[0] || (_cache[0] = $event => handler($event))
+```
+
+**运行时优化（手动）：**
+
+```javascript
+// 1. v-once：只渲染一次
+<span v-once>{{ expensiveComputation }}</span>
+
+// 2. v-memo：条件缓存
+<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
+  <!-- 只有 selected 变化才重新渲染 -->
+</div>
+
+// 3. shallowRef / shallowReactive：浅层响应式
+const state = shallowRef({ nested: { count: 0 } })
+// state.value.nested.count 的变化不会触发更新
+
+// 4. markRaw：标记不需要响应式
+const rawData = markRaw({ huge: 'data' })
+
+// 5. 组件懒加载
+const AsyncComp = defineAsyncComponent(() => 
+  import('./HeavyComponent.vue')
+)
+
+// 6. keep-alive 缓存
+<keep-alive :include="['ComponentA']" :max="10">
+  <component :is="currentComponent" />
+</keep-alive>
+
+// 7. 虚拟滚动（大列表）
+import { VirtualList } from 'vue-virtual-scroller'
+
+// 8. 合理使用 computed 缓存
+const filtered = computed(() => 
+  list.value.filter(item => item.active)
+)
+
+// 9. 避免不必要的响应式
+// ❌ 大对象整体响应式
+const state = reactive(hugeObject)
+// ✅ 只对需要的部分响应式
+const selectedId = ref(null)
+```
+
+**打包优化：**
+
+```javascript
+// 1. Tree-shaking（Vue 3 API 按需引入）
+import { ref, computed } from 'vue'
+
+// 2. 路由懒加载
+const routes = [
+  { path: '/home', component: () => import('./views/Home.vue') }
+]
+
+// 3. 分包策略
+// vite.config.js
+build: {
+  rollupOptions: {
+    output: {
+      manualChunks: {
+        'vue-vendor': ['vue', 'vue-router', 'pinia']
+      }
+    }
+  }
+}
+```
+
+---
+
+### Q17: 什么情况下会导致 Vue 组件重复渲染？如何避免？
+
+**答案：**
+
+**常见原因及解决方案：**
+
+```javascript
+// 1. ❌ 内联对象/函数（每次渲染都是新引用）
+<Child :config="{ a: 1 }" @click="() => handleClick()" />
+
+// ✅ 使用 computed 或提取为变量
+const config = computed(() => ({ a: 1 }))
+const handleClick = () => { /* ... */ }
+<Child :config="config" @click="handleClick" />
+
+// 2. ❌ v-for 没有 key 或使用 index
+<div v-for="(item, index) in list" :key="index">
+
+// ✅ 使用唯一标识
+<div v-for="item in list" :key="item.id">
+
+// 3. ❌ 不必要的响应式依赖
+const doubled = computed(() => {
+  console.log('computed') // 每次 otherValue 变化也会重算
+  return props.value * 2 + otherValue.value * 0
+})
+
+// ✅ 只依赖必要的数据
+const doubled = computed(() => props.value * 2)
+
+// 4. ❌ 在模板中调用方法（每次渲染都执行）
+<span>{{ formatDate(date) }}</span>
+
+// ✅ 使用 computed
+const formattedDate = computed(() => formatDate(date.value))
+
+// 5. ❌ 父组件状态变化导致子组件不必要更新
+// ✅ 使用 v-memo
+<Child v-memo="[item.id, item.selected]" :item="item" />
+
+// 6. ❌ 监听器触发不必要的状态更新
+watch(source, () => {
+  state.value++ // 可能引发连锁更新
+})
+
+// ✅ 检查是否真的需要更新
+watch(source, (newVal, oldVal) => {
+  if (needsUpdate(newVal, oldVal)) {
+    state.value++
+  }
+})
+```
+
+**调试方法：**
+
+```javascript
+// 使用 onRenderTracked / onRenderTriggered
+import { onRenderTracked, onRenderTriggered } from 'vue'
+
+onRenderTracked((event) => {
+  console.log('依赖收集:', event)
+})
+
+onRenderTriggered((event) => {
+  console.log('触发更新:', event)
+})
+
+// Vue Devtools 的 Performance 面板
+```
+
+---
+
+## 8. Vapor Mode 深度解析
+
+### Q18: 什么是 Vapor Mode？它的核心原理是什么？
+
+**答案：**
+
+Vapor Mode 是 Vue 团队开发的一种**无虚拟 DOM**的编译策略，通过编译时将模板直接转换为命令式 DOM 操作，绕过虚拟 DOM 和 Diff 算法，实现更高的运行时性能。
+
+**核心理念：**
+
+```javascript
+// 传统 Vue（Virtual DOM 模式）
+// 模板 → 渲染函数 → VNode → Diff → DOM 操作
+
+// Vapor Mode
+// 模板 → 命令式 DOM 操作代码（直接操作 DOM）
+```
+
+**编译对比示例：**
+
+```vue
+<template>
+  <div>
+    <span>静态文本</span>
+    <span>{{ count }}</span>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+```
+
+**传统模式编译结果：**
+
+```javascript
+import { createVNode, openBlock, createBlock, toDisplayString } from 'vue'
+
+function render(_ctx) {
+  return (openBlock(), createBlock('div', null, [
+    createVNode('span', null, '静态文本'),
+    createVNode('span', null, toDisplayString(_ctx.count), 1 /* TEXT */),
+    createVNode('button', { onClick: _ctx.increment }, '+1')
+  ]))
+}
+```
+
+**Vapor Mode 编译结果：**
+
+```javascript
+import { template, effect, setText, on } from 'vue/vapor'
+
+// 1. 创建静态模板（一次性）
+const t0 = template('<div><span>静态文本</span><span></span><button>+1</button></div>')
+
+function render(_ctx) {
+  // 2. 克隆模板
+  const root = t0()
+  
+  // 3. 获取动态节点引用
+  const span1 = root.firstChild.nextSibling
+  const button = span1.nextSibling
+  
+  // 4. 建立响应式绑定（细粒度更新）
+  effect(() => {
+    setText(span1, _ctx.count)
+  })
+  
+  // 5. 绑定事件
+  on(button, 'click', _ctx.increment)
+  
+  return root
+}
+```
+
+**关键差异：**
+
+| 特性 | Virtual DOM 模式 | Vapor Mode |
+|------|-----------------|------------|
+| 更新机制 | 创建新 VNode → Diff → Patch | 直接更新目标 DOM 节点 |
+| 内存占用 | 需要维护 VNode 树 | 无 VNode 开销 |
+| 更新粒度 | 组件级别 | 节点级别（细粒度） |
+| 运行时大小 | 完整运行时 (~50KB) | 精简运行时 (~6KB) |
+| 适用场景 | 通用场景 | 性能敏感场景 |
+
+---
+
+### Q19: Vapor Mode 的细粒度响应式更新是如何实现的？
+
+**答案：**
+
+Vapor Mode 结合了 Vue 的响应式系统和 SolidJS 的细粒度更新思想，为每个动态绑定创建独立的 effect。
+
+**实现原理：**
+
+```javascript
+// Vapor 运行时核心简化实现
+import { effect as rawEffect } from '@vue/reactivity'
+
+// 封装 effect，支持调度
+function effect(fn) {
+  const effectFn = rawEffect(fn, {
+    scheduler: () => {
+      // 使用微任务批量调度，避免同步更新过多
+      queueMicrotask(effectFn)
+    }
+  })
+  return effectFn
+}
+
+// 文本更新
+function setText(el, value) {
+  el.textContent = value
+}
+
+// 属性更新
+function setAttr(el, key, value) {
+  if (value == null) {
+    el.removeAttribute(key)
+  } else {
+    el.setAttribute(key, value)
+  }
+}
+
+// 类名更新
+function setClass(el, value) {
+  el.className = value
+}
+
+// 样式更新
+function setStyle(el, key, value) {
+  el.style[key] = value
+}
+
+// 模板克隆（高性能）
+function template(html) {
+  const tpl = document.createElement('template')
+  tpl.innerHTML = html
+  return () => tpl.content.firstChild.cloneNode(true)
+}
+```
+
+**细粒度更新流程：**
+
+```javascript
+// 假设有以下模板
+<div :class="cls" :style="{ color }">
+  <span>{{ firstName }}</span>
+  <span>{{ lastName }}</span>
+</div>
+
+// Vapor 编译后，每个动态绑定都有独立的 effect
+function render(_ctx) {
+  const root = t0()
+  const span1 = root.firstChild
+  const span2 = span1.nextSibling
+  
+  // 独立的 effect：firstName 变化只更新 span1
+  effect(() => setText(span1, _ctx.firstName))
+  
+  // 独立的 effect：lastName 变化只更新 span2
+  effect(() => setText(span2, _ctx.lastName))
+  
+  // 独立的 effect：cls 变化只更新 class
+  effect(() => setClass(root, _ctx.cls))
+  
+  // 独立的 effect：color 变化只更新 style
+  effect(() => setStyle(root, 'color', _ctx.color))
+  
+  return root
+}
+
+// 当 firstName 变化时：
+// - 只有 span1 的 effect 被触发
+// - 直接执行 setText(span1, newValue)
+// - 没有 VNode 创建，没有 Diff 比较
+```
+
+---
+
+### Q20: Vapor Mode 如何处理条件渲染和列表渲染？
+
+**答案：**
+
+**条件渲染 (v-if)：**
+
+```vue
+<template>
+  <div>
+    <span v-if="show">显示</span>
+    <span v-else>隐藏</span>
+  </div>
+</template>
+```
+
+```javascript
+// Vapor 编译结果
+import { template, effect, createIf } from 'vue/vapor'
+
+const t0 = template('<div></div>')
+const t1 = template('<span>显示</span>')
+const t2 = template('<span>隐藏</span>')
+
+function render(_ctx) {
+  const root = t0()
+  
+  // createIf 返回一个响应式的条件块
+  const ifBlock = createIf(
+    () => _ctx.show,           // 条件
+    () => t1(),                // true 分支
+    () => t2()                 // false 分支（v-else）
+  )
+  
+  // 插入条件块
+  root.appendChild(ifBlock.anchor)
+  
+  return root
+}
+
+// createIf 简化实现
+function createIf(condition, trueBranch, falseBranch) {
+  const anchor = document.createComment('v-if')
+  let currentBranch = null
+  let currentNode = null
+  
+  effect(() => {
+    const shouldShow = condition()
+    const newBranch = shouldShow ? trueBranch : falseBranch
+    
+    if (newBranch !== currentBranch) {
+      // 移除旧节点
+      if (currentNode) {
+        currentNode.remove()
+      }
+      // 插入新节点
+      currentNode = newBranch?.()
+      if (currentNode) {
+        anchor.parentNode.insertBefore(currentNode, anchor)
+      }
+      currentBranch = newBranch
+    }
+  })
+  
+  return { anchor }
+}
+```
+
+**列表渲染 (v-for)：**
+
+```vue
+<template>
+  <ul>
+    <li v-for="item in items" :key="item.id">
+      {{ item.name }}
+    </li>
+  </ul>
+</template>
+```
+
+```javascript
+// Vapor 编译结果
+import { template, effect, createFor } from 'vue/vapor'
+
+const t0 = template('<ul></ul>')
+const t1 = template('<li></li>')
+
+function render(_ctx) {
+  const root = t0()
+  
+  const forBlock = createFor(
+    () => _ctx.items,          // 数据源
+    (item, index) => {         // 每项的渲染函数
+      const li = t1()
+      effect(() => setText(li, item.value.name))
+      return li
+    },
+    (item) => item.id          // key 函数
+  )
+  
+  root.appendChild(forBlock.anchor)
+  
+  return root
+}
+
+// createFor 简化实现（使用 Map 复用节点）
+function createFor(source, renderItem, getKey) {
+  const anchor = document.createComment('v-for')
+  const keyToNode = new Map()
+  let oldKeys = []
+  
+  effect(() => {
+    const items = source()
+    const newKeys = items.map(getKey)
+    const newKeyToNode = new Map()
+    
+    // 1. 复用已有节点或创建新节点
+    items.forEach((item, index) => {
+      const key = getKey(item)
+      let node = keyToNode.get(key)
+      
+      if (!node) {
+        // 创建新节点
+        node = renderItem(ref(item), ref(index))
+      }
+      newKeyToNode.set(key, node)
+    })
+    
+    // 2. 移除不再需要的节点
+    oldKeys.forEach(key => {
+      if (!newKeyToNode.has(key)) {
+        keyToNode.get(key).remove()
+      }
+    })
+    
+    // 3. 按新顺序插入节点（使用最少移动算法）
+    reorderNodes(anchor.parentNode, anchor, items.map(i => newKeyToNode.get(getKey(i))))
+    
+    keyToNode.clear()
+    newKeyToNode.forEach((v, k) => keyToNode.set(k, v))
+    oldKeys = newKeys
+  })
+  
+  return { anchor }
+}
+```
+
+---
+
+### Q21: Vapor Mode 与 Virtual DOM 模式可以混合使用吗？
+
+**答案：**
+
+**可以！** Vue 的设计允许在同一应用中混合使用两种模式，这是 Vapor Mode 的重要特性。
+
+**混合使用场景：**
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      vapor: true  // 启用 Vapor Mode 支持
+    })
+  ]
+})
+```
+
+```vue
+<!-- App.vue（Virtual DOM 模式） -->
+<template>
+  <div>
+    <Header />
+    <VaporComponent />  <!-- Vapor Mode 组件 -->
+    <Footer />
+  </div>
+</template>
+
+<!-- VaporComponent.vapor.vue（Vapor Mode） -->
+<!-- 通过 .vapor.vue 后缀标识 -->
+<template>
+  <div>
+    <span>{{ count }}</span>
+    <button @click="increment">+1</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const count = ref(0)
+const increment = () => count.value++
+</script>
+```
+
+**互操作机制：**
+
+```javascript
+// Vapor 组件在 VDOM 中的表现
+// Vue 会为 Vapor 组件创建一个特殊的 VNode 包装器
+
+const VaporComponentVNode = {
+  type: VaporComponent,
+  __vapor: true,  // 标记为 Vapor 组件
+  
+  // 挂载时直接调用 Vapor 渲染函数
+  mount(container) {
+    const instance = createVaporInstance(VaporComponent)
+    const root = instance.render()
+    container.appendChild(root)
+  },
+  
+  // 更新由 Vapor 的响应式系统自动处理
+  // VDOM 侧不需要 diff 这个组件的内部
+}
+```
+
+**选择策略：**
+
+| 组件类型 | 推荐模式 | 原因 |
+|----------|----------|------|
+| 性能关键组件 | Vapor | 细粒度更新，零 VDOM 开销 |
+| 高度动态组件 | VDOM | 更灵活的动态渲染 |
+| 第三方组件库 | VDOM | 兼容性 |
+| 简单展示组件 | Vapor | 更小的运行时 |
+| 复杂状态组件 | 视情况 | 评估更新频率和模式 |
+
+---
+
+### Q22: Vapor Mode 的优势、局限性和适用场景是什么？
+
+**答案：**
+
+**优势：**
+
+```javascript
+// 1. 更小的运行时体积
+// VDOM 运行时: ~50KB (gzip ~16KB)
+// Vapor 运行时: ~6KB (gzip ~2KB)
+
+// 2. 更快的更新性能
+// 基准测试（更新 1000 行表格）：
+// VDOM: ~15ms
+// Vapor: ~3ms（快 5 倍）
+
+// 3. 更低的内存占用
+// 无 VNode 对象创建，GC 压力更小
+
+// 4. 更快的首次渲染
+// 无需创建完整的 VNode 树
+```
+
+**局限性：**
+
+```javascript
+// 1. 动态组件支持有限
+// ❌ 不支持
+<component :is="dynamicComponent" />
+
+// 2. 渲染函数/JSX 不支持
+// Vapor 依赖模板编译，不支持手写渲染函数
+export default {
+  render() {
+    return h('div', this.msg)  // ❌ 不能使用 Vapor
+  }
+}
+
+// 3. 部分动态指令受限
+// 需要编译时确定的指令
+
+// 4. 生态兼容性
+// 部分依赖 VDOM 的组件库可能不兼容
+```
+
+**适用场景评估：**
+
+```javascript
+// ✅ 推荐使用 Vapor Mode
+- 性能敏感的移动端应用
+- 大量数据展示的表格/列表
+- 嵌入式/资源受限环境
+- 追求极致首屏性能的场景
+- 简单的交互组件
+
+// ⚠️ 谨慎使用
+- 高度动态的组件结构
+- 需要手写渲染函数的场景
+- 重度依赖第三方 UI 库
+
+// ❌ 不适合
+- 需要 JSX 的项目
+- 动态组件为核心的应用
+```
+
+**性能基准对比：**
+
+```
+操作类型              VDOM      Vapor     提升
+─────────────────────────────────────────────
+创建 1000 行          45ms      12ms      3.8x
+更新全部行            38ms       8ms      4.8x
+更新单行               4ms      0.3ms    13.3x
+交换两行               6ms      0.8ms     7.5x
+删除行                 8ms       2ms      4.0x
+内存占用 (1000行)     12MB      3MB       4.0x
+运行时体积            50KB      6KB       8.3x
+```
+
+---
+
+### Q23: 如何在项目中渐进式采用 Vapor Mode？
+
+**答案：**
+
+**步骤 1：升级依赖**
+
+```bash
+# 确保 Vue 版本支持 Vapor（3.5+）
+npm install vue@latest
+npm install @vitejs/plugin-vue@latest
+```
+
+**步骤 2：配置构建工具**
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      vapor: true,
+      // 可选：指定 Vapor 组件的文件模式
+      vaporPatterns: [
+        '**/*.vapor.vue',
+        '**/vapor/**/*.vue'
+      ]
+    })
+  ]
+})
+```
+
+**步骤 3：识别适合迁移的组件**
+
+```javascript
+// 分析工具：识别性能热点
+// 1. 使用 Vue Devtools Performance 面板
+// 2. 找出频繁更新的组件
+// 3. 评估组件复杂度
+
+// 适合迁移的特征：
+// - 纯展示组件
+// - 列表/表格组件
+// - 频繁更新的状态展示
+// - 不依赖动态组件/渲染函数
+```
+
+**步骤 4：逐步迁移**
+
+```vue
+<!-- 原组件：DataTable.vue -->
+<!-- 新组件：DataTable.vapor.vue -->
+
+<template>
+  <table>
+    <tr v-for="row in rows" :key="row.id">
+      <td v-for="cell in row.cells" :key="cell.id">
+        {{ cell.value }}
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script setup>
+// Composition API 代码无需修改
+import { ref, computed } from 'vue'
+defineProps(['rows'])
+</script>
+```
+
+**步骤 5：性能验证**
+
+```javascript
+// 添加性能监控
+import { onMounted, onUpdated } from 'vue'
+
+let updateStart = 0
+
+onBeforeUpdate(() => {
+  updateStart = performance.now()
+})
+
+onUpdated(() => {
+  const duration = performance.now() - updateStart
+  console.log(`Update took: ${duration.toFixed(2)}ms`)
+  
+  // 上报到监控系统
+  reportMetric('component_update', duration)
+})
+```
+
+**迁移策略建议：**
+
+```
+阶段 1（试点）
+├── 选择 1-2 个性能关键组件
+├── 转换为 Vapor Mode
+└── 验证性能提升和功能正确性
+
+阶段 2（扩展）
+├── 迁移更多展示型组件
+├── 建立 Vapor 组件开发规范
+└── 团队培训
+
+阶段 3（优化）
+├── 监控生产环境性能
+├── 根据数据调整策略
+└── 持续迭代优化
+```
+
+---
+
+## 9. Vue 3 与 Vue 2 核心区别
+
+### Q24: Vue 3 相比 Vue 2 做了哪些重大改进？
+
+**答案：**
+
+**1. 架构层面：**
+
+| 改进点 | Vue 2 | Vue 3 |
+|--------|-------|-------|
+| 响应式系统 | Object.defineProperty | Proxy |
+| 代码组织 | Options API | Composition API |
+| 源码结构 | 单一仓库 | Monorepo（@vue/reactivity 可独立使用） |
+| TypeScript | 额外配置 | 原生支持 |
+| Tree-shaking | 有限 | 全面支持 |
+
+**2. 新增特性：**
+
+```javascript
+// Teleport：传送组件到任意 DOM 位置
+<Teleport to="body">
+  <Modal />
+</Teleport>
+
+// Suspense：异步组件加载状态处理
+<Suspense>
+  <template #default>
+    <AsyncComponent />
+  </template>
+  <template #fallback>
+    <Loading />
+  </template>
+</Suspense>
+
+// 多根节点（Fragments）
+<template>
+  <header>...</header>
+  <main>...</main>
+  <footer>...</footer>
+</template>
+
+// createRenderer：自定义渲染器
+import { createRenderer } from '@vue/runtime-core'
+const { render } = createRenderer({
+  createElement(type) { /* ... */ },
+  insert(el, parent) { /* ... */ },
+  // ...
+})
+```
+
+**3. 破坏性变更：**
+
+```javascript
+// v-model 变化
+// Vue 2: value + input
+// Vue 3: modelValue + update:modelValue
+
+// 移除的 API
+// $on, $off, $once（使用 mitt 替代）
+// $children（使用 ref + expose）
+// $listeners（合并到 $attrs）
+// filters（使用 computed 或方法）
+
+// v-for 和 v-if 优先级
+// Vue 2: v-for 优先
+// Vue 3: v-if 优先
+
+// 生命周期重命名
+// destroyed → unmounted
+// beforeDestroy → beforeUnmount
+```
+
+---
+
+## 10. 实战场景题
+
+### Q25: 如何实现一个防抖的搜索输入框？
+
+**答案：**
+
+```javascript
+// 方案1：使用 watchEffect + 自定义防抖
+import { ref, watchEffect } from 'vue'
+
+function useDebouncedSearch(delay = 300) {
+  const searchTerm = ref('')
+  const debouncedTerm = ref('')
+  
+  watchEffect((onCleanup) => {
+    const timer = setTimeout(() => {
+      debouncedTerm.value = searchTerm.value
+    }, delay)
+    
+    onCleanup(() => clearTimeout(timer))
+  })
+  
+  return { searchTerm, debouncedTerm }
+}
+
+// 使用
+const { searchTerm, debouncedTerm } = useDebouncedSearch(300)
+
+watch(debouncedTerm, async (term) => {
+  if (term) {
+    results.value = await fetchResults(term)
+  }
+})
+
+// 方案2：使用 VueUse
+import { useDebounceFn, refDebounced } from '@vueuse/core'
+
+const searchTerm = ref('')
+const debouncedTerm = refDebounced(searchTerm, 300)
+
+// 或者防抖函数
+const debouncedSearch = useDebounceFn((term) => {
+  fetchResults(term)
+}, 300)
+
+watch(searchTerm, debouncedSearch)
+```
+
+---
+
+### Q26: 如何封装一个可复用的 useFetch 组合式函数？
+
+**答案：**
+
+```javascript
+import { ref, shallowRef, watchEffect, toValue } from 'vue'
+
+export function useFetch(url, options = {}) {
+  const data = shallowRef(null)
+  const error = shallowRef(null)
+  const loading = ref(false)
+  
+  const execute = async () => {
+    loading.value = true
+    error.value = null
+    
+    const controller = new AbortController()
+    
+    try {
+      const response = await fetch(toValue(url), {
+        ...options,
+        signal: controller.signal
+      })
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      
+      data.value = await response.json()
+    } catch (e) {
+      if (e.name !== 'AbortError') {
+        error.value = e
+      }
+    } finally {
+      loading.value = false
+    }
+    
+    return controller
+  }
+  
+  // 自动执行并支持响应式 URL
+  watchEffect((onCleanup) => {
+    const controller = execute()
+    onCleanup(() => controller?.abort())
+  })
+  
+  const refetch = () => execute()
+  
+  return {
+    data,
+    error,
+    loading,
+    refetch
+  }
+}
+
+// 使用
+const userId = ref(1)
+const { data: user, loading, error, refetch } = useFetch(
+  () => `/api/users/${userId.value}`
+)
+
+// 改变 userId 会自动重新请求
+userId.value = 2
+```
+
+---
+
+### Q27: 如何实现一个无限滚动列表？
+
+**答案：**
+
+```javascript
+// useInfiniteScroll.js
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useInfiniteScroll(loadMore, options = {}) {
+  const { 
+    threshold = 100,
+    container = null 
+  } = options
+  
+  const loading = ref(false)
+  const finished = ref(false)
+  
+  const handleScroll = async (e) => {
+    if (loading.value || finished.value) return
+    
+    const target = container?.value || document.documentElement
+    const scrollHeight = target.scrollHeight
+    const scrollTop = target.scrollTop
+    const clientHeight = target.clientHeight
+    
+    if (scrollHeight - scrollTop - clientHeight < threshold) {
+      loading.value = true
+      const hasMore = await loadMore()
+      loading.value = false
+      
+      if (!hasMore) {
+        finished.value = false
+      }
+    }
+  }
+  
+  onMounted(() => {
+    const target = container?.value || window
+    target.addEventListener('scroll', handleScroll)
+  })
+  
+  onUnmounted(() => {
+    const target = container?.value || window
+    target.removeEventListener('scroll', handleScroll)
+  })
+  
+  return { loading, finished }
+}
+
+// 使用 Intersection Observer 的更优方案
+export function useInfiniteScrollV2(callback) {
+  const target = ref(null)
+  const loading = ref(false)
+  
+  let observer = null
+  
+  onMounted(() => {
+    observer = new IntersectionObserver(async ([entry]) => {
+      if (entry.isIntersecting && !loading.value) {
+        loading.value = true
+        await callback()
+        loading.value = false
+      }
+    })
+    
+    if (target.value) {
+      observer.observe(target.value)
+    }
+  })
+  
+  onUnmounted(() => {
+    observer?.disconnect()
+  })
+  
+  return { target, loading }
+}
+
+// 使用
+<template>
+  <div v-for="item in items" :key="item.id">{{ item.name }}</div>
+  <div ref="target">
+    <span v-if="loading">加载中...</span>
+  </div>
+</template>
+
+<script setup>
+const items = ref([])
+const page = ref(1)
+
+const { target, loading } = useInfiniteScrollV2(async () => {
+  const newItems = await fetchItems(page.value++)
+  items.value.push(...newItems)
+})
+</script>
+```
+
+---
+
+### Q28: 如何处理 Vue 3 中的错误边界？
+
+**答案：**
+
+```javascript
+// ErrorBoundary.vue
+<script setup>
+import { onErrorCaptured, ref } from 'vue'
+
+const error = ref(null)
+const errorInfo = ref(null)
+
+onErrorCaptured((err, instance, info) => {
+  error.value = err
+  errorInfo.value = info
+  
+  // 上报错误
+  reportError(err, info)
+  
+  // 返回 false 阻止错误继续传播
+  return false
+})
+
+const reset = () => {
+  error.value = null
+  errorInfo.value = null
+}
+</script>
+
+<template>
+  <div v-if="error" class="error-boundary">
+    <h2>出错了！</h2>
+    <p>{{ error.message }}</p>
+    <button @click="reset">重试</button>
+  </div>
+  <slot v-else></slot>
+</template>
+
+// 使用
+<ErrorBoundary>
+  <RiskyComponent />
+</ErrorBoundary>
+
+// 全局错误处理
+app.config.errorHandler = (err, instance, info) => {
+  console.error('Global error:', err)
+  console.log('Component:', instance)
+  console.log('Error info:', info)
+  
+  // 发送到错误监控服务
+  Sentry.captureException(err)
+}
+
+// 处理异步错误
+app.config.warnHandler = (msg, instance, trace) => {
+  console.warn('Warning:', msg)
+}
+```
+
+---
+
+## 总结
+
+Vue 3 面试重点掌握：
+
+1. **响应式原理**：Proxy、依赖收集、触发更新的完整流程
+2. **Composition API**：setup、ref/reactive、watch/computed 原理
+3. **编译优化**：静态提升、PatchFlags、Block Tree
+4. **Diff 算法**：快速 Diff、最长递增子序列
+5. **性能优化**：v-memo、shallowRef、组件懒加载
+6. **实战能力**：组合式函数封装、状态管理、错误处理
+
+---
+
+> 持续更新中，欢迎补充！