Bagaimana untuk melaksanakan kemas kini tambahan dalam vue

Dengan pembangunan berterusan teknologi Internet, teknologi hadapan juga sentiasa dinaik taraf dan diulang. Antaranya, Vue, sebagai salah satu rangka kerja MVVM yang paling popular pada masa ini, telah digemari oleh semakin ramai pembangun. Dalam proses pembangunan harian, perubahan data sering terlibat, dan Vue boleh mengemas kini paparan dalam masa nyata melalui sistem responsif data. Walau bagaimanapun, apabila jumlah data adalah besar, kemas kini penuh akan memberi kesan pada prestasi dan teknologi kemas kini tambahan perlu digunakan dalam kes ini.

1. Apakah kemas kini tambahan?

Kemas kini tambahan bermaksud mengemas kini bahagian yang perlu dikemas kini sahaja sambil mengekalkan paparan semasa tidak berubah. Sebagai contoh, jika halaman mempunyai 1,000 keping data dan satu keping data berubah, jika anda menggunakan kaedah kemas kini penuh, anda perlu memaparkan semula keseluruhan halaman jika anda menggunakan kaedah kemas kini tambahan, anda hanya perlu mengemas kini menukar data boleh.

2. Mengapakah kemas kini tambahan diperlukan?

Seperti yang dinyatakan di atas, kaedah kemas kini penuh akan memberi kesan kepada prestasi, terutamanya apabila jumlah data dalam halaman adalah sangat besar. Kemas kini tambahan boleh mengurangkan operasi yang tidak perlu, meningkatkan prestasi halaman web dan meningkatkan pengalaman pengguna.

3. Bagaimanakah Vue melaksanakan kemas kini tambahan?

1. Vue.mixin

Vue.mixin ialah fungsi yang boleh mencampurkan pilihan atau komponen Vue secara global. Dengan menggunakan Vue.mixin, kami boleh menggunakan kaedah $forceUpdate() dalam templat untuk memaksa perubahan komponen dikemas kini. Walau bagaimanapun, menggunakan $forceUpdate() akan menyebabkan semua data dalam komponen dikemas kini sepenuhnya dan bukannya secara berperingkat. Jadi kita perlukan pendekatan yang lebih munasabah.

2. Vue.set

Vue.set digunakan untuk menambah elemen baharu pada objek atau tatasusunan dan merupakan API penting yang disediakan oleh Vue. Vue.set juga boleh mencetuskan operasi mengemas kini paparan secara automatik sambil menambah elemen Ia adalah kaedah untuk mencapai kemas kini tambahan.

Vue.set(object, key, value)
Vue.set(array, index, value)

Perihalan parameter:

• objek: objek sasaran
• kunci: nama atribut yang perlu ditambah
• nilai: atribut yang perlu ditambah nilai
• tatasusunan: tatasusunan sasaran
• indeks: kedudukan elemen yang perlu ditambah
• nilai: nilai elemen yang perlu ditambahkan

3. Atribut yang dikira

atribut yang dikira ialah atribut terkira yang biasa digunakan dalam Vue. Ia dicache berdasarkan kebergantungan reaktif dan hanya akan dikira semula apabila nilai kebergantungan harta yang dikira berubah. Dengan memantau kebergantungan dalam atribut yang dikira, kami boleh mencapai kemas kini tambahan data.

computed: {
  filteredData() {
    return this.data.filter(item => item.price > 100)
  }
}

Dalam kod di atas, apabila harga item dalam data berubah, FilteredData dalam atribut yang dikira akan dikemas kini secara automatik dan hanya item yang diubah akan dikemas kini, mencapai kesan penambahan kemas kini.

4. masukkan v-for

v-for ialah arahan gelung yang biasa digunakan dalam Vue Ia boleh merentasi setiap elemen dalam tatasusunan atau objek secara bergilir-gilir dan melaksanakan yang sepadan operasi. Apabila menggunakan v-for, jika anda tidak menambah nilai kunci unik pada setiap item, Vue akan cuba menggunakan indeks sebagai kunci secara lalai. Tetapi apabila item data dalam tatasusunan atau objek berubah, Vue tidak dapat menentukan dengan betul item yang telah berubah, jadi ia hanya boleh melakukan kemas kini penuh, yang menjejaskan prestasi. Menambah nilai kunci unik pada setiap item boleh mengenal pasti item yang diubah dengan tepat, dengan itu membolehkan kemas kini tambahan.

<div v-for="(item, idx) in items" :key="item.id">
  <span>{{ item.name }}</span>
  <span>{{ item.price }}</span>
</div>

Dengan menambahkan nilai kunci unik pada setiap item dalam v-for, item yang diubah boleh dikenal pasti dengan tepat, sekali gus mencapai kesan kemas kini tambahan.

Ringkasan:

Kemas kini tambahan ialah salah satu cara penting untuk mencapai aplikasi berprestasi tinggi, sebagai salah satu rangka kerja MVVM yang paling popular pada masa ini, turut menyediakan pelbagai kaedah untuk dilaksanakan kemas kini tambahan. Dengan menggabungkan kaedah seperti Vue.set, atribut yang dikira dan kunci dalam v-for, kami boleh mengemas kini data dengan lebih cekap, meningkatkan prestasi aplikasi dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kemas kini tambahan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!