百度网盟推广网站,猎头公司收费,一键制作单页网站,招聘58同城招人文章目录 响应式系统优化静态树提升diff算法优化Tree Shaking优化Composition API事件缓存机制 响应式系统优化
Vue双向绑定原理
Proxy 相较于 Object.defineProperty 在性能上的优势主要体现在以下几个方面#xff1a; 属性检测的全面覆盖#xff1a; Object.defineProper… 文章目录 响应式系统优化静态树提升diff算法优化Tree Shaking优化Composition API事件缓存机制 响应式系统优化
Vue双向绑定原理
Proxy 相较于 Object.defineProperty 在性能上的优势主要体现在以下几个方面 属性检测的全面覆盖 Object.defineProperty 只能针对对象已有的属性进行劫持对于对象属性的添加或删除无法做到监听。 而 Proxy 则可以代理整个对象无论是属性的读取、赋值还是添加新属性、删除属性甚至是监听数组的变化等Proxy 都可以做到。 因此Proxy 提供了更全面的属性检测覆盖减少了开发者需要手动处理特殊情况的代码量。
. 减少性能开销 由于 Object.defineProperty 是针对每个属性进行劫持的因此当对象属性较多时会导致大量的性能开销。 vue2无法知道代码运行时具体会访问哪个属性所以在初始化这个对象的时候vue2只能采取递归遍历的方式把对象的每一层每一个属性都变成响应式这就会影响页面的初始化渲染速度 而 Proxy 是对整个对象进行代理无需对每个属性进行单独处理从而减少了性能开销。 对于多层嵌套的对象由于proxy只能代理一层所以vue3在真正访问到对象属性的时候才去判断递归而不是在初始化的时候就一股脑的递归。 . 更好的扩展性 Proxy 是 ECMAScript 6 (ES6) 引入的新特性相较于 Object.defineProperty 有着更好的扩展性和未来兼容性。 随着 JavaScript 语言的不断发展和完善Proxy 可能会得到更多的优化和改进从而进一步提升性能。 . 更高的灵活性 Proxy 是直接代理整个对象。这意味着 Proxy 可以更加灵活地处理对象的各种操作而不仅仅局限于属性的读写。 这种灵活性使得 Proxy 在处理复杂逻辑或特殊需求时更加得心应手。 静态树提升
静态树提升Static Tree Hoisting可以在编译阶段识别并提取出不会改变的静态节点从而避免在每次渲染时重复计算这些节点提高了组件的渲染性能通过减少不必要的计算和DOM操作来加快页面的加载和更新速度。 在Vue2的编译中有一个optimize过程会对一些不会变化的DOM做静态标记。 一旦一个节点被标记为静态根节点Vue就会生成一个staticRenderFns数组来缓存这些静态节点的渲染函数。 这意味着在每次组件的渲染过程中Vue可以直接调用这些缓存的渲染函数来生成静态节点的VNode而不是每次都重新计算。 此外静态节点生成的VNode会带有isStatic: true的属性。在Vue的虚拟DOM diff算法中会跳过对带有isStatic: true属性的VNode这些节点的比较和更新因为它们是静态的不会改变。这进一步减少了不必要的DOM操作和比较提高了渲染性能。 在Vue 3中静态树提升不仅仅是对单个静态节点进行优化而是将整个静态子树即一组嵌套的静态节点提升到父组件的渲染过程中。这意味着在每次父组件重新渲染时这个静态子树都会被直接复用而不需要重新计算和创建。
通过这种方式静态树提升能够显著减少渲染函数的复杂性降低不必要的运行时开销从而提高应用的性能和响应速度。尤其是在处理包含大量静态内容的组件时静态树提升的效果尤为显著。 diff算法优化
Vue中的diff算法 静态标记与缓存 Vue 3在编译阶段会对静态节点进行标记并在渲染过程中缓存这些静态节点。 这意味着在后续的更新中Vue可以直接跳过这些静态节点的比较和渲染从而减少了不必要的计算和DOM操作。 这种优化在大型应用中尤为显著可以显著提高渲染性能。 动态节点的优化 除了静态节点Vue 3还对动态节点进行了优化。 通过标记动态节点Vue 3能够只对需要更新的节点进行比较和渲染进一步提高了渲染性能。 这种优化对于频繁更新或具有大量动态内容的组件尤为有效。 事件代理与静态事件优化 Vue 3的diff算法还针对事件监听器进行了优化。 它采用了事件代理的方式减少了事件监听器的数量提高了性能。 此外对于静态事件Vue 3的diff算法会跳过不必要的比较和更新只有在事件确实发生变化时才会触发组件的更新。 最长递增子序列 Vue 3的diff算法采用了最长递增子序列Longest Increasing SubsequenceLIS算法来找出最小的修改偏移量优化节点移动时的操作进一步减少了不必要的节点比较和更新操作提高渲染性能。 LIS算法在diff过程中可以确定最少需要移动哪些节点来达到新的顺序从而避免了不必要的节点重排。 Tree Shaking优化
Vue 3 提供了更好的 Tree Shaking 支持可以消除代码中未使用的部分减少了不必要的代码和模块减少打包体积从而降低了应用程序的加载时间和运行时的内存占用。 Vue 3通过静态树提升技术能够在编译阶段就识别并移除模板中的静态部分这意味着这些静态部分在最终的打包结果中不会占用任何空间。而Vue 2中由于无法有效识别和处理静态内容即使它们不会被使用也会包含在最终的打包文件中从而增加了体积。 Vue 3的源代码被重写为使用ES Modules格式这使得Vue 3能够天然地支持Tree Shaking。ES Modules格式允许开发者将代码拆分成更小的、可复用的模块并且只有在这些模块被实际使用时才会被打包进最终的代码中。 Composition API
Vue3引入了Composition API允许开发者将组件的逻辑分割成更小的、可复用的函数。这种模块化的设计使得代码更加清晰、易于维护并且提高了组件的复用性进一步提升了性能。
通过引入 Composition API开发者可以更好地组织和复用逻辑代码提高了代码的可维护性和可读性。
同时Vue 3 还支持更多的特性如片段Fragments、Teleport传送门和 Suspense异步组件的悬挂状态等进一步丰富了组件的功能和用法。 事件缓存机制
Vue 3 引入了事件缓存机制当事件被多次触发时不会每次都执行事件处理函数而是使用缓存的结果从而减少了不必要的计算和处理时间提高了应用程序的性能。 在 Vue 2.x 中当绑定 DOM 事件如 click时这些事件被视为动态变量。 因此每次视图更新时Vue 都会追踪这些事件的变化并在每次触发时重新生成新的函数。 这种机制在事件处理上可能产生不必要的开销。 在 Vue 3 中通过引入事件缓存对象 cacheHandlers这种机制得到了改进。 当 cacheHandlers 开启时click 等绑定的事件会被标记为静态节点并放入 cacheHandlers 中。这样在视图更新时Vue 不会追踪这些静态事件的变化。 当事件再次触发时Vue 可以直接调用缓存的事件回调方法而无需重新生成函数。
