如果你的应用存在非常长或者无限滚动的列表，那么需要采用 窗口化 的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。可用到如下插件vue-virtual-scroll-list

如下是要展示无限列表的组件页面

<template>
    <div>
        <virtual-list
            style="height: 660px; 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"; //真正展示内容的组件，要传给virtualList
    export default {
        components: { virtualList  },
        name: "HelloWorld",
        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></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>

image.png

原理：
他只渲染keeps传入的个数，滚动时通过改变padding的值来模拟滚动，里面的每一个item在滚动时动态替换里面的值。代码内：通过:data-sources来传入要展示的数据的数组。通过 :data-component来传入要展示的组件。在组件内通过props,来接收index（索引）和source（接收到的值）进行展示 。

image.png

效果如下：

image.png