Penambahbaikan Vue3 berbanding Vue2: pemaparan senarai yang lebih cekap

Vue3 penambahbaikan berbanding Vue2: pemaparan senarai yang lebih cekap

Sebagai rangka kerja bahagian hadapan JavaScript yang popular, Vue menyediakan paparan dipacu data yang ringkas dan mudah digunakan, serta fungsi pemaparan senarai yang cekap. Walau bagaimanapun, dalam Vue2, isu prestasi mungkin timbul apabila berurusan dengan senarai jumlah data yang besar. Untuk menyelesaikan masalah ini, Vue3 telah memperkenalkan beberapa penambahbaikan untuk menjadikan pemaparan senarai lebih cekap dan meningkatkan pengalaman pengguna. Artikel ini akan meneroka penambahbaikan Vue3 dalam pemaparan senarai berbanding Vue2 dan memberikan contoh kod yang berkaitan.

Dalam Vue2, apabila kami menggunakan arahan v-for untuk memaparkan senarai data berskala besar, setiap item senarai akan terikat kepada pendengar, yang akan menyebabkan peningkatan dalam overhed prestasi. Dalam Vue3, Vue3 melaksanakan pemaparan senarai yang lebih cekap dengan memperkenalkan API baharu - Koleksi.

Pertama, kita perlu mengimport kebergantungan Vue3 yang berkaitan dalam kod:

import { createApp, h } from 'vue';

Seterusnya, kita boleh menggunakan ciri Koleksi untuk mencipta komponen senarai ringkas:

const List = {
  render() {
    return h('ul', this.items.map(item => h('li', item)));
  },
  data() {
    return {
      items: ['item1', 'item2', 'item3', ... 'item10000']
    };
  }
};

createApp(List).mount('#app');

Dalam kod di atas, kami menciptanya melalui fungsi h Elemen ul, dan menggunakan fungsi peta untuk menjadikan data dalam tatasusunan item dalam setiap elemen li. Tatasusunan item dalam kod di atas mengandungi 10,000 item senarai, mensimulasikan senarai data berskala besar.

Dalam Vue2, setiap item senarai akan terikat kepada pendengar, yang akan membawa overhed prestasi. Dalam Vue3, Vue3 akan membungkus keseluruhan item senarai dalam koleksi (Koleksi) dan menjadikannya menggunakan ciri DOM maya. Ini bermakna tidak kira apa saiz senarai itu, Vue3 hanya perlu mengikat seorang pendengar, sekali gus mengurangkan penggunaan memori dan masa rendering.

Selain itu, Vue3 turut memperkenalkan sistem responsif baharu-Proksi. Proksi menyediakan pemaparan senarai yang lebih cekap berbanding Object.defineProperty yang digunakan dalam Vue2. Dengan menggunakan Proksi, Vue3 boleh menjejaki perubahan data dengan lebih cekap dan menghasilkan dengan sewajarnya.

Berikut ialah contoh pemaparan senarai menggunakan Proksi:

const List = {
  render() {
    return h('ul', this.items.map(item => h('li', item)));
  },
  setup() {
    const items = new Proxy([], {
      set(target, prop, value) {
        target[prop] = value;
        // 触发渲染
      }
    });

    // 模拟向 items 数组中添加数据
    for (let i=0; i<10000; i++) {
      items.push(`item${i}`);
    }

    return { items };
  }
};

createApp(List).mount('#app');

Dalam kod di atas, kami menggunakan objek Proksi untuk menjejak perubahan dalam tatasusunan item. Apabila data ditambahkan pada tatasusunan item, Proksi mencetuskan kaedah yang ditetapkan dan mengemas kini paparan. Berbanding dengan kaedah Object.defineProperty dalam Vue2, menggunakan Proksi boleh memantau dan mengemas kini data dengan lebih baik, meningkatkan prestasi pemaparan senarai.

Ringkasnya, Vue3 telah membuat beberapa penambahbaikan berbanding Vue2 untuk menjadikan pemaparan senarai lebih cekap. Melalui pengenalan Koleksi dan Proksi, Vue3 mencapai pemaparan senarai yang lebih cekap dan lebih pantas, meningkatkan pengalaman pengguna.

Nota: Contoh kod di atas adalah berdasarkan API Komposisi Vue3 Jika anda menggunakan Vue2 atau versi Vue yang lain, sila laraskan kod tersebut dengan sewajarnya.

Rujukan:

• Vue Composition API: https://composition-api.vuejs.org/
• Evan You (2019's Reactivity System) https://www.vuemastery.com/blog /. vue-3s-reactivity-system-explained/

Atas ialah kandungan terperinci Penambahbaikan Vue3 berbanding Vue2: pemaparan senarai yang lebih cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!