前端面试题（React 与 Vue）

React更愿意在函数上做文章，用函数作为组件的基础，用纯函数简单的重复执行来代替复杂的视图更新流程，Hooks也是函数，useState触发函数组件的执行，并作为纯函数执行的不同输入，useEffect将函数组件中的所有副作用从函数中隔离出去，自定义hooks也是函数。React看起来如此复杂的框架，归根结底只是通过函数的执行去渲染出视图而已，这也是React如此简洁和优雅的原因。

Fiber架构

Fiber 架构实现可中断的异步渲染，解决了传统同步渲染阻塞主线程的问题。

Fiber 节点结构

每个组件对应一个 Fiber 节点，构成链表树。节点包含组件类型、状态、副作用标记，节点指针等。

主要流程

状态更新触发组件重新渲染，启动更新流程。

Render 渲染阶段构建 Fiber 树

利用时间切片将渲染任务拆分为微任务，通过调度器按优先级异步执行，渲染过程可被高优先级任务中断。

从根节点开始采用深度优先遍历，递归处理每个 Fiber 节点，逐步构建 Fiber 链表树。

diff 算法对比新旧虚拟 DOM，复用 key 和类型相同的节点，标记新增 / 更新 / 删除等副作用，处理子节点时需要两次遍历，第一次遍历进行匹配和复用，第二次遍历进行增删和移动。

当节点没有子节点时，自底向上收集副作用，将子节点的副作用合并到父节点，最终形成从根节点到子节点的副作用链表。

每处理完一个 Fiber 节点，就检查时间片是否耗尽，如果耗尽就暂停任务并保存进度，等浏览器空闲时继续执行渲染任务。

Commit 提交阶段更新真实 DOM

遍历副作用链表，批量执行 DOM 操作，完成视图渲染。

构建完成的 Fiber 链表树替换当前的 Fiber 链表树，保证视图连续性。它们通过一个指针相关联，以便复用节点数据。

时间切片/调度器：设置任务优先级，将任务拆分为微任务，每次执行完微任务后，检查是否有高优先级任务插队执行，然后通过 MessageChannel 实现异步调度，利用浏览器空闲时间执行。

简要概述：

Render渲染阶段用时间切片将渲染任务拆分为微任务来执行，用深度优先遍历构建 Fiber 链表树，Diff 算法对比新旧 Fiber 节点，然后标记副作用，自底向上收集副作用形成副作用链表，每处理完一个 Fiber 节点就检查是否有高优先级任务，如果有就暂停渲染并保存进度，等浏览器空闲时继续执行渲染任务。

Commit提交阶段遍历副作用链表，批量执行 DOM 操作，完成视图渲染。

组件重新渲染

状态更新
父组件传递来的props变化
强制更新ForceUpdate
父组件重新渲染
上下文Context变化

组件通信

父传子props
子传父回调函数
跨层级context API
复杂状态管理使用redux或zustand
事件总线event bus可跨层级但破坏单向数据流
ref使用子组件

为什么不能在if中使用hook

React顶层调用规则，要求每次渲染时hooks的调用顺序必须完全一致。

React使用链表来管理hooks状态，每个hook根据它在链表中的位置来标识。每次渲染时，react会严格记录hooks的调用顺序，组件重新渲染时react会按上一次渲染时hooks的执行顺序来匹配对应状态，如果使用if等语句，可能会导致hooks在链表中的顺序发生变化，使得react的无法关联正确的状态。

useEffect与useLayoutEffect区别

useEffect 的设计是用来执行一段和当前渲染无关的副作用代码，同时解决了和生命周期相关的一些问题，通过依赖项数组的不同，实现不同的功能，使用return来清理副作用。

useLayoutEffect 执行需同步执行的逻辑，如DOM测量或修改。

useEffect 浏览器绘制后异步执行，不阻塞渲染；useLayoutEffect：浏览器绘制前同步执行，阻塞渲染

性能优化hooks

useCallback 与 useMemo 缓存

useCallback 缓存一个方法，useMemo 缓存一个计算后的值，当它们的依赖无变化时就不会重新声明或计算

因为函数组件通过重复执行的方式不停的执行自身渲染视图，在函数组件内部声明的方法每次都会被重新声明，函数组件中写的逻辑每次都会被重新执行，可能会带来一定的浪费，极端情况下会影响页面性能。

