Vue&React | 奇趣生活实验室

Vue&React | 奇趣生活实验室

Vue3高频面试题

Composition API 与 Options API 的区别

Composition API：以逻辑功能为单位组织代码（如 setup()），解决复杂组件代码分散的问题，支持更灵活的逻辑复用（如自定义 Hook），对 TypeScript 支持更友好。
Options API：通过 data、methods 等选项分类组织代码，适合简单组件，但逻辑复杂时代码可读性下降。

Vue3性能优化手段

响应式系统升级：使用 Proxy 替代 Object.defineProperty，支持动态属性监听和数组索引修改。
编译优化：静态节点提升（复用未变化 DOM）、PatchFlag 标记动态节点、事件缓存减少重复绑定。
Tree-shaking：按需打包 API（如未使用 v-model 则不包含相关代码）。

3. Proxy 的优势

支持对象/数组的全属性监听，无需递归遍历；
可拦截 delete、has 等操作；
避免 Vue2 中无法检测新增属性或数组索引的问题。

Teleport 和 Suspense 的作用

Teleport：将组件内容渲染到指定 DOM 节点（如全局弹窗），解决层级样式问题。
Suspense：处理异步组件加载状态，显示加载占位符（如骨架屏）。

Vue3 的 Tree-shaking 特性

通过 ES Module 静态分析，移除未使用的代码。例如，未使用 transition 组件时，相关代码不会打包。

React 高频面试题

Fiber 架构的核心改进

目标：解决同步更新导致的页面卡顿问题。
实现：将渲染过程拆分为可中断的异步任务，通过链表结构（Fiber 节点）实现优先级调度和增量更新。

Hooks 的优势与使用限制

优势：逻辑复用（如 useEffect）、函数组件支持状态管理、减少类组件的复杂度。
限制：只能在函数组件或自定义 Hook 顶层调用，不可在循环/条件中使用。

受控组件与非受控组件

受控组件：表单值由 React 状态管理（如 value + onChange），数据流可控。
非受控组件：表单值由 DOM 自身管理（通过 ref 获取），适合简单场景。

React Diff 算法原理

策略：同级节点比较（避免跨层级移动）、通过 key 标识元素唯一性、类型不同则直接替换子树。
优化点：对列表元素使用唯一 key 提高复用效率，避免不必要的 DOM 操作。

性能优化手段

避免不必要的渲染：React.memo、useMemo/useCallback 缓存计算结果。
代码分割：React.lazy + Suspense 实现按需加载。
虚拟列表：react-window 处理长列表渲染。

三、对比类问题

1. Vue 与 React 设计理念差异

Vue：渐进式框架，强调模板语法和响应式系统，内置路由/状态管理方案（Vue Router/Pinia）。
React：专注于视图层，依赖社区生态（如 React Router/Redux），推崇函数式编程和不可变数据。

Composition API 与 React Hooks 的异同

相同点：均支持逻辑复用，减少代码耦合。
不同点：Vue 的 Composition API 基于响应式系统，Hooks 依赖闭包和状态队列，需注意调用顺序。

1. Vue3 响应式系统的实现原理

核心机制：通过 Proxy 代理对象，结合 Reflect 反射操作实现数据劫持。Proxy 可拦截对象的所有操作（如 get、set、deleteProperty），自动追踪依赖并触发更新。
对比 Vue2：
- 动态属性支持：Proxy 无需预先定义属性（Vue2 需 Vue.set）。
- 性能优化：避免递归遍历对象属性，直接代理整个对象。
示例代码：
```
javascriptCopy
```

2. Composition API 的底层逻辑

解决的问题：Options API 中逻辑分散（如 data、methods），复杂组件难以维护。
核心设计：
- 逻辑复用：通过自定义 Hook（如 useFetch）封装可复用逻辑。
- 响应式工具链：ref（基本类型包装）、reactive（对象代理）、toRefs（解构响应式对象）。
与 React Hooks 的区别：Vue 的 Composition API 基于响应式系统，无需手动管理闭包顺序。

3. Vue3 编译优化策略

静态提升（Hoist Static）：将静态节点提升至渲染函数外，避免重复创建。
PatchFlag 标记：在虚拟 DOM 中标记动态节点（如 TEXT、CLASS），仅对比变化的属性。
Tree-shaking：按需打包 API，如未使用 v-model 则剔除相关代码。

4. Teleport 和 Suspense 的底层实现

Teleport：通过 portal 技术将组件渲染到指定 DOM 节点（如 body），解决模态框层级问题。
Suspense：内部使用 Promise 管理异步组件，通过插槽展示加载状态（如骨架屏）。

createGlobalState

createGlobalState 是 VueUse 库中用于创建全局响应式状态的核心工具，其实现巧妙结合了闭包、Vue3 响应式系统 和 effectScope 机制。以下是其核心实现逻辑与原理的深度解析：

一、核心实现逻辑

1. 闭包与单例模式

状态隔离：通过闭包变量（如 state）保存全局状态实例，确保全局唯一性。首次调用时通过 stateFactory 初始化状态，后续调用直接返回已存在的实例。
```
javascriptCopy
```

2. `effectScope` 的作用

副作用管理：使用 effectScope(true) 创建一个独立的副作用作用域（detached: true），将 stateFactory 中生成的响应式状态（如 ref、computed、watch）自动收集到该作用域中。
生命周期控制：当组件卸载或手动调用 scope.stop() 时，该作用域内所有副作用（如 watch 监听）会被自动清理，避免内存泄漏。

3. SSR（服务端渲染）支持

