vue 以下图片中代码 v-for过程中怎么做到了性能最优化

Question

<template v-for="(site,i) in data">
                {{
                (site.over = getisOver(site)||0,void 0),
                (title = site.id+'-'+site.name,void 0)
                }}
            <runboo :i='i' :title="title" :key="site.id" 
                    :color = "site.over?color[1]:color[0]" :type="site.over?'orange':'blue'"></runboo>
            <runoob :i="i" :title="title" :key="site.id+1" :type="site.over?'orange':'blue'"></runoob>
            </template>

Answer 1

要做优化就不要在模板中进行计算，不但计算数据不会被缓存，每次重绘都要重算一遍，还让模板看起来丑陋无比。
建议用computed生成已经算好的让模板能直接调用的数据

Answer 2

所有计算拿到外部computed

Answer 3

vue.js 虚拟节点转真实节点 循环时是一个个insert(parentElm, vnode.elm, refElm)进来.JavaScript可以拼接成字符串再一起insert.vue.js是确实减少代码量,但在这一方面应该是牺牲了性能.