(04).前端知识库之Vue、React篇

Vue 相关

1. Vue 的生命周期钩子函数及各自作用

   • beforeCreate: 初始化数据观测和事件监听之前触发。
   • created: 实例创建完成后，数据观测和事件配置已完成，但尚未挂载到 DOM。
   • beforeMount: 模板编译完成，但未渲染到 DOM。
   • mounted: 组件挂载到 DOM 后触发，适合初始化 DOM 操作。
   • beforeUpdate: 数据更新前触发，可用于获取旧值。
   • updated: 数据更新后触发，适合 DOM 更新后的操作。
   • beforeDestroy: 组件销毁前触发，清理定时器、事件监听等。
   • destroyed: 组件销毁后触发，所有资源已释放。

2. Vue 组件间通信的方式有哪些？

   • 父子通信：props（父传子） + $emit（子传父）。
   • 非父子通信：事件总线（Event Bus）、Vuex（状态管理）、ref/provide/inject（Vue3）。
   • 全局状态管理：Vuex（Vue） / Redux（React）。

3. Vue3 为何引入 Composition API？

   • 解决 Options API 的局限性（逻辑复用困难、类型推断不友好）。
   • 更灵活的代码组织（按功能模块组合逻辑）。
   • 更好的性能（自动追踪依赖，避免不必要的响应式更新）。

4. Vue 双向数据绑定的实现机制？

   • 响应式系统：通过 Object.defineProperty（Vue2）或 Proxy（Vue3）实现数据劫持。
   • 指令解析：v-model 指令将输入事件与数据绑定。
   • Watcher：监听数据变化并更新视图，视图变化触发数据更新（如 $emit）。

5. Vue2 和 Vue3 的区别是什么？各自有哪些常用特性？

   • 区别：
     • Vue3 使用 Proxy 替代 Object.defineProperty，性能更好。
     • Composition API 代替 Options API。
     • 自定义指令更灵活，支持 beforeMount 等新钩子。
   • Vue2 特性：Options API、双向绑定 v-model、过渡动画。
   • Vue3 特性：Teleport、Suspense、异步组件默认支持。

6. Vue.js 中的双向数据绑定是如何实现的？

   • 通过 v-model 将输入组件的事件（如 input）绑定到父组件的数据，并通过响应式系统自动同步视图。

7. Vue 的响应式原理是什么？

   • 使用 Proxy（Vue3）或 Object.defineProperty 对数据对象进行劫持，当数据变化时触发 setter，通知依赖它的 Watcher 执行更新。

8. 父组件如何监听子组件生命周期？

   • 使用 v-on 监听子组件的自定义事件（如 @child-mounted="handle"）。

React 相关

1. React 的虚拟 DOM 概念及优势

   • 虚拟 DOM 是用 JavaScript 对象表示的真实 DOM 结构的轻量级抽象。
   • 优势：减少直接操作 DOM 的开销，通过 Diff 算法高效更新视图。

2. React 中 setState 的原理与使用注意事项

   • 原理：合并新旧状态后触发组件重新渲染。
   • 注意事项：
     • 异步更新（批量处理多个 setState）。
     • 不要直接修改状态对象（需创建新副本）。

3. React Fiber 架构的必要性？其优化机制是什么？

   • 必要性：解决大型应用的性能问题（如长任务阻塞主线程）。
   • 优化机制：优先级调度（中断低优先级任务）、细粒度更新（仅更新部分组件）。

4. React 组件中的 props 和 state 有什么区别？

   • props：父组件传递的不可变数据，用于组件间通信。
   • state：组件内部可变状态，驱动视图更新。

5. React 的生命周期方法有哪些？Hooks 如何使用？

   • 生命周期方法（Class 组件）：componentDidMount, componentDidUpdate, componentWillUnmount。
   • Hooks：useState（状态）、useEffect（副作用）、useContext（上下文）等。

6. React 中 key 的作用及最佳实践？

   • 作用：帮助 React 识别哪些元素被更改，优化列表渲染性能。
   • 最佳实践：唯一且稳定的标识符（如 ID），避免使用索引。

7. React 的虚拟 DOM 与 Diff 算法是如何工作的？

   • 虚拟 DOM：用树形结构表示 UI。
   • Diff 算法：对比新旧树的差异（同层节点按顺序比对），生成最小更新指令。

8. React 中 setState 的同步/异步场景？

   • 异步：默认批量更新（如事件处理函数中）。
   • 同步：在 setTimeout 或 Promise 中直接调用 setState。

9. 谈谈你对 React 的看法，以及它的工作原理

   • 看法：声明式 UI 框架，组件化开发，生态丰富但学习曲线陡峭。
   • 工作原理：通过虚拟 DOM 和 Diff 算法实现高效更新，单向数据流提升可维护性。

组件化开发与通信

1. 组件化开发在 Vue/React 中的体现与优势

   • 体现：封装可复用的 UI 和逻辑单元。
   • 优势：代码复用、维护性高、独立开发。

2. 组件间通信的常见方式？

   • 父子通信：props + 事件。
   • 跨层级通信：事件总线、状态管理库（Vuex/Redux）。
   • 全局通信：Context API（React） / Provide/Inject（Vue3）。

3. Vue 与 React 的组件通信方式对比

   • Vue：更依赖 Vuex 和 Event Bus，语法简洁。
   • React：倾向于 Context API 和 Redux，灵活性更高。

状态管理

1. Redux 与 Vuex 的区别是什么？

   • 语法：Redux 需要手动编写 Action 和 Reducer，Vuex 提供更简洁的 API。
   • 模块化：Vuex 支持命名空间，Redux 需要额外配置。
   • 集成：Vuex 深度集成 Vue，Redux 需要通过中间件适配。

2. Redux 与 Vuex 的设计思想对比？

   • Redux：强调单一数据源（Store）和纯函数（Reducer）。
   • Vuex：基于 Vue 的组件化思想，提供更直观的状态管理方式。

3. Redux/Vuex 状态管理的核心概念

   • State：全局状态树。
   • Action：描述状态变化的事件。
   • Mutation/Reducer：修改状态的逻辑函数。
   • Dispatcher：触发 Action 的入口。

框架对比与原理

1. 前端框架对比（如 React/Vue/Angular）

   • React：轻量灵活，学习曲线陡峭，生态庞大。
   • Vue：渐进式框架，语法简洁，易上手。
   • Angular：完整的企业级方案，依赖注入和 TypeScript 支持强。

2. React 与 Vue.js 的相似性和差异性是什么？

   • 相似性：组件化开发、虚拟 DOM、单向数据流。
   • 差异性：语法风格（JSX vs 模板）、状态管理（Redux vs Vuex）、生命周期钩子。

3. 描述 Angular 框架中的组件生命周期

   • 生命周期钩子：ngOn ngOnChanges ngOnInit ngOnDestroy 等，覆盖组件创建、更新、销毁阶段。