环境判断：通过 __SSR__ 常量区分客户端与服务端环境。在服务端，状态会被挂载到请求级别的上下文对象（ssrContext），确保每个请求的隔离性。
```
javascriptCopy
```

二、与普通闭包的区别

1. 副作用自动清理

普通闭包：仅通过闭包保存状态，但无法自动清理响应式依赖（如 watch），可能导致内存泄漏。
effectScope 优势：通过作用域统一管理副作用生命周期，无需手动调用 stop()，适合需要自动清理的场景（如组件卸载）。

2. 响应式依赖的精准控制

示例场景：若状态中包含定时器或事件监听，使用 onScopeDispose() 注册清理回调，确保作用域停止时自动释放资源：
```
javascriptCopy
```

三、设计哲学与适用场景

1. 轻量级状态共享

对比 Pinia：createGlobalState 无复杂中间件或 DevTools 集成，适合简单全局状态（如用户 token、主题配置）。
开发效率：通过工厂函数快速定义状态逻辑，减少模板代码。

2. 与组件生命周期的解耦

跨组件复用：状态独立于组件实例存在，可在任意组件中调用 useGlobalState() 访问，无需通过 Props 或 Provide/Inject 传递。

四、注意事项

SSR 兼容性
- 需确保服务端状态键唯一，避免不同请求间的状态污染。
类型安全
- 推荐使用 TypeScript 标注工厂函数返回值，避免类型推断错误。
性能优化
- 复杂状态需手动管理资源释放（如定时器、WebSocket 连接），避免因作用域未及时清理导致内存泄漏。

五、总结

`createGlobalState` 的实现核心在于闭包的单例模式 + `effectScope` 的副作用管理，既保留了 Vue3 响应式系统的自动化优势，又通过作用域机制规避了内存泄漏风险。其轻量级特性使其成为小型项目或简单全局状态管理的理想选择，但在复杂场景（如持久化、状态分片）中仍需结合 Pinia 等专业库。

二、React 深入面试题

1. Fiber 架构的核心原理

解决的问题：同步更新导致的页面卡顿（如长任务阻塞渲染）。
实现机制：
- 链表结构：将任务拆分为多个 Fiber 节点，支持中断与恢复。
- 优先级调度：高优先级任务（如动画）优先执行，低优先级任务（如数据请求）延后。
三个阶段：Reconciliation（生成 Fiber 树）、Commit（更新 DOM）、Cleanup（执行副作用）。

2. Hooks 的底层实现与限制

链表存储状态：函数组件通过链表顺序记录 useState、useEffect 的状态，确保调用顺序一致。
规则限制：
- 不可条件调用：Hooks 依赖调用顺序，条件语句会破坏链表结构。
- 闭包陷阱：异步操作需通过 useRef 捕获最新值。

3. React 并发模式（Concurrent Mode）

核心能力：
- 时间切片（Time Slicing）：将渲染任务分割为小块，避免阻塞主线程。
- 过渡更新（Transition）：区分紧急更新（如输入）与非紧急更新（如搜索结果渲染）。
应用场景：长列表渲染、异步数据加载时保持交互流畅。

4. 虚拟 DOM 与 Diff 算法优化

Diff 策略：
- 同层比较：仅对比同级节点，跨层级移动直接重建子树。
- Key 的作用：唯一标识元素，减少不必要的 DOM 操作（如列表重排序）。
性能瓶颈：虚拟 DOM 的生成和对比本身消耗资源，需结合 React.memo 或 shouldComponentUpdate 优化。

三、框架对比类问题

1. Vue 与 React 设计哲学差异

响应式机制：
- Vue：自动依赖追踪（Proxy），开发者无感知更新。
- React：手动触发更新（setState），强调不可变数据。
模板 vs JSX：
- Vue：约束性模板语法（如 v-if），内置优化。
- React：JSX 灵活，依赖开发者控制渲染逻辑。

2. 性能优化方向对比

Vue3：编译时优化（静态提升、PatchFlag）。
React：运行时优化（Fiber 调度、并发模式）。

3. 状态管理方案差异

Vue：官方推荐 Pinia（Composition API 风格），轻量且类型友好。
React：社区生态主导（如 Redux、Recoil），需结合中间件（如 Redux-Thunk）处理异步。

四、高频代码题示例

1. 实现双向绑定（Vue3 vs React）

Vue3：
```
htmlCopy
```
React：
```
jsxCopy
```

2. React Hooks 代替 Redux 的思路

方案：使用 useContext + useReducer 实现全局状态管理：
```
javascriptCopy
```

总结建议

原理深挖：重点掌握 Proxy、Fiber、Hooks 链表等底层机制。
项目结合：举例说明优化手段（如 Vue3 的静态提升、React 的并发渲染）的实际应用场景。
框架对比：从响应式、模板、生态等维度结构化回答差异。

const data = { count: 0 };
const proxy = new Proxy(data, {
  get(target, key) {
    track(target, key); // 依赖收集
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    Reflect.set(target, key, value);
    trigger(target, key); // 触发更新
    return true;
  }
});

let initialized = false;
let state: any;
const scope = effectScope(true);

return () => {
  if (!initialized) {
    state = scope.run(() => stateFactory())!;
    initialized = true;
  }
  return state;
};

const useGlobalTimer = createGlobalState(() => {
  const interval = ref<NodeJS.Timeout>();
  const start = () => { /* 启动定时器 */ };
  const stop = () => { clearInterval(interval.value) };
  onScopeDispose(stop); // 作用域销毁时自动清理
  return { start, stop };
});

const StateContext = createContext();
const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <StateContext.Provider value={{ state, dispatch }}>
      <ChildComponent />
    </StateContext.Provider>
  );
};