每个Worker都是一个独立的线程，会占用一定的内存和CPU资源，因此，千百个肯定是性能低下，不切实际的。合理的使用数量取决于具体的应用场景和设备性能，比如某些浏览器对同时运行的Web Worker数量有限制（例如Chrome曾经限制为每个页面最多6个Dedicated Workers）。

对于分片上传，使用两三个Web Workers来处理确实可以提高性能，多个Worker可以并行处理不同的数据块，合理分配任务到多个Worker，也可以更好地利用多核CPU的优势。

总的来说，要根据实际需求和设备性能，选择合适的Worker数量，通常2-4个Worker是一个比较合理的范围，可以使用性能分析工具（如Chrome DevTools）监控CPU和内存使用情况，确保不会因为过多的Worker而导致性能下降，并且尽量均匀地分配任务到各个Worker，避免某些Worker过载而其他Worker闲置。

项目二：

1:分片上传流程

前端操作的大致流程

①读取本地文件，读成一个文件对象

②使用slice对文件进行切割，并得到Blob类型的文件对象

③将Blob类型的文件转成FormData表单类型对象

④对切片一个一个发送给后端

后端操作的一个大致流程：

①接受前端传递的切片并解析得到数据

②保存切片到某个文件夹

③当接收到前端的合并请求后开始合并切片

④创建可写流，将所有的切片读成流类型并汇入到可写流中得到完整的文件资源

2.分片上传如何校验文件完整性

在客户端计算整个文件的哈希值，并将该哈希值与分片一起发送到服务器,然后将文件分成多个分片，并为每个分片计算局部哈希值。再将每个分片及其局部哈希值上传到服务器，服务器接收每个分片及其局部哈希值，并进行校验。如果所有分片都通过校验，则将它们合并成完整的文件，并计算全局哈希值进行最终校验。

3.传分片对请求头有什么设置，分片范围大小之类的

• Content-Type：指定分片数据的内容类型。通常使用 application/octet-stream表示二进制数据。

• Content-Length：指定分片数据的长度（字节数）。

• X-File-Name：文件名，用于标识上传的文件。

• X-File-Size：文件总大小，用于服务器判断是否接收完整个文件。

• X-Chunk-Index：当前分片的索引，从0开始。

• X-Chunk-Count：分片总数，帮助服务器了解需要接收多少个分片。

• X-Chunk-Hash：当前分片的哈希值，用于校验分片的完整性。

• X-File-Global-Hash：整个文件的全局哈希值，用于最终校验文件的完整性。

Content-Type：指定分片数据的内容类型。通常使用 application/octet-stream表示二进制数据。

Content-Length：指定分片数据的长度（字节数）。

X-File-Name：文件名，用于标识上传的文件。

X-File-Size：文件总大小，用于服务器判断是否接收完整个文件。

X-Chunk-Index：当前分片的索引，从0开始。

X-Chunk-Count：分片总数，帮助服务器了解需要接收多少个分片。

X-Chunk-Hash：当前分片的哈希值，用于校验分片的完整性。

X-File-Global-Hash：整个文件的全局哈希值，用于最终校验文件的完整性。

4.JWT与session区别

JWT无状态，适合分布式系统，每个服务都可以独立验证JWT，但是每次请求都需要解码和验证JWT，可能会增加CPU开销。此外需要妥善处理JWT的存储和传输，防止被盗取，并且天然支持跨域，只需设置CORS。

Session有状态，只需要查找Session ID，性能较好，适合单体应用或小型系统。此外Session数据存储在服务器端，相对较安全，但是需要额外配置才能支持跨域。

Vue1.vue3.5了解吗

这里推荐直接去看“前端欧阳”对3.5的总结文章：这应该是全网最详细的Vue3.5版本解读

2.V3相对于V2做了哪些改进

• 首次渲染更快，diff 算法更快，内存占用更少，更好的 Type 支持

• Vue2是选项式API，一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。Vue3组合式API，将同一逻辑的内容写到一起，增强代码的、内聚性，所有逻辑在setup函数中，使用 ref、watch等函数组织代码

