面试知识梳理

一、vue篇章

1.vue2和vue3性能方面的提升最主要的原因是什么？

1、1响应式的系统优化：
vue3使用了es6的proxy对象来实现响应式系统，取代了vue2中基于Object.defineProperty的方法。Proxy提供了更强大和灵活的拦截能力，可以更有效地追踪数据变化，并且能够处理数组和对象的变化侦测问题，而不需要深度遍历整个对象树。
1、2编译器优化：
Vue 3 引入了静态树提升（Static Tree Hoisting）技术，它可以在编译阶段识别出哪些节点是静态的，从而在渲染时直接复用这些节点，避免了不必要的创建和销毁。
Vue 3 的模板编译器也进行了升级，生成的代码更加高效，减少了运行时的开销。
1、3Diff算法优化：
Vue 3 通过引入PatchFlag标记，只对带有PatchFlag的动态节点进行对比，而不是像Vue 2那样全量比较虚拟DOM树。这样可以减少不必要的DOM更新操作，提高渲染效率。
1、4事件绑定缓存：
Vue 3 可以缓存事件处理器，如果发现是相同的函数，则可以直接复用，而不是每次都重新绑定，从而节省了内存和CPU资源。
1、5Composition API：
Composition API 不仅提高了代码的组织性和可读性，还允许开发者更好地控制依赖关系，进而可能带来更好的性能优化空间。
1、6服务器端渲染（SSR）改进：
在处理大量静态内容时，Vue 3 的SSR机制可以将这些内容直接作为纯字符串输出到缓冲区，甚至使用内联HTML来代替创建虚拟DOM节点，这对于大规模静态内容的应用来说，可以极大地提高渲染速度。

2.说一下vue 原型和原型链

在JavaScript中，每个对象都有一个内部属性[[Prototype]]，通常可以通过__proto__属性访问到（虽然这不是标准属性，但被大多数浏览器支持）。这个[[Prototype]]指向另一个对象，称为原型。当试图访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript引擎会沿着原型链向上查找，直到找到该属性或到达原型链的末端（即null）。
Vue 原型
Vue.prototype：这是所有Vue实例共享的原型对象。当你创建一个新的Vue实例时，这个实例将继承Vue.prototype上的所有属性和方法。这意味着你可以在Vue.prototype上添加方法或属性，然后这些方法或属性就可以被所有的Vue实例所使用。
Vue 原型链
Vue 实例的原型链：当你创建一个Vue实例时，它的原型是Vue.prototype。而Vue.prototype本身也是一个对象，它也有自己的原型，最终追溯到Object.prototype，形成了一个原型链。
Vue实例.proto 指向 Vue.prototype
Vue.prototype.proto 指向 Object.prototype
Object.prototype.proto 是 null，表示原型链的终点
VueComponent 原型链：组件也是Vue实例的一种，但是它们有一个特殊的构造函数VueComponent。VueComponent的原型继承自Vue的原型，因此组件实例能够访问到Vue.prototype上的属性和方法。
VueComponent实例.proto 指向 VueComponent.prototype
VueComponent.prototype.proto 指向 Vue.prototype
Vue.prototype.proto 指向 Object.prototype
Object.prototype.proto 是 null

3.说一下Promise假如在处理问题的过程中，中间的一个突然出现问题了，还会往下走吗？

在使用 Promise 处理异步操作时，如果链中的某个 Promise 被拒绝（即调用了 reject 或者发生了错误），那么默认情况下，这个错误会传递给链中的下一个 .catch 方法。如果没有 .catch 方法来处理这个错误，那么整个 Promise 链就会终止，并且错误会被抛出，不会继续执行后续的 .then 回调。
因此，当 Promise 链中的一个环节出现错误时，除非有适当的错误处理机制（比如通过 .catch），否则链条将不会继续执行后续的操作。如果有适当的错误处理，并且在处理函数中返回了值或 Promise，那么链条可以在处理完错误后继续执行。

二、js篇章

1.说一下event loop

console.log(‘Script start’);

setTimeout(() => {
console.log(‘setTimeout’);
}, 0);

Promise.resolve().then(() => {
console.log(‘Promise 1’);
}).then(() => {
console.log(‘Promise 2’);
});

