Cara melaksanakan penatalan tanpa had untuk mengoptimumkan prestasi aplikasi melalui senarai maya Vue

Cara mengoptimumkan prestasi aplikasi melalui tatal tanpa had melalui senarai maya Vue

Memandangkan kerumitan aplikasi bahagian hadapan terus meningkat, terutamanya apabila memproses sejumlah besar data, beberapa isu prestasi turut timbul. Dalam hal ini, Vue menyediakan alat yang berkuasa - Senarai Maya, yang boleh meningkatkan prestasi aplikasi dengan sangat baik apabila memproses sejumlah besar data dengan memaparkan unsur-unsur yang boleh dilihat secara dinamik dalam senarai.

Artikel ini akan memperkenalkan cara menggunakan senarai maya Vue untuk melaksanakan penatalan tanpa had dan mengoptimumkan prestasi aplikasi. Kami akan menggunakan apl buku alamat maya sebagai contoh untuk menunjukkan cara memuatkan sejumlah besar data dan memaparkan kenalan boleh dilihat secara dinamik pada tatal.

Pertama, kita perlu mencipta projek Vue baharu menggunakan Vue CLI dan menambah pemalam vue-virtual-scroll-list.

vue create virtual-list-demo
cd virtual-list-demo
yarn add vue-virtual-scroll-list

Kemudian, dalam fail App.vue, kita boleh mula membina aplikasi buku alamat maya.

<template>
  <div class="app">
    <div class="header">虚拟通讯录</div>
    <div class="contact-list" ref="listRef">
      <ul>
        <li v-for="contact in visibleData" :key="contact.id" class="contact-item">{{ contact.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list';

export default {
  name: 'App',
  components: {
    VirtualList,
  },
  data() {
    return {
      contactList: [], // 存放所有联系人数据
      visibleData: [], // 存放可见的联系人数据
      startIndex: 0, // 起始索引
      endIndex: 0, // 结束索引
      listHeight: 500, // 虚拟列表的高度
      itemHeight: 50, // 每一项的高度
    };
  },
  created() {
    // 模拟加载联系人数据
    const contacts = [];
    for (let i = 0; i < 100000; i++) {
      contacts.push({
        id: i,
        name: `联系人${i}`,
      });
    }
    this.contactList = contacts;
    this.updateVisibleData();
  },
  methods: {
    // 根据滚动位置计算可见数据并更新
    updateVisibleData() {
      const start = Math.max(0, Math.floor(this.startIndex / this.itemHeight));
      const end = Math.min(
        this.contactList.length - 1,
        Math.floor((this.startIndex + this.listHeight) / this.itemHeight)
      );
      this.visibleData = this.contactList.slice(start, end + 1);
    },
    // 监听滚动事件
    handleScroll(event) {
      const scrollTop = event.target.scrollTop;
      this.startIndex = Math.max(0, Math.floor(scrollTop));
      this.endIndex = Math.min(
        this.contactList.length - 1,
        Math.floor(scrollTop + this.listHeight)
      );
      this.updateVisibleData();
    },
  },
};
</script>

<style scoped>
.app {
  font-family: Arial, sans-serif;
}

.header {
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
  font-size: 18px;
}

.contact-list {
  height: 500px;
  overflow-y: auto;
}

.contact-item {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f5f5f5;
}

</style>

Dalam kod di atas, kami menggunakan komponen vue-virtual-scroll-list untuk membalut senarai kenalan untuk mencapai kesan tatal maya. Dalam cangkuk kitaran hayat yang dibuat, kami menjana 100,000 data kenalan simulasi dan memulakan parameter berkaitan senarai maya, seperti ketinggian senarai, ketinggian setiap item, dsb. Dalam kaedah handleScroll, kami mengira kedudukan skrol dan mengemas kini data kenalan yang boleh dilihat. Kemudian, tunjukkan kenalan yang boleh dilihat melalui arahan v-for dalam templat.

Dengan cara ini, walaupun terdapat sejumlah besar data yang perlu diberikan, hanya bahagian yang boleh dilihat akan dipaparkan, yang sangat mengurangkan bilangan nod DOM dan dengan itu meningkatkan prestasi aplikasi.

Akhir sekali, kami menjalankan apl dan menguji prestasi dengan menatal. Anda akan mendapati bahawa apl kekal lancar walaupun terdapat banyak data untuk dimuatkan.

Ringkasnya, melalui pemalam senarai maya Vue, kami boleh mencapai penatalan tanpa had dan mengoptimumkan prestasi aplikasi. Sama ada anda berurusan dengan senarai sejumlah besar data atau senario lain yang memerlukan pemaparan dinamik, senarai maya ialah alat yang sangat berguna.

Di atas adalah pengenalan kepada cara mengoptimumkan prestasi aplikasi melalui tatal tanpa had melalui senarai maya Vue. Harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara melaksanakan penatalan tanpa had untuk mengoptimumkan prestasi aplikasi melalui senarai maya Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!