• Vue2时代的Mixin，数据来源不清晰，容易造成命名冲突，vue3的hook数据来源清晰，不会有命名冲突问题，逻辑精简

首次渲染更快，diff 算法更快，内存占用更少，更好的 Type 支持

Vue2是选项式API，一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。Vue3组合式API，将同一逻辑的内容写到一起，增强代码的、内聚性，所有逻辑在setup函数中，使用 ref、watch等函数组织代码

Vue2时代的Mixin，数据来源不清晰，容易造成命名冲突，vue3的hook数据来源清晰，不会有命名冲突问题，逻辑精简

3.ref,recative区别

主要在三个方面有不同：

• ref能够将基本类型的数据转换为响应式对象，reactive只能用于对象，将整个对象变成响应式的。

• 访问或修改 ref创建的对象中的值，需要通过 .value属性，对于 reactive创建的对象，可以直接访问和修改其属性

• ref返回的是一个具有 .value属性的对象，reactive返回的就是原始的对象，只不过现在这个对象是响应式的了

ref能够将基本类型的数据转换为响应式对象，reactive只能用于对象，将整个对象变成响应式的。

访问或修改 ref创建的对象中的值，需要通过 .value属性，对于 reactive创建的对象，可以直接访问和修改其属性

ref返回的是一个具有 .value属性的对象，reactive返回的就是原始的对象，只不过现在这个对象是响应式的了

当然，回答以上是不太够的，之前的面试经验中，面试官还会对.value属性和reactive为什么不能支持简单数据进行追。

关于.value的问题主要是因为在V3中处理响应式数据的方式有所不同，这导致了它们在使用上的差异

• ref提供了一个一致的API，被设计为可以将任何类型的值转换成一个响应式的引用对象，无论你传递给 ref的是什么类型的值，它都会返回一个具有 .value属性的对象。当在Vue模板中使用时，ref对象会被自动解包，因此你可以像操作普通变量一样操作它，而不必关心其是否是一个 ref。

• reactive是专门用于将Java对象（或数组，因为数组也是对象）转换成响应式对象的。这是因为 reactive使用了ES6的Proxy来监听属性的变化，而Proxy只能应用于对象，由于 reactive返回的是原始对象本身（只是这个对象现在变得响应式了），所以可以直接访问和修改它的属性，无需通过额外的属性如 .value。

ref提供了一个一致的API，被设计为可以将任何类型的值转换成一个响应式的引用对象，无论你传递给 ref的是什么类型的值，它都会返回一个具有 .value属性的对象。当在Vue模板中使用时，ref对象会被自动解包，因此你可以像操作普通变量一样操作它，而不必关心其是否是一个 ref。

reactive是专门用于将Java对象（或数组，因为数组也是对象）转换成响应式对象的。这是因为 reactive使用了ES6的Proxy来监听属性的变化，而Proxy只能应用于对象，由于 reactive返回的是原始对象本身（只是这个对象现在变得响应式了），所以可以直接访问和修改它的属性，无需通过额外的属性如 .value。

为什么 reactive 不能接受简单数据类型？

• reactive利用了Java的Proxy API，该API只能包装对象。对于非对象类型（如数字或字符串），无法直接应用Proxy，因此这些类型不适合用 reactive来处理。使用 reactive来包装简单数据类型可能会导致代码含义不明确，并且可能增加不必要的复杂性。为了保持API的一致性和简洁性，Vue团队决定让 reactive专注于处理复合的数据结构。

reactive利用了Java的Proxy API，该API只能包装对象。对于非对象类型（如数字或字符串），无法直接应用Proxy，因此这些类型不适合用 reactive来处理。使用 reactive来包装简单数据类型可能会导致代码含义不明确，并且可能增加不必要的复杂性。为了保持API的一致性和简洁性，Vue团队决定让 reactive专注于处理复合的数据结构。

综上所述，ref提供了一种通用的方式来创建响应式引用，能够适应所有类型的值，并通过 .value提供统一的访问方式；而 reactive更适合于处理复杂的状态对象，直接通过属性访问，但受限于Proxy的技术特点，它只作用于对象类型。

