在 vue3 中， computed 计算属性性能问题

[jahnsli]

在下面的例子中，使用 vue3 的计算属性，我们应该将“computed”放在最外层还是单独对数据进行“computed”？哪个表现更好？

const arr = computed(()=>[
  {options:cpuData.map((item)=>({...item,name:'tom'}))},
  {options:disData.map((item)=>({...item,name:'jerry'}))},
  {options:memoryData.map((item)=>({...item,name:'oh'}))},
  {options:testData.map((item)=>({...item,name:'test'}))},
  {options:[{name:'test'},{name:'test2'}]},
  {options:[{name:'test'},{name:'test2'}]},
  {options:[{name:'test'},{name:'test2'}]},
  {options:[{name:'test'},{name:'test2'}]},
])

const arr = [
  {options:computed(()=>cpuData.map((item)=>({...item,name:'tom'}))),
  {options:computed(()=>disData.map((item)=>({...item,name:'tom'}))),
  {options:computed(()=>memoryData.map((item)=>({...item,name:'tom'}))),
  {options:computed(()=>testData.map((item)=>({...item,name:'tom'}))),
  {options:[{name:'test'},{name:'test2'}]},
  {options:[{name:'test'},{name:'test2'}]},
  {options:[{name:'test'},{name:'test2'}]},
  {options:[{name:'test'},{name:'test2'}]},
]

[Finnn]

@mizuhashi 我认为你理解的深度并不是 vue 概念上的 watch 意义的深度，watch 的深度是自动响应引用类型内部所有值的变化的，computed 首先是惰性的，然后是只响应回调函数内所有声明监控的基本类型的变化， 就像 watch/computed：“author.books[3].length” 一样直达某个对象内部的一个基本类型的变化，这不是 vue 意义上的深度

[mizuhashi]

@Finnn 我大概理解你說的了，你的深度的意思是當內容改變的時候總是會觸發副作用（ computed 函數體），從這個定義來說的話 computed 並不是深度的。不過 computed 應該本身不是設計來觸發副作用的，只要它返回的 ref 可以保證響應到正確的數據就行，你最新的例子裏 publishedBooksMessage 也響應到正確的數據了，所以我覺得如果 OP 的 computed 裏面沒有副作用，那麼這個函數會不會重新運行應該是無所謂的

[Finnn]

@mizuhashi 是的, 我在 #8 说明了, 因为 OP 的计算值返回的是新构造的数据结构, 不存在监控不到要 map 的数组, 当然这个数组变化的项目也必须是基本类型
computed 不产生也不应该产生副作用