提前处理v-for
循环所用的数据,不要在v-for
循环中去读取数组、对象类型的数据。在上述template模板中滥用this的例子中可以这样优化。
假设list
、arr
、obj
皆是服务端返回来的数据,且arr
和obj
没有用到任何模块渲染中,可以这样优化
优化前:
<template>
<div class="wrap">
<div v-for=item in list>
<div> {{ arr[item.index]['name'] }} </div>
<div> {{ obj[item.id]['age'] }} </div>
</div>
</div>
</template>
优化后:
<template>
<div class="wrap">
<div v-for=item in listData>
<div{{item.name}} </div>
<div>{{item.age}}</div>
</div>
</div>
</template>
<script>
const arr = [];
const obj = {}
export default {
data() {
return {
list: [],
}
},
computed: {
listData: function ({list}) {
list.forEach(item => {
item.name = arr[item.index].name;
item.age = obj[item.id].age;
})
return list;
}
},
}
</script>