4.单例模式的ref：封装hook的话，在每一个组件使用时会生成一个新的ref，怎么用单例模式避免这种情况

在Vue中：

①Vuex：如果应用的状态管理较为复杂，可以考虑使用Vuex来存储全局的引用。这样，所有组件都可以访问到同一个引用。

②Provide/Inject：Vue提供了 provide和inject选项，允许父组件向其所有的子组件提供一个数据对象。你可以在根组件或任何高层级组件中定义并提供一个ref，然后在任意深度的子组件中注入这个ref。

③全局变量：虽然不是最佳实践，但可以将一个 ref作为全局变量挂载到Vue原型上或者直接添加到window对象上。这种方式简单直接，但可能会导致代码难以维护。

在React中：

①Context API：允许在组件树中传递数据，而无需手动逐层传递props，可以在顶层创建一个 ref并通过Context Provider将其提供给整个应用中的任何组件。

②高阶组件（HOC）：这个不常用，但可以通过创建一个高阶组件来包装组件，并在这个HOC内部管理 ref，从而让多个组件共享同一个ref实例。

无论是Vue还是React，选择哪种方式取决于你的具体需求以及项目的架构。如果只是简单的引用共享，使用provide/inject或Context API通常是足够的；如果涉及到更复杂的逻辑，可能需要结合状态管理库（如Vuex或Redux）或其他高级特性来实现。

REACT

1.常用的hooks

• useState:用于在函数组件中添加状态，返回一个状态变量和一个更新该状态的函数，适用于简单的状态管理，如计数器、开关等。

• useContext:用于访问React Context中的值，而不需要通过props层层传递，简化了上下文值的使用，使得跨组件共享数据更加方便。

• useReducer:用于管理复杂的状态逻辑，特别是当状态逻辑涉及多个子值或者下一个状态依赖于前一个状态时，类似于Redux中的reducer，它接受一个reducer函数和初始状态，并返回当前状态和dispatch方法。

• useCallback: 用于缓存函数实例，避免不必要的重新渲染，当函数作为prop传递给子组件时，可以防止因父组件重新渲染而导致子组件不必要的重新渲染。

• useMemo: 用于缓存计算结果，避免重复计算，当需要优化性能，特别是在处理昂贵的计算时非常有用。

• useRef: 用于引用一个可变的值，其变化不会触发组件的重新渲染，常用于保存DOM节点，也可以用来存储任何需要跨渲染保持一致性的信息。

• useLayoutEffect:与 useEffect类似，但在所有DOM变更之后同步调用，适用于需要在浏览器绘制之前进行DOM测量或布局调整的情况。

• useImperativeHandle: 自定义暴露给父组件的实例值， 在使用 forwardRef的高阶组件中使用，允许自定义ref的行为。

• useDebugValue:用于在React DevTools中显示自定义Hook的标签，有助于调试自定义Hook，提供更多的上下文信息。

useState:用于在函数组件中添加状态，返回一个状态变量和一个更新该状态的函数，适用于简单的状态管理，如计数器、开关等。

useContext:用于访问React Context中的值，而不需要通过props层层传递，简化了上下文值的使用，使得跨组件共享数据更加方便。

useReducer:用于管理复杂的状态逻辑，特别是当状态逻辑涉及多个子值或者下一个状态依赖于前一个状态时，类似于Redux中的reducer，它接受一个reducer函数和初始状态，并返回当前状态和dispatch方法。

useCallback: 用于缓存函数实例，避免不必要的重新渲染，当函数作为prop传递给子组件时，可以防止因父组件重新渲染而导致子组件不必要的重新渲染。

useMemo: 用于缓存计算结果，避免重复计算，当需要优化性能，特别是在处理昂贵的计算时非常有用。

useRef: 用于引用一个可变的值，其变化不会触发组件的重新渲染，常用于保存DOM节点，也可以用来存储任何需要跨渲染保持一致性的信息。

useLayoutEffect:与 useEffect类似，但在所有DOM变更之后同步调用，适用于需要在浏览器绘制之前进行DOM测量或布局调整的情况。

