Vue3中computed外层包裹与单独处理数据哪种性能更优？

先看你给出的两种实现：

• 外层单computed包裹：整个数组通过一个computed生成，所有options的转换逻辑都在这个computed回调里
• 单个options独立computed：只有依赖响应式数据的options单独用computed包裹，静态数据直接定义

性能表现对比 #

第一种写法（外层computed） #

只要cpuData/disData/memoryData/testData中任意一个发生变化，整个computed函数会重新执行一遍：所有的map操作都会重新跑，哪怕是那些静态的options（比如最后四个固定数组）也会被重新生成一遍。这会导致依赖这个arr的组件或视图整体更新，哪怕只是其中一个options的数据变了。

第二种写法（单个computed） #

每个依赖响应式数据的options是独立的computed，只有当它依赖的数据源（比如cpuData）变化时，对应的computed才会重新计算。其他的computed和静态options完全不受影响，视图也只会更新变化的那一部分，更新粒度更细，性能损耗更小。

怎么选？ #

• 优先选单个options独立computed的写法：这种方式更符合Vue的响应式优化逻辑，能避免不必要的重复计算和视图更新，性能表现更出色。
• 只有当数组中的所有元素需要同步更新，或者所有options的生成逻辑高度耦合时，才考虑用外层单个computed的写法。

另外要注意：第二种写法里，脚本中访问computed的值需要加.value（模板中会自动解包），这一点要留意。

内容的提问来源于stack exchange，提问作者laterday