vuetify 列表性能問題

Question

我有一個簡單的 json 數組，它由這樣的對象組成

{
    "kb:esid": "779256bf333d2d11abb52e39aafff20d",
    "kb:station": "Disco935 New York's Jammer",
    "kb:description": "Playing The 70's 80's 90's Disco And Beyond",
    "kb:station_url_record": {
        "kb:url_no": "1",
        "kb:url": "http://localhost/stream",
        "kb:status_code": "A",
        "kb:bandwidth_kbps": "128",
        "kb:url_strength": "9"
    }
}

我在 codrova 項目上使用 vuetify 來渲染列表。 該列表由 3 行組成：站點、描述和帶寬。 還有一個簡單的組件可以將電台標記為收藏。

列表渲染大約需要 5 秒來渲染 ~200 個元素。 我使用的是有點舊的智能手機：2GB 內存，5.1 Android，~1.2 GHz CPU。

如何提高渲染速度？ 我試圖在 vuetify 中搜索無限列表，但沒有任何相關內容。

謝謝。

Answer 1

Vue.js 加載起來有點繁重，但是您可以通過實現無限滾動組件來使用延遲初始化。 有一個名為vue-mugen-scroll 的已實現組件。 如果您需要快速測試，它還有一個CDN 鏈接。

只需用您的異步服務器調用替換getStations方法即可。 檢查此代碼段以了解其工作原理。

 let vm = new Vue({ el: '#vue-instance', data: { stations: [], loading: false, }, created() { this.getStations(); }, methods: { getStations() { for (let i = 0; i < 16; i++) { const count = this.stations.length + i; this.stations.push({ esid: '779256bf333d2d11abb52e39aafff20d' + count, name: 'Station ' + count, description: 'Station Description ' + count, record: 'Station Record ' + count, }); } }, }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue-mugen-scroll@0.2.5/dist/vue-mugen-scroll.min.js"></script> <div id="vue-instance" class="container"> <div class="row"> <div class="col-sm-6" v-for="(station, index) in stations"> <div class="card m-4" style="width: 18rem;"> <div class="card-body"> <h3 class="card-title">{{ station.name }}</h3> <p>{{ station.esid }}</p> <p>{{ station.description }}</p> <p>{{ station.record }}</p> </div> </div> </div> </div> <mugen-scroll :handler="getStations" :should-handle="!loading"> loading... </mugen-scroll> </div>