Vuejs 中的无效计算循环

Question

>我有如下数组：

return {
items: [
{ active: false, text: 'text1', textOutput: ''},
{ active: false, text: 'text1', textOutput: ''},
{ active: false, text: 'text1', textOutput: ''},
...
],
}

现在，此数组的目的是使用如下所示的计算属性将数据输出到 DOM。

我只想输出活动的数据：true，它在网络的其他部分正在更改 onclick，因此计算结果DOM 正在监视此更改并且仅更改items.active="true"。此外，我还使用文本字段来更改items.text[i]值。

computed: {
resultDOM () {
for (var i=0; i<this.items.length; i++) {
if (this.items[i].active) {
this.items[i].textOutput = '<li>' + this.items[i].text + '</li>'
console.log('bam')
}
else {
this.items[i].textOutput = ''
console.log('bam else')
}          
}
var output=''
for (var i=0; i<this.items.length; i++) {
output = output + this.items[i].textOutput
}
return output
}
}

问题是这需要一些时间来执行，并且每次我只将一个活动更改为 true(或 items.text value)计算时，都会对表的每个元素进行检查，因此效果非常低。 我可以问你一些提示，我应该如何改进我的代码以提高效率吗？ 正确的方法是什么？

编辑：

<div  v-html="resultDOM"></div>

Answer 1

如果您利用条件呈现和v-for指令，则可以完全避免使用computed：

const app = new Vue({
el: "#app",
data: {
items: [
{ active: true, text: 'text1',},
{ active: true, text: 'text2',},
{ active: false, text: 'text3',},
],
},
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
<ul>
<li v-for="item in items" v-if="item.active" v-text="item.text"></li>
</ul>
</div>

斯菲德尔