在 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'}]},
]

[vivipure]

直觉第二种，但是写还是写第一种，没啥必要。

[wu67]

// 我一般这么写
const temp = 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' })) },
])

const constantData = [
{ options: [{ name: 'test' }, { name: 'test2' }] },
{ options: [{ name: 'test' }, { name: 'test2' }] },
{ options: [{ name: 'test' }, { name: 'test2' }] },
{ options: [{ name: 'test' }, { name: 'test2' }] },
]

const result = computed(() => {
return temp.concat(constantData)
})

[wu67]

一般情况下, 纯展示的页面, 前端不需要考虑性能问题.

但是当你的数据量到达某种程度之后, 就需要考虑空间换时间了, 例如:
1. 你的一维数组的行数到达了千量级, 动不动就是几千行的数据
2. 你的数据需要对 2 维数组进行处理, 例如 2~6 千行, 每行里面还有 3 4 百列的
3. 3 维或者更复杂的玩意...

到了这种地步之后才需要考虑是否需要优化. 可能实际情况会有所不同, 不能纯纯的靠空间换时间, 因为可能占用内存过高, 浏览器本身卡了, 不是数据便利的卡...

[zcf0508]

一，第二种的 arr 不是响应式的
二，如果你不需要 arr 变更触发响应式的话，那第二种只会在读取 computed 的 index 才会触发响应式，其他的不会触发响应式，理论上性能更好
三，就这几行数据应该不会有什么性能的差别

[Finnn]

其实你第一种应该是无效的？
因为 computed 并不能自动深度响应对象内部值的变化

[chenjiangui998]

@Finnn computed 默认就是深度响应的

[xintianyou]

@Finnn 你记错了吧，vue2 的 watch 才是默认不会深度响应

[Finnn]

@xintianyou 只是题主的 computed 返回的数据结构是新构建的, 不存在监听已有引用类型, 如果 computed 一个对象内部的变化自然是不行的

[Finnn]

@chenjiangui998 当然不是
https://sfc.vuejs.org/#eNp9Uk1r5DAM/SvCl6QwkwzdPYWZQMvCfkBvy7Kw3oMn0UzSJrax7JQS8t8rZzJt6dfN0pOenvQ8iitrsyGgKMSWKtdaD4Q+2FLqtrfGeRjBoap8O+AKKtPb4LGGCQ7O9JBwZyK11JXR5EEF3xgHu6eOdJQaQKseC0h+mUbDN4PJKib3xtxRAf/iGyD5ExAuYQ1X9aB0xRO+h7ZeShf4C8PXitrqHewrY78bhJsH8ugeWBPAf6mnC6nzHNSzcIeHs1ob9l1LDdbXUcoNEqkjsvhzbZpewK6EeYXYYTrMOnNMpThXSMH8EXZ8MqeX/bN5tdNwvuVPzYoG1THdrpzJXpZlNlCTzjv8TbhhWl1uNht+bPOTHWwEBx572ymPHAFsbflD0bP+5ZbbPLrGMFmly3H8YMFpYupYEWc88YqVOPm97pXNbslo/hGzWrkAJEVxOkbMsfExlqLx3lKR53So4j+6pcy4Y86vzAXt2x4zpH69d+ae0DGxFItvM0fOyQHd2qGu0aH7jPNV6RveSDvxBcX0CFEz+H0=

[chenjiangui998]

@Finnn 你这个例子不正说明了 computed 是深度响应的吗, 如果不是, push 对象界面根本不会响应

[chenjiangui998]

@Finnn 而且直接 return author.books.map(() => '1'), log 也会多次执行

[Finnn]

@chenjiangui998 你可以打开控制台呢, 看看 computed 了没有

[Finnn]

@chenjiangui998 你这例子可差远了, 完全不是一个概念

[mizuhashi]

