在下面的例子中，使用vue3的computed属性，我们应该把“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'}]},
]
1条答案
按热度按时间bfrts1fy1#
第二种方法的性能应该更高。
让我们假设
cpuData中发生了一些变化1.在第一种情况下，它将触发整个computed属性重新计算，这意味着
disData.map、memoryData.map和testData.map将被再次执行，即使那里什么都没有改变。1.在第二种情况下，只会重新计算第一个计算的属性（包含
cpuData.map），移除这些不必要的额外计算。此外，还有一些其他原因选择第二种方法，如Vue风格指南中所述