useImperativeHandle: 自定义暴露给父组件的实例值， 在使用 forwardRef的高阶组件中使用，允许自定义ref的行为。

useDebugValue:用于在React DevTools中显示自定义Hook的标签，有助于调试自定义Hook，提供更多的上下文信息。

由于我跟面试官说我更熟悉vue，对react不太熟悉，所以对这些hooks没有太过深入的问，但根据其他人的面经，可能会问以下问题：

• useCallback的应用场景 (用 useCallback 包过的函数传递给子组件时，需要用 memo 包一下子组件，不然优化不生效)

• useCallback和useMemo的区别,在什么场景下使用 useMemo，多大的量级需要使用 useMemo

• useEffect和useLayoutEffect的区别，在什么场景下使用useEffect

• useState(传入函数)会怎么样

• setState后可以去到新值吗，他是异步还是同步的

• useReducer、useContext的作用

useCallback的应用场景 (用 useCallback 包过的函数传递给子组件时，需要用 memo 包一下子组件，不然优化不生效)

useCallback和useMemo的区别,在什么场景下使用 useMemo，多大的量级需要使用 useMemo

useEffect和useLayoutEffect的区别，在什么场景下使用useEffect

useState(传入函数)会怎么样

setState后可以去到新值吗，他是异步还是同步的

useReducer、useContext的作用

2.渲染列表时的key

这就要提到diff算法了，在diff算法中会进行新旧vnode的对比从而更新DOM节点，而在新旧vnode的diff过程中，key是判断两个节点是否为同一节点的首要条件，设置key的可以在diff中更快速的找到对应节点，提高diff速度，有key存在时我们可以通过map映射快速定位到对应的oldVnode然后进行patch，没有key值时我们需要遍历这个oldCh数组然后去一一进行比较，相比之下肯定是key存在时diff更高效。

这里会涉及到两个问题：key为什么不能是index？可不可以用随机数做key?

• diff中判断两个节点是否相同首先判断的就是两个节点的key是否相同， 如果用index作为key，index不会随着元素位置的变更而移动，从而导致相同可复用的节点被认为不相同，降低了DOM的复用性，浪费性能。

• 当然不可以用随机数做key，和index的原因是一样的，但比index效率更低下。用随机数的话新旧树的每一个DOM结构都是不同的key，用index,还可能有些DOM结构在新树中index没变，然后得以复用。

diff中判断两个节点是否相同首先判断的就是两个节点的key是否相同， 如果用index作为key，index不会随着元素位置的变更而移动，从而导致相同可复用的节点被认为不相同，降低了DOM的复用性，浪费性能。

当然不可以用随机数做key，和index的原因是一样的，但比index效率更低下。用随机数的话新旧树的每一个DOM结构都是不同的key，用index,还可能有些DOM结构在新树中index没变，然后得以复用。

3.react和vue中的diff算法的相较于之前版本的改进

React 的 Diff 算法改进

早期版本

• 初始实现：React 最初的 diff 算法是基于两个简单的假设：

• 两个不同的组件类型会产生不同的树结构。

• O(n^3) 复杂度：最初的算法在最坏情况下可能达到 O(n^3) 的时间复杂度，这在大型应用中会导致性能问题。

初始实现：React 最初的 diff 算法是基于两个简单的假设：

• 两个不同的组件类型会产生不同的树结构。

两个不同的组件类型会产生不同的树结构。

O(n^3) 复杂度：最初的算法在最坏情况下可能达到 O(n^3) 的时间复杂度，这在大型应用中会导致性能问题。

后续改进

• Fiber 架构：React 16 引入了 Fiber 架构，这是一个重新设计的核心算法，旨在解决之前的性能瓶颈。Fiber 架构使得 React 能够更好地控制渲染过程，支持更细粒度的优先级调度和中断机制。

• 分片和优先级：Fiber 允许 React 将渲染工作分成多个小任务，这些任务可以在浏览器空闲时执行，从而避免阻塞主线程。这种机制使得 React 在处理大型数据集或复杂 UI 时更加流畅。

• 时间切片：通过时间切片技术，React 可以将长时间运行的任务拆分成多个小片段，在每帧之间执行，确保页面保持响应性。

