Vue中避免滥用this去读取data中数据

本文主要是介绍Vue中避免滥用this去读取data中数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

• template模板中如何避免

提前处理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>

这篇关于Vue中避免滥用this去读取data中数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---