React.memo

防止子组件不必要的渲染，当父组件重新渲染时，如果父组件传递给子组件的props没有变化，则子组件不会重新渲染。

但这并不意味着需要滥用这些性能优化方法，应当在真的存在问题的时候再去考虑用它解决。比如真的在函数组件里写了一个cpu计算超级复杂的逻辑，频繁执行确实会影响组件的渲染，此时再考虑用 useMemo 去缓存计算结果。

受控组件与非受控组件

React中的组件根据是否受React控制可分为受控组件和非受控组件。

受控组件的值由React组件的状态控制，由用户输入触发React状态更新，然后触发重新渲染并更新DOM；

非受控组件的值不受React控制，由自身管理状态，通常使用ref来获取输入值，由用户输入直接更新DOM。

一般推荐使用受控组件来实现表单，数据由React组件负责处理。

redux与zustand区别

Zustand提供了轻量级状态管理，API简洁易用；Redux 相比之下是重量级状态管理，适用于大型或复杂项目，使用起来没有Zustand简洁。

状态模型:

在Zustand中直接通过设置set来更新状态； Redux则使用action和reducer来管理状态。

更新机制：

Redux 的更新机制会触发全局检查，依赖开发者用手动优化来避免无效渲染；而 Zustand 仅通知关联字段的组件更新，实现真正按需渲染。

语法差异：

Redux中是不可变数据，也就是当更新状态时不直接修改原数据；而Zustand是可变语法，允许直接修改状态属性，底层库自动处理不可变状态转换。

二、Vue

vue2与vue3区别

vue2是选项式API，vue3是组合式API，提供了set up语法糖，还有响应式API：Ref和reactive，解决了vue2选项式API的逻辑碎片化问题。

Vue2使用object.defineProperty来实现对数据对象属性的getter和setter进行拦截，从而实现双向数据绑定及响应式更新。

Vue3使用ES6中的proxy来代理整个数据对象，提供完整的响应式机制，能更好的处理数组变化并监听深层对象属性变化。

生命周期钩子做了调整，Vue3中的模板支持多个根节点，且更好的支持ts。

生命周期

Vue2选项式API生命周期钩子：

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted

Vue3组合式API在 setup() 中使用生命周期钩子，前缀为 on，beforeCreate 和 created 被 setup() 替代。

setup是组合式API的入口，用于定义响应式数据、方法和生命周期钩子，setup中没有this。

computed与watch区别

computed的用于派生数据，也就是依赖其他值计算的结果，且具有缓存机制，只有依赖值变化，才会重新计算，如果没有变化则直接返回缓存的值；而且计算属性本身就是响应式，改变会自动触发依赖更新。

watch一般用于监听特定的数据变化并执行副作用，比如异步请求或操作DOM等，支持深度监听和立即执行，需要显式监听。

WatchEffect可以自动追踪依赖，响应式数据变化时自动重新执行。

副作用

副作用是指在代码执行过程中，对外部环境产生的可观察变化，比如修改全局变量、操作DOM、发起网络请求、定时器操作、打印日志等。

纯函数：相同的输入必有相同的输出。

v-if与v-show区别

v-if条件渲染，元素不存在于DOM中，切换时触发组件的创建或销毁，适用于条件不经常变化或者很少改变的场景。

v-show通过CSS来控制隐藏和显示，速始终存在于DOM中，适用于需要频繁切换显示状态的场景。

v-if切换成本高，v-show初始渲染成本高。

v-model如何实现

v-model 的主要功能是在表单输入或自定义 Vue 组件上创建双向数据绑定，它同时负责数据的读取和数据的写入。

在原生表单元素上的实现原理：

html 复制代码

<input v-model="username">

等效于以下写法：

html 复制代码

<input :value="username" @input="username = $event.target.value">

在自定义组件上的实现原理：

html 复制代码

<custom-input v-model="username">

等效于以下写法：

html 复制代码

<custom-input  :model-value="username"  @update:model-value="username = $event">

子组件通过 props 接收 modelValue，触发 update:modelValue 事件，也可以用 emits 触发更新。

组件内部实现：

javascript 复制代码

props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
  handleInput(e) {
    this.$emit('update:modelValue', e.target.value)
  }
}

ref与reactive区别

ref可以用于基本数据类型，也可以用于引用类型，而reactive只能用于对象。