• 并发模式：React 18 引入了并发模式，进一步优化了异步渲染和更新的过程。并发模式允许 React 更好地管理状态更新、渲染和用户输入之间的竞争条件。

Fiber 架构：React 16 引入了 Fiber 架构，这是一个重新设计的核心算法，旨在解决之前的性能瓶颈。Fiber 架构使得 React 能够更好地控制渲染过程，支持更细粒度的优先级调度和中断机制。

分片和优先级：Fiber 允许 React 将渲染工作分成多个小任务，这些任务可以在浏览器空闲时执行，从而避免阻塞主线程。这种机制使得 React 在处理大型数据集或复杂 UI 时更加流畅。

时间切片：通过时间切片技术，React 可以将长时间运行的任务拆分成多个小片段，在每帧之间执行，确保页面保持响应性。

并发模式：React 18 引入了并发模式，进一步优化了异步渲染和更新的过程。并发模式允许 React 更好地管理状态更新、渲染和用户输入之间的竞争条件。

Vue 的 Diff 算法改进

早期版本

• 双端比较：Vue 2 使用了一种双端比较的策略，从列表的两端开始比较节点，找到相同类型的节点后，再递归地比较它们的子节点。这种方法在大多数情况下是高效的，但在某些极端情况下可能会导致性能下降。

• 静态树提升：Vue 2 还实现了静态树提升，即将不会改变的节点标记为静态，从而减少不必要的比较。

双端比较：Vue 2 使用了一种双端比较的策略，从列表的两端开始比较节点，找到相同类型的节点后，再递归地比较它们的子节点。这种方法在大多数情况下是高效的，但在某些极端情况下可能会导致性能下降。

静态树提升：Vue 2 还实现了静态树提升，即将不会改变的节点标记为静态，从而减少不必要的比较。

后续改进

• 静态提升：Vue 3 进一步优化了静态节点的处理，通过静态提升，将静态内容直接渲染到最终的 DOM 中，减少了虚拟 DOM 的开销。

• Patch Flag：Vue 3 引入了 Patch Flag 机制，它是一种编译器优化，通过在模板编译阶段添加标志位来指示哪些部分需要更新。这样，运行时可以跳过不需要更新的部分，从而提高了 diff 算法的效率。

• 块树优化：Vue 3 的编译器还引入了块树的概念，将模板分割成多个块，每个块都是一个独立的子树。这种优化使得 Vue 可以更快地定位到需要更新的部分，而不需要遍历整个虚拟 DOM 树。

• Tree-Shaking 支持：Vue 3 的代码库经过重构，更加模块化，支持 Tree-Shaking，这意味着打包工具可以移除未使用的代码，从而减小最终的包体积。

静态提升：Vue 3 进一步优化了静态节点的处理，通过静态提升，将静态内容直接渲染到最终的 DOM 中，减少了虚拟 DOM 的开销。

Patch Flag：Vue 3 引入了 Patch Flag 机制，它是一种编译器优化，通过在模板编译阶段添加标志位来指示哪些部分需要更新。这样，运行时可以跳过不需要更新的部分，从而提高了 diff 算法的效率。

块树优化：Vue 3 的编译器还引入了块树的概念，将模板分割成多个块，每个块都是一个独立的子树。这种优化使得 Vue 可以更快地定位到需要更新的部分，而不需要遍历整个虚拟 DOM 树。

Tree-Shaking 支持：Vue 3 的代码库经过重构，更加模块化，支持 Tree-Shaking，这意味着打包工具可以移除未使用的代码，从而减小最终的包体积。

4.vue和react的异同

①模板语法:vue 使用类似于 HTML的模板语法，例如: <template>标签中的模板。React 使用 JSX(Java XML),它是一种将 HTML直接嵌入到Java 代码中的语法。它和Java中的xml十分类似

②组件通信:vue中 props(父子组件通信)、emit(子父组件通信)、attrs/slisteners(特性和事件继承)、vuex/Pinia(用于大型应用中的状态管理)等。在 React 中，组件间的通信主要依赖于 props和 context，但对于更复杂的应用，可以使用 Redux 或其他状态管理库。

