vue解决长列表方法，ui复用组件用法

问题描述：

当浏览器加载了很多标签后，有好几百个，造成浏览器卡顿，原因是标签创建太多，消耗资源过大。

---

原因分析：

浏览器创建了很多的重复标签，资源浪费

---

解决方案：

话不多说，直接上代码

1.安装 vue-virtual-scroll-list

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

2.引入下载好的组件 记得局部注册一下组件

import virtualList from 'vue-virtual-scroll-list'

3.Hello.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <virtual-list
        :size="40"
        :remain="8"
        :data-sources="items"
        :data-component="item"
        :data-key="'id'"
        style="height: 500px; overflow: auto"
      >
      </virtual-list>
    </div>
  </div>
</template>

<script>
import virtualList from "vue-virtual-scroll-list";
import item from "./item";
export default {
  data() {
    return {
      items: [],
      item: item,
    };
  },
  methods: {
    forss() {
      for (let i = 1; i <= 10000; i++) {
        this.items.push({
          id: i,
          name:
            i +
            "12123d5a45ad56addadjak放假啊就恢复健康发号放假安徽科技发货方就按客户",
        });
      }
    },
  },
  created() {
    this.forss();
  },
  components: { "virtual-list": virtualList, item },
};
</script>

<style scoped></style>

4.item.vue

<template>
    <div>
        <p>{{source.name}}</p>
    </div>
</template>

<script>
export default {
    name:'item',
    props:{
        index:{
            type:Number
        },
        source:{
            type:Object,
            default(){
                return {}
            }
        }
    }
}
</script>

<style scoped>

</style>

简易demo，复制粘贴即可使用，前提是安装了对应插件。
官方地址