requestAnimationFrame

window.requestAnimationFrame(callback);

告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

<template>
    <div>
        <div v-for="(item, i) in list" :key="i"> {{i + 1}}---渲染大量数据</div>
    </div>
</template>
<script>
export default {
    name: 'CliVue2Zz',
    data() {
        return {
            list: []
        };
    },
    mounted() {
        this.renderItem(10000)
    },
    methods: {
        renderItem(total) {
            let count = total / 10
            let animationId = ''
            console.log('00000',count)
            const showDiv = () => {
                 console.log('111111')
                if (count < 0) {
                    // 取消回调函数。
                    window.cancelAnimationFrame(animationId)
                    return
                }
                const currentList = new Array(10).fill(10)
                this.list = [...this.list, ...currentList]
                count--
                // 返回一个 long 整数，请求 ID 
                animationId = window.requestAnimationFrame(showDiv)
            }
            showDiv()
        }
    },
};
</script>
<style lang="scss" scoped>
</style>