③生命周期：Vue组件有自己的生命周期钩子，如 created、mounted、updated、destroyed等，用于在组件生命周期的不同阶段执行代码。React 组件也有生命周期方法，如componentDidMount、componentDidUpdate、componentWillUnmount等，但在React 16.3 版本后，一些生命周期方法已被标记为过时，推荐使用新的生命周期方法或 React Hooks。

④diff算法：

• React diff

• React 使用的是一种基于层级的 diff算法。当组件的状态发生变化时，React 会比较当前虚拟 DOM 树和上一次更新后的虚拟 DOM 树的差异。

• React diff 算法会首先比较两棵树的根节点，如果节点类型不同，则直接删除旧节点，插入新节点;如果节点类型相同，则会继续比较子节点。(核心思想是比较和替换节点)

• React diff 算法会使用一些启发式的策略来尽可能地减少 DOM 操作的次数，例如将子节点列表转换为 key-value 的形式，以便更快地找到需要更新的节点。(必须有key)

• Vue 的 diff 算法

• vue 使用的是一种双端比较的 diff 算法。当组件的状态发生变化时，vue 会同时从新旧虚拟 DOM 树的两端开始比较，找到最长的相同子序列。

• vue 会对动态节点进行跟踪，如果一个节点在新旧虚拟 DOM 中位置发生了变化，vue 会尽可能地将其移动到新的位置，而不是删除和重新插入节点。(核心思想是移动复用节点)

• vue 的 dif 算法会通过动态规划的方式找到最优的更新策略，以最小化 DOM 操作的次数。(可以没有key)

React diff

• React 使用的是一种基于层级的 diff算法。当组件的状态发生变化时，React 会比较当前虚拟 DOM 树和上一次更新后的虚拟 DOM 树的差异。

• React diff 算法会首先比较两棵树的根节点，如果节点类型不同，则直接删除旧节点，插入新节点;如果节点类型相同，则会继续比较子节点。(核心思想是比较和替换节点)

• React diff 算法会使用一些启发式的策略来尽可能地减少 DOM 操作的次数，例如将子节点列表转换为 key-value 的形式，以便更快地找到需要更新的节点。(必须有key)

React 使用的是一种基于层级的 diff算法。当组件的状态发生变化时，React 会比较当前虚拟 DOM 树和上一次更新后的虚拟 DOM 树的差异。

React diff 算法会首先比较两棵树的根节点，如果节点类型不同，则直接删除旧节点，插入新节点;如果节点类型相同，则会继续比较子节点。(核心思想是比较和替换节点)

React diff 算法会使用一些启发式的策略来尽可能地减少 DOM 操作的次数，例如将子节点列表转换为 key-value 的形式，以便更快地找到需要更新的节点。(必须有key)

Vue 的 diff 算法

• vue 使用的是一种双端比较的 diff 算法。当组件的状态发生变化时，vue 会同时从新旧虚拟 DOM 树的两端开始比较，找到最长的相同子序列。

• vue 会对动态节点进行跟踪，如果一个节点在新旧虚拟 DOM 中位置发生了变化，vue 会尽可能地将其移动到新的位置，而不是删除和重新插入节点。(核心思想是移动复用节点)

• vue 的 dif 算法会通过动态规划的方式找到最优的更新策略，以最小化 DOM 操作的次数。(可以没有key)

vue 使用的是一种双端比较的 diff 算法。当组件的状态发生变化时，vue 会同时从新旧虚拟 DOM 树的两端开始比较，找到最长的相同子序列。

vue 会对动态节点进行跟踪，如果一个节点在新旧虚拟 DOM 中位置发生了变化，vue 会尽可能地将其移动到新的位置，而不是删除和重新插入节点。(核心思想是移动复用节点)

vue 的 dif 算法会通过动态规划的方式找到最优的更新策略，以最小化 DOM 操作的次数。(可以没有key)

5.不同的监听方式：

早期的vue与React

• vue中进行页面更新主要是通过给每个元素设置事件监听器(Watcher)，在页面发生更改以后，对应的监听器会去更改展示页面，但是大量Watcher会带来的性能损耗