使用ref需要加value，如果将ref用于对象，则会自动转化为reactive包装的。

如果直接替换一整个reactive对象，会失去响应式；直接解构也会失去响应式，需要使用toRefs。

组件通信

props/自定义事件，v-model，父子间通信
provide/inject，跨层级通信
事件总线，任意组件间通信
使用pinia管理状态
父组件使用子组件的ref
路由参数，用于页面间传递数据
插槽，普通插槽是父组件传数据给子组件，作用域插槽是子组件数据传递给父组件
浏览器本地存储

对keep-alive的理解

keep-alive用于缓存组件实例，避免重复销毁和渲染。

被包裹的组件会触发特殊生命周期，切换时执行 deactivated 钩子，不会被销毁，再次激活时执行 activated。使用LRU算法（最近最少使用）自动清理缓存。

可以指定缓存规则和最大缓存实例数。

key的作用，为什么不建议用index作为key

key的作用是帮助diff算法识别节点的身份，通过复用相同key的节点，来优化渲染性能。

如果用index作为key，如果列表中的某项被删除，则后面的元素index全都会改变，可能导致原本可以复用的节点被重新创建。

如果列表项有输入框内容，用index会导致状态错乱。

正确做法是使用能够唯一标识的值作为key，比如数据库ID。

虚拟DOM与diff算法

虚拟DOM是什么？

虚拟DOM是真实DOM的轻量级表示，它通过js的对象数来描述真实DOM的结构和属性。

为什么要有虚拟DOM？

因为直接操作DOM的代价比较高，涉及到浏览器的回流和重绘，频繁操作会有性能问题。因此虚拟DOM作为缓冲层，通过diff算法对比新旧虚拟DOM树，找到最小化的更新操作，批量更新真实DOM，减少直接操作次数。

局限性：内存开销，简单场景可能性能不足。

Diff算法用来对比新旧虚拟DOM树的差异，找到最小化的更新操作，应用到真实DOM。

Diff算法仅比较同一层级的节点，不跨层级对比，若节点类型不同，则销毁旧子树并创建新子树。如果类型相同，则会对比并更新属性，然后递归处理子节点。

在列表渲染中，通过key标识节点身份，如果没有key就会按索引顺序对比。

vue与react中diff算法区别

列表对比策略与节点移动优化不同

Vue3采用双端对比+LIS算法优化，React采用单向递归+key机制。

Vue3从列表头尾同步开始对比，预处理相同节点，对于剩下的乱序节点，通过最长递归子序列算法计算最小移动路径。

React采用两轮遍历，首轮按索引顺序更新可复用节点，次轮处理剩余节点的新增、删除或移动，因为fiber节点为单向链表。

响应式原理与proxy

vue3的响应式原理基于js的proxy对象来实现。

当使用reactive包装一个普通对象时，vue会创建一个代理对象Proxy，该对象会拦截所有对原始对象的访问和修改。

当访问对象的属性时，Proxy的get拦截器会被触发，然后执行依赖收集，将当前正在执行的代码，也就是副作用函数与该属性建立联系。

如果访问的是对象，vue会递归的将其转换为响应式对象。

当修改对象的属性时，Proxy的set拦截器会被触发，vue会检查新值与原值是否相同，如果不相同vue会触发更新，通知所有依赖该属性的副作用函数重新执行。

只有实际被使用的属性才会建立依赖。

ref将基本值包装到一个对象中，这个对象有一个.value属性。

访问.value的值时会触发getter，进行依赖收集；修改.value的值时会触发setter，检查值是否变化然后触发更新。

vue与react区别

相同点：都采用组件化，都使用虚拟DOM和diff算法，都实现数据驱动视图。都有父子组件传参数据状态管理和路由等。

核心理念不同

vue的核心理念是降低前端开发门槛，是一个灵活易用的渐进式框架，提供双向数据绑定。

React的核心思想是声明是声明式编程和单向数据流。

组件化差异

Vue将HTML CSS和js写在同一个文件中，就是.vue文件，使用的是组合式API。

React则把HTML和CSS全部写进js中，使用.jsx文件，使用的是函数组件。

Diff算法不同

Vue使用双端对比以及LIS算法，而react是单向递归与fiber架构。

Vue内置了很多黑魔法，而react则是社区生态丰富。

Vue上手简单，React更灵活。