vue一个页面两个不同数据循环, 但是内容一样的应该怎么优化

Question

已解决:

        ` <Row :gutter="24" class="two-rank-box">
            <Col
                :md="24"
                :lg="12"
                v-for="(colItem, colIndex) in [leftData,rightData]"
                :key="colIndex"
            >
                <div class="rank-line" v-for="(item,index) in colItem" :key="index">
                    <div class="left">
                        <span class="index" :style="{backgroundColor: item.color}">{{item.sort}}</span>
                        <span class="title" :title="item.title">{{item.title}}</span>
                    </div>
                    <div class="right">
                        <Progress
                            class="percent"
                            :percent="parseInt(item.percent)"
                            stroke-color="#00bb7a"
                            :stroke-width="6"
                            hide-info
                        />
                        <span class="value" :title="item.value">{{item.value}}</span>
                    </div>
                </div>
            </Col>
        </Row>`

Answer 1

为什么要优化？

是出性能瓶颈了，还是可读性差了？

抽组件已经是最好的方式了，你还不愿意，纯粹是为了“优化”而优化？