優化無限列表性能vue-virtual-scroll-list【測試90w條數據】

優化背景：如果你的應用存在非常長的或者無限滾動的列表，那么需要采用窗口化的技術來優化性能，只需要渲染少部分的內容（可視區域），減少重新渲染組件和創建dom節點的時間，可以參考以下的開源項目vue-vitual-scoll -list 和vue-virtual-scroller ,來優化這種無限列表的場景；

參考文檔：https://www.npmjs.com/package/vue-virtual-scroll-list

1.安裝 cnpm/npm install vue-virtual-scroll-list --save

2.引入下載好的組件，並注冊組件 import virtualList from 'vue-virtual-scroll-list'

3.注意版本1.x和2.x使用方式不同、api也不同

使用方式：

<template>
    <div>
        <virtual-list style="height: 360px; overflow-y: auto;" :data-key="'id'" :data-sources="items" :data-component="itemComponent"
        />
    </div>
</template>

<script> import virtualList from "vue-virtual-scroll-list"; import Item from "./Item"; export default { components: { "virtual-list": virtualList }, name: "HelloWorld", props: { msg: String, }, data() { return { itemComponent: Item, items: [], }; }, methods: { dataSource() { for (let i = 1; i <= 900000; i++) { this.items.push({ id: i, name: i + "模擬字段", }); } }, }, created() { this.dataSource(); }, }; </script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>

<template>
    <!-- 顯示的數據源 -->
    <div>{{ index }} - {{ source.name }}</div>
</template>

<script> export default { name: "item-component", props: { index: { // index of current item
 type: Number, }, source: { // here is: {id: '1', name: 'abc'}
 type: Object, default() { return {}; }, }, }, }; </script>

 效果圖：

 vue-virtual-scroller插件請參考：https://www.npmjs.com/package/vue-virtual-scroller

這里不再示范和贅述！！！！親測效果，請勿隨意轉載！！轉載注明出處~