vueConf 2024：揭秘vue3.5响应式系统神秘新优化

写在前面

本人荣幸参加了VueConf 2024，下午最后一场尤大专场一晃而过的响应式优化，想必大家都很好奇这点？（不好奇你点进来干嘛！）

关于-56%内存占用和遍历操作十倍性能提升怎么做到的，下文将会简单讲明。

#10407 -56%内存占用

很复杂还没看懂）

#9511大数组遍历操作10倍性能提升

引：

• 在 Vue 中，数组被包装在一个响应式代理后面，即reactive(array)，该代理会捕获对每个数组索引的每个读/写操作。
• 然而，有时候数组作为列表实际上会很大，非常大，大得离谱，内含几千几万元素的数组都是常见的。
• 通过下标访问数组的在现代JavaScript引擎中是非常快的
• 但如果你访问一个reactive(array),会经过代理，依赖追踪，创建某些额外的依赖数据结构产生不必要的开销

我们可以用一个图来表达遍历一个reactive(array)的过程

首先遍历数组这个操作是O(n)的，其次因为经过代理层再去追踪依赖会遇到很多不必要的开销，这是值得优化的。

那么我们是否可以跳过代理层并把复杂度降为O(1)?

其实，这是可能的！让我们来仔细分析用户意图...

通常，渲染列表视图意味着要遍历(v-for)整个列表，那么我们能不能在渲染列表（遍历数组）时，直接依赖追踪数组本身？如此这般，我们的图谱将会变为

举个源码中的🌰：

当然我们跳过了对数组的代理层，对数组深度追踪的能力依然不会消失的，源码中的toReative那里就是证明。