• React在原本的浏览器Dom上创建了虚拟Dom，通过原来的Dom与虚拟Dom进行对比，进行修改，但是Diff算法的计算时间较长

vue中进行页面更新主要是通过给每个元素设置事件监听器(Watcher)，在页面发生更改以后，对应的监听器会去更改展示页面，但是大量Watcher会带来的性能损耗

React在原本的浏览器Dom上创建了虚拟Dom，通过原来的Dom与虚拟Dom进行对比，进行修改，但是Diff算法的计算时间较长

不同的解决方式

• vue借鉴了React的监听方式，形成了组件内部元素(diff算法计算)+组件之间(Watcher监听)的方式进行监听，降低了Watcher的数量，也减少了diff大量计算带来的卡顿问题。

• React则使用了时间分片(允许多个任务轮流使用处理器)的思想，在使用diff算法检查页面更改的过程中，分片进行使用浏览器，在浏览器的空闲时间计算Diff, 如果浏览器有高级的需求则让浏览器继续使用进行渲染。

vue借鉴了React的监听方式，形成了组件内部元素(diff算法计算)+组件之间(Watcher监听)的方式进行监听，降低了Watcher的数量，也减少了diff大量计算带来的卡顿问题。

React则使用了时间分片(允许多个任务轮流使用处理器)的思想，在使用diff算法检查页面更改的过程中，分片进行使用浏览器，在浏览器的空闲时间计算Diff, 如果浏览器有高级的需求则让浏览器继续使用进行渲染。

6.MVVM框架特征

• 双向数据绑定：它允许数据在 Model和View之间自动同步，无需手动编写大量的DOM操作代码。当Model中的数据发生变化时，View会自动更新以反映这些变化，当用户在View中进行输入或交互时，数据会自动更新到Model中。

• 分离关注点： MVVM模式通过将应用程序分为Model、View和ViewModel三个部分，实现了清晰的关注点分离。Model负责数据管理和业务逻辑，独立于UI，通常包含数据访问和业务规则。View负责展示数据和接收用户输入，通常是纯HTML/CSS，不包含任何业务逻辑。ViewModel作为Model和View之间的桥梁，封装了View的状态和行为，并提供属性和命令供View使用。

双向数据绑定：它允许数据在 Model和View之间自动同步，无需手动编写大量的DOM操作代码。当Model中的数据发生变化时，View会自动更新以反映这些变化，当用户在View中进行输入或交互时，数据会自动更新到Model中。

分离关注点： MVVM模式通过将应用程序分为Model、View和ViewModel三个部分，实现了清晰的关注点分离。Model负责数据管理和业务逻辑，独立于UI，通常包含数据访问和业务规则。View负责展示数据和接收用户输入，通常是纯HTML/CSS，不包含任何业务逻辑。ViewModel作为Model和View之间的桥梁，封装了View的状态和行为，并提供属性和命令供View使用。

其他问题为什么vite会更快

Vite 相比于 Webpack 之所以构建快是因为，Vite 借助新版本浏览器可以读懂模块化语法的特点，将项目中的模块化引入统一以一个又一个http请求的方式响应给浏览器，这样做的好处就是省去了 Webpack 构建过程中递归做依赖收集的耗时步骤，又因为Vite是开发环境的工具，绝大多数情况下我们不用不考虑兼容性。（具体可以查看这篇文章面试官：”Vite为什么快？“）

剩下的是一些面试官围绕个人简历上的技术栈和回答情况进行的一些题问，友友们可以参考一下，没有固定答案，根据自身情况回答

• 介绍一下对AI的了解

• 大模型和深度学习神经网络有什么区别和联系

• 通过什么来训练大模型，为什么要训练大模型

• 介绍下低代码

• node.js用过什么框架

• 介绍一下koa的使用

介绍一下对AI的了解

大模型和深度学习神经网络有什么区别和联系

通过什么来训练大模型，为什么要训练大模型

介绍下低代码

node.js用过什么框架

介绍一下koa的使用

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

感谢 · 转发欢迎大家留言