想解决vue的超大数据列表性能慢的问题？

在移动端处理下拉大量的数据时，会出现性能瓶颈。那如何解决呢！

Vue-recyclerview是你的一个不错的解决方案，页面采用的动态布局，自动回收机制来解决性能问题。

直接下载/CDN

unpkg.com提供基于NPM的CDN链接。上面的链接将始终指向NPM的最新版本。您还可以通过诸如

https://unpkg.com/vue-recyclerview/dist/vue-recyclerview.js之类的 URL使用特定版本/标签。

NPM

$ npm install vue-recyclerview

main.js

import Vue from 'vue'

import VueRecyclerviewNew from 'vue-recyclerview'

Vue.use(VueRecyclerviewNew)

App.vue

 
<template> 
    <div id="app"> 
        <RecyclerView 
            :prerender="30" 
            style="height: calc(100vh - 50px)" 
            :fetch="MiFetch" 
            :item="MiItem" 
            :tombstone="MiTomstone"
        ></RecyclerView> 
    </div>
</template>
<script> 
    import MiItem from './MiItem.vue' 
    import MiTomstone from './MiTombstone.vue' 
    import MiFetch from './mi-fetch' 
    export default {
        name: 'app',
        data () {
            return {
                MiFetch,
                MiItem,
                MiTomstone
            }
        }
    }
</script>

具体信息参考:

https://github.com/hilongjw/vue-recyclerview/blog/master/README.md

	<template>
	<div id="app">
	<RecyclerView
	:prerender="30"
	style="height: calc(100vh - 50px)"
	:fetch="MiFetch"
	:item="MiItem"
	:tombstone="MiTomstone"
	></RecyclerView>
	</div>
	</template>
	<script>
	import MiItem from './MiItem.vue'
	import MiTomstone from './MiTombstone.vue'
	import MiFetch from './mi-fetch'
	export default {
	name: 'app',
	data () {
	return {
	MiFetch,
	MiItem,
	MiTomstone
	}
	}
	}
	</script>