包阅导读总结
1.
关键词：VueConf 2024、vue3.5、响应式优化、内存占用、性能提升
2.
总结：作者参加 VueConf 2024 后介绍了 vue3.5 响应式系统的优化，包括降低内存占用和提升大数组遍历操作性能，探讨了跳过代理层追踪数组以优化的可能性。
3.
主要内容：
– VueConf 2024 下午尤大专场提到响应式优化
– 数组在 Vue 中被包装在响应式代理后面
– 大数组常见，通过下标访问经过代理有不必要开销
– 优化探讨
– 遍历数组操作是 O(n)，代理层和依赖追踪有可优化空间
– 思考能否跳过代理层将复杂度降为 O(1)
– 渲染列表时直接依赖追踪数组本身
– 跳过代理层，数组深度追踪能力仍存在，源码中有证明
思维导图：
文章地址：https://juejin.cn/post/7388281982985748515
文章来源：juejin.cn
作者：某时橙
发布时间：2024/7/7 7:24
语言：中文
总字数：599字
预计阅读时间：3分钟
评分：89分
标签：Vue 3.5,响应式系统,性能优化,内存管理,数组遍历
以下为原文内容
本内容来源于用户推荐转载，旨在分享知识与观点，如有侵权请联系删除 联系邮箱 media@ilingban.com
写在前面
本人荣幸参加了VueConf 2024，下午最后一场尤大专场一晃而过的响应式优化，想必大家都很好奇这点？（不好奇你点进来干嘛！）
关于-56%内存占用和遍历操作十倍性能提升怎么做到的，下文将会简单讲明。
很复杂还没看懂）
#9511大数组遍历操作10倍性能提升
引：
- 在 Vue 中，数组被包装在一个响应式代理后面，即reactive(array)，该代理会捕获对每个数组索引的每个读/写操作。
- 然而，有时候数组作为列表实际上会很大，非常大，大得离谱，内含几千几万元素的数组都是常见的。
- 通过下标访问数组的在现代JavaScript引擎中是非常快的
- 但如果你访问一个reactive(array),会经过代理，依赖追踪，创建某些额外的依赖数据结构产生不必要的开销
我们可以用一个图来表达遍历一个reactive(array)的过程
首先遍历数组这个操作是O(n)的，其次因为经过代理层再去追踪依赖会遇到很多不必要的开销，这是值得优化的。
那么我们是否可以跳过代理层并把复杂度降为O(1)?
其实，这是可能的！让我们来仔细分析用户意图…
通常，渲染列表视图意味着要遍历(v-for)整个列表，那么我们能不能在渲染列表（遍历数组）时，直接依赖追踪数组本身？如此这般，我们的图谱将会变为
举个源码中的🌰：
当然我们跳过了对数组的代理层，对数组深度追踪的能力依然不会消失的，源码中的toReative那里就是证明。
