长列表处理

长列表处理

vue虚拟滚动（vue-virtual-scroll-list）

vue2中可用，vue3中报错：Vue.component is not a function

安装

npm install vue-virtual-scroll-list --save

• 当前node版本12.12.0
• vue-virtual-scroll-list@2.3.3

使用

• 使用虚拟滚动组件

  <template>
  	<div>
  		<h1>审批</h1>
  		<h1>实现长列表</h1>
      <!-- 4, 使用列表组件-->
  		<virtual-list
  			style="height: 360px; overflow-y: auto; width: 100px"
  			:data-key="'uid'"
  			:data-sources="items"
  			:data-component="itemComponent"
  		/>
  	</div>
  </template>
  
  <script>
  // 1,导入组件
  	import Item from "./Item";
  	import VirtualList from "vue-virtual-scroll-list";
  
  	export default {
  		name: "root",
  		data() {
  			return {
          // 2,注册子组件,配置列表内容
          itemComponent: Item,
  				items: [
  					{ uid: "unique_1", text: "abc" },
  					{ uid: "unique_2", text: "xyz" },
  				],
  			};
      },
      // 3,注册列表组件
      components: { "virtual-list": VirtualList },
      // 5,添加测试数据
  		mounted() {
  			for (let i = 3; i < 1000; i++) {
  				this.items.push({ uid: "unique_" + i, text: "text" + i });
  			}
  		},
  	};
  </script>
  
  <style lang="stylus" scoped></style>
  
  

• Item.vue

  <template>
  	<div>{{ index }} - {{ source.text }}</div>
  </template>
  
  <script>
  	export default {
  		name: "item-component",
  		props: {
  			index: {
  				// index of current item
  				type: Number,
  			},
  			source: {
  				// here is: {uid: 'unique_1', text: 'abc'}
  				type: Object,
  				default() {
  					return {};
  				},
  			},
  		},
  	};
  </script>
  
  

原理

方法1： 数据分片

方法2：只渲染可视区域内的内容

可以通过按需进行加载dom，即只渲染可视区域内及其前后部分的数据（根据当前滚动的高度和列表的长度），减少dom的结构数据