vue渲染大量数据优化_vue大数据量性能优化

当数据量庞大的时候，组件的渲染会变得很慢，这时我们需要进行性能优化，根据可视区域的大小渲染组件

select和checkbox动态组件优化

使用vue-virtual-scroll-list进行组件遍历

{ { item.label }}

import { doCustomTimes } from "@/lib/tools";

import VirtualList from 'vue-virtual-scroll-list'

export default {

component: {

VirtualList

},

data () {

return {

list: [],

selectData: 0,

checkedArr: []

}

},

mounted () {

let list = [];

doCustomTimes(15000,(index) => {

list.push({

value: index,

label: `select${index}`

})

})

this.list = list

}

}

// 工具方法

export const doCustomTimes = (times, callback) => {

let i = -1

while (++i < times) {

callback(i)

}

}

大型列表优化

封装一个form-single 进行遍历

组件form.single.vue

v-if="Object.keys(valueList).length"

:label-width="labelWidth"

:model="valueList"

:rules="rules">

v-for="(item, index) in list"

:label