石家庄市住房和城乡建设局官方网站,深圳建网站好的公司,五金 东莞网站建设,成品软件网站大全推荐一、vue篇章 1.vue2和vue3性能方面的提升最主要的原因是什么#xff1f; 1、1响应式的系统优化#xff1a; vue3使用了es6的proxy对象来实现响应式系统#xff0c;取代了vue2中基于Object.defineProperty的方法。Proxy提供了更强大和灵活的拦截能力#xff0c;可以更有效地…一、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 属性设置不当或者不必要的重绘可能会导致性能问题需要开发者有一定的经验才能避免这些问题。