console.log(‘Script end’);
在这个例子中，输出顺序将是：

深色版本
Script start
Script end
Promise 1
Promise 2
setTimeout
解释：

“Script start” 和 “Script end” 是同步代码，直接执行。
setTimeout 被安排为一个宏任务，即使延迟时间为 0，也会等到当前调用栈清空并且所有微任务完成后才被执行。
Promise.resolve().then() 创建了两个微任务，这两个微任务会在当前宏任务结束前立即执行。
总结：先同步 然后是 微任务 最后是宏任务

三、React 篇章

1.useState和 useReduce的区别

useState
用途：useState 是最基础的状态管理 Hook，适用于简单的状态逻辑。
使用方法：通过调用 useState，你可以定义一个 state 变量，并返回一个包含当前状态值和更新该状态值的方法（setter）的数组。
适用场景：当你的状态逻辑比较简单，只涉及直接设置新值时，useState 就足够了
useReducer
用途：useReducer 更适合处理复杂的、多步骤的状态逻辑，尤其是当状态依赖于前一个状态或者需要触发多个子状态更新时。
使用方法：useReducer 接受一个 reducer 函数和初始状态作为参数。reducer 函数会根据不同的 action 来决定如何更新状态。
适用场景：当应用状态逻辑比较复杂，涉及到多种事件类型和状态变化时，使用 useReducer 可以使代码更清晰、更具可维护性。它也是实现“状态机”模式的好方法，可以用来替代多个 useState 调用。
总结
useState 适用于简单且独立的状态变更。
useReducer 适用于更复杂的状态逻辑，特别是当状态更新涉及多个子属性或需要基于前一状态进行计算时。此外，useReducer 还有利于将状态更新逻辑集中在一个地方，便于管理和测试。

2.react 虚拟dom的特点和你认为的缺点

虚拟 DOM 的特点
高效的更新：
当组件的状态发生变化时，React 会先在内存中构建一个新版本的虚拟 DOM。
然后，React 通过比较新旧两个虚拟 DOM 的差异（Diffing 算法），计算出最小的一组变更操作（称为 Reconciliation）。
最后，React 将这些变更应用到真实 DOM 上，从而减少了直接操作真实 DOM 的次数，提升了渲染性能。
跨平台兼容性：
由于虚拟 DOM 是一个抽象层，它可以在不同平台上实现，比如浏览器中的 HTML DOM 或者移动设备上的原生 UI 组件（如 React Native）。
这使得开发者可以使用相同的代码库来构建跨平台的应用程序。
声明式编程模型：
虚拟 DOM 让开发者能够以声明式的方式编写 UI 代码，描述 UI 应该是什么样子，而不是如何改变它。
这种方式简化了状态管理和副作用处理，使得代码更加清晰易懂。
更好的开发体验：
由于虚拟 DOM 在内存中进行操作，因此可以在不刷新整个页面的情况下快速更新 UI。
此外，React DevTools 可以利用虚拟 DOM 来提供更强大的调试功能，帮助开发者更好地理解组件树和状态变化。
虚拟 DOM 的潜在缺点
额外的内存消耗：
虽然虚拟 DOM 比真实的 DOM 更小，但维护一个完整的虚拟 DOM 树仍然需要占用一定的内存空间。
对于非常大的应用程序来说，这可能会成为一个问题，特别是在低内存设备上运行时。
初次渲染开销：
第一次渲染时，React 需要创建整个虚拟 DOM 树，这比直接操作真实 DOM 可能会慢一些。
不过，随着后续更新时 Diffing 和 Patching 的高效，这种初始开销通常会被后续的性能提升所抵消。
复杂性的增加：
虚拟 DOM 引入了一层额外的抽象，对于初学者来说，可能需要更多时间去理解和掌握。
同时，Diffing 算法虽然已经很优化，但在某些特定情况下（例如大量节点被重新排序），它可能不如开发者手动优化那么高效。
过度优化的风险：
开发者有时会过于关注虚拟 DOM 的性能优化，而忽视了其他重要的方面，比如代码可读性和维护性。
有时候简单的 key 属性设置不当或者不必要的重绘可能会导致性能问题，需要开发者有一定的经验才能避免这些问题。