@Finnn https://sfc.vuejs.org/#eNp9Uttq3DAQ/ZVBL3Zg117SPpldQ0KhF8hbKYWqD1p7du3UloRGcgnG/96R7U1obm9zPXPmzIzixtpsCCgKsafKtdYDoQ+2lLrtrXEeRnCoKt8OuIHK9DZ4rGGCkzM9JNyZSC11ZTR5UME3xsHhsSMdpQbQqscCkm+m0fDJYLKJwaMxf6iAX9EGSH4EhGvYwk09KF3xhM+hrdfSNf2B07eK2uqV3EfOfW8Q7h7Io3tgTgC/pZ6upM5zUE/EHZ4ubG04di01WN9GKndIpM7I5C+1aXoFhxLmFWKH6TDrzDmV4lIhBeNLv6ydzRtlHeqzb2KPYx2dXkXJoggLIdb3q2aWg+p4xKGcB/yHYQM16bzXz4Qbps31brdjY58vJ+LjsOOxt53yyB7A3pZfFD3ttOq7z+MlOU1W6XIc31h6mhg6VsQZj7hiI5Yf2PbKZvdkNH/JzFauCZKiWASKMX6G6EvReG+pyHM6VfG37ikz7pyzlbmgfdtjhtRvj878JXQMLMV6yxkj5+CAbutQ1+jQvYf5rPQFboSdWEEx/QNvUQBu

我覺得這個例子可以，直接 return author.books 不會重復執行衹是因為 return 的是 computed 中唯一用到的依賴，所以可以省略計算的過程，如果不是唯一的，那麼 computed 還是會執行

[Finnn]

@mizuhashi computed 并不会勤快到自动响应引用类型内部的未观察属性的变化, 既不合理也没有意义

[mizuhashi]

@Finnn 我覺得這個說法不對，computed 會觀察所有「用到的」的屬性，但本身不一定會總是重復運行，在保證返回結果正確的情況下。你的例子裏沒有重復執行，但是返回的結果是正確的，我的例子裏如果不重復執行就不能確定結果正確，所以就重復執行了

[Finnn]

@mizuhashi 因为你监控了 books.length, 一个变化的基本类型, 上面 return author.books.map(() => '1') 的同样是监控了 books 的每一个值的变化

[Finnn]

@mizuhashi 你这说法更不对,怎么会不能确定结果的正确性.
computed 之所以响应是因为其回调内部的所有监控值变化了才会执行, 直接响应一个对象自然是不会深度检查内部的各个值的变化的

[mizuhashi]

@Finnn 「深度檢查內部各個值」的具體標準是什麼？如果引用了.length ，那麼 books 的元素變化會導致 length 變化，所以 computed 也重復執行了，這在我看來應該算深度檢查了內部值的。如果只是引用了.books ，這個 computed 關心的就僅僅是 books 返回的數組的引用，由於這個引用沒變，所以 computed 不會重新執行。

如果要證明「 computed 不會監視深度的數組內容變化」，那麼應該構造這麼一個 computed ，其監視了並使用了數組的內容，但是當數組改變的時候，這個 computed 沒有觸發。如果只是.books ，並沒有使用數組的內容，而使用了數組內容的例子（如.books.length ），computed 是有重新觸發的，所以還需要一個有效的反例才能證明原命題。

[Finnn]

@mizuhashi

1 ， 我没有说「 computed 不會監視深度的數組內容變化」，是 computed 不会自动深度搜集未监控的引用的内部属性变化，

2 ， “那麼應該構造這麼一個 computed ，其監視了並使用了數組的內容，但是當數組改變的時候，這個 computed 沒有觸發。” 很简单，只需要我修改的数组项是引用类型就行了 ： https://sfc.vuejs.org/#eNp9Uk1v2zAM/SuELnaBxA7anYzEQIsB+wB6G4YBUQ+KzcTubEkQJQ+F4f8+ynbaYV8XW+QjH/lIjuLe2mwIKAqxp8q11gOhD7aUuu2tcR5GcKgq3w64gcr0NnisYYKzMz0knJlILXVlNHlQwTfGweE1Ix2lBtCqxwKSz6bR8N5gsonOkzHfqYBjfAMkXwPCLWzhvh6UrrjCh9DWa+gK3zH8oKit/oK9Y+xLg/D4Qh7dyxU7PsU/f6YbqfMc1JsCh+dr2zacupYarB9iT49IpC7IKq6xaXoDhxJmLTHDdJh15pJKcY2QgvmlX/Rns7SsQ33xTcxxPFCn1+ks6NIRT/qT5n4H1XGNQzlX+DXsePeU2UBNOov8lnDOtLnd7Xb82OfLvnhTbHjsbac8sgWwt+VHRW+61mHv87hWhskqXY7jP4RPE1PHiFjjlVdsxHIQ217Z7JmM5pOZG5YrQFIUy5Cijy8j2lI03lsq8pzOVTy0Z8qMu+T8ylzQvu0xQ+q3J2d+EDomlmJd3syRs3NAt3Woa3To/sf5W+gfvJF24gmK6SeJHwQE

[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 不产生也不应该产生副作用