vue渲染大量数据时卡顿卡死解决方法

对于Vue渲染大量数据时出现卡顿和卡死的问题，有以下几种解决方法：

1. 利用vue的v-for指令渲染列表时使用分页

对于要渲染大量数据的列表，我们可以通过分页的方式一次渲染一定量的数据，而不是一次性全部渲染，可以有效增强浏览器的性能。这里提供一个简单的分页示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in currentPageData" :key="index">{{ item }}</li>
    </ul>
    <div>
      <button @click="prevPage">上一页</button>
      {{ currentPage }} / {{ pageCount }}
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      pageSize: 10, // 每页条数
      currentPage: 1, // 当前页码
    };
  },
  computed: {
    currentPageData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.dataList.slice(startIndex, endIndex);
    },
    pageCount() {
      return Math.ceil(this.dataList.length / this.pageSize); // 总页数
    },
  },
  methods: {
    async fetchData() {
      // 获取数据的异步请求
      const res = await fetch('https://example.com/api/data');
      this.dataList = await res.json();
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

2. 利用Vue的Virtual Scroller插件渲染数据

Virtual Scroller是Vue的一个插件，它可以将长列表渲染优化，并且只渲染可见的部分，这样可以大幅提高性能。

<template>
  <div class="list-wrapper">
    <div class="list-item" v-for="item in visibleData" :key="item.id">{{ item.content }}</div>
    <div class="list-item" v-if="isLoading">Loading...</div>
  </div>
</template>

<script>
import { VirtualScroller } from 'vue-virtual-scroller';

export default {
  components: { VirtualScroller },
  data() {
    return {
      data: [], // 所有数据
      visibleData: [], // 显示的数据
      isLoading: false,
    };
  },
  computed: {
    items() {
      return this.visibleData.map(item => ({ id: item.id }));
    },
  },
  async mounted() {
    this.isLoading = true;
    const res = await fetch('https://example.com/api/data');
    const data = await res.json();
    this.data = data.items;
    this.isLoading = false;
  },
};
</script>

在mounted中获取数据并将其存储在data数组中，然后将其绑定到VirtualScroller插件的items属性上。同时，可以在模板中为VirtualScroller插件设置class属性，这样便于对列表样式进行调整。