Vue the following picture shows how to optimize the performance of the code v-for in the process.

<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>
Jan.18,2022

if you want to optimize, do not calculate in the template. Not only will the calculated data not be cached, it will be recalculated every time it is redrawn, and it will also make the template look ugly.
it is recommended to use computed to generate calculated data that can be called directly by the template


all calculations are taken to external computed


vue.js virtual node turns to real node loop one by one insert (parentElm, vnode.elm, refElm). JavaScript can be spliced into strings and then insert.vue.js is really reducing the amount of code, but in this respect, it should be at the expense of performance.

Menu