Beberapa petua pengoptimuman kod Vue

Vue ialah rangka kerja JavaScript popular yang boleh membina aplikasi web dipacu data dengan cepat. Walau bagaimanapun, apabila projek Vue menjadi semakin kompleks, pengoptimuman kod menjadi sangat penting. Jika anda tidak mengoptimumkan kod anda, prestasi aplikasi anda boleh menjadi perlahan dan kod anda lebih sukar untuk dikekalkan. Artikel ini akan memperkenalkan beberapa teknik pengoptimuman kod Vue.

1. Elakkan menggunakan pengiraan rumit dalam templat

Vue menyediakan fungsi mengira sifat. Sifat yang dikira menukar nilai objek reaktif kepada sifat yang dikira yang boleh digunakan untuk pemaparan. Ini menjadikan penggunaan sifat yang dikira lebih cekap daripada menggunakan pengiraan kompleks secara langsung dalam templat. Jika data yang bergantung pada atribut yang dikira tidak berubah, nilai yang dikira hanya akan dikira sekali apabila digunakan berbilang kali dalam templat.

Andaikan terdapat sekeping kod dalam templat:

<div>{{ items.filter(item => item.price > 10).map(item => item.name) }}</div>

Kod ini akan mengira tatasusunan item setiap kali ia dipaparkan semula, jadi jika tatasusunan item adalah besar, ini akan menyebabkan masalah prestasi. Sebaliknya, anda boleh menggunakan sifat yang dikira untuk mengira hasil yang dikira akan dikira semula apabila kebergantungan berubah:

computed: {
  filteredItems() {
    return this.items.filter(item => item.price > 10)
  },
  itemNames() {
    return this.filteredItems.map(item => item.name)
  }
}

Kod templat yang sepadan akan menjadi:

<div>{{ itemNames }}</div>

Kaedah ini boleh bertambah baik dengan ketara. prestasi aplikasi.

2. Elakkan menggunakan v-if dan v-for bersarang dalam templat

Dalam templat, v-if dan v-for ialah dua arahan yang sangat berkuasa . Walau bagaimanapun, apabila kedua-dua arahan ini disatukan, ia menjadi sangat perlahan. Contohnya:

<div v-for="user in users" v-if="user.isActive">{{ user.name }}</div>

Kod ini menggunakan v-for untuk melintasi tatasusunan pengguna, dan kemudian menggunakan v-if untuk menapis unsur yang isActive adalah benar. Proses ini sangat tidak cekap. Vue mengira keseluruhan senarai beberapa kali dan mencipta semula elemen DOM setiap kali.

Untuk meningkatkan prestasi, anda boleh menukar v-if dan v-for kepada atribut yang dikira:

computed: {
  activeUsers() {
    return this.users.filter(user => user.isActive)
  }
}

Kemudian gunakan v-for dalam templat untuk melintasi ActiveUsers:

<div v-for="user in activeUsers">{{ user.name }}</div>

3. Kurangkan bilangan Pemerhati

Pemerhati menyediakan mekanisme kemas kini responsif untuk data Vue Apabila sifat berubah, pemerhati akan mengemas kini paparan berkaitan secara automatik. Walau bagaimanapun, jika terdapat terlalu ramai pemerhati, ia boleh menyebabkan masalah prestasi. Secara amnya, bilangan pemerhati adalah berkadar dengan bilangan sifat tika Vue.

Untuk mengurangkan bilangan pemerhati, anda boleh menggunakan atribut yang dikira dan bukannya pemerhati. Sifat yang dikira hanya dikira semula apabila kebergantungan berubah, manakala pemerhati sentiasa dipanggil untuk setiap perubahan sifat. Jika anda tidak perlu mengemas kini paparan setiap kali sifat berubah, sifat yang dikira ialah pilihan yang lebih baik.

4. Optimumkan pemaparan senarai

Dalam Vue, pemaparan senarai ialah tugas yang sangat biasa. Untuk mengoptimumkan pemaparan senarai, anda boleh menggunakan atribut utama. Atribut utama ialah ID yang membezakan setiap item dalam senarai. Ia membolehkan Vue mengesan perubahan dalam elemen DOM dengan lebih pantas dan memulihkan keadaan dengan lebih pantas apabila memaparkan item senarai yang sama berulang kali.

Walau bagaimanapun, sila berhati-hati untuk tidak menggunakan kekunci dinamik dalam senarai besar. Menggunakan kekunci dinamik akan menyebabkan Vue memaparkan semula keseluruhan senarai, yang akan menjadi sangat intensif prestasi. Sebaliknya, gunakan kunci, tetapi pastikan ia statik dan unik di seluruh senarai.

5. Menggunakan komponen tak segerak

Vue menyediakan kefungsian komponen tak segerak, yang membolehkan kami menangguhkan pemuatan komponen, dengan itu meningkatkan kelajuan pemulaan aplikasi. Jika kita mempunyai komponen atau halaman yang besar, kita boleh mengoptimumkannya dengan cara ini untuk menjadikan halaman pertama halaman dimuatkan dengan lebih cepat. Menggunakan fungsi komponen tak segerak Vue memerlukan penggunaan alat pembungkusan yang serupa seperti Webpack.

6. Ujian prestasi dengan Vue Devtools

Vue Devtools ialah sambungan penyemak imbas untuk menyahpepijat aplikasi Vue. Ia bukan sahaja menyediakan hierarki dan keadaan komponen Vue, tetapi juga membolehkan anda menyemak prestasi aplikasi anda. Dengan analisis prestasi Devtools, anda boleh memeriksa isu prestasi dengan teliti dan menjejaki prestasi sebenar untuk mengenal pasti laluan kod paling perlahan dan perkara yang mungkin menyebabkannya. Ini adalah alat yang hebat untuk mengoptimumkan prestasi aplikasi Vue.

Ringkasan:

Di atas ialah beberapa petua untuk mengoptimumkan prestasi aplikasi Vue. Prestasi aplikasi Vue anda boleh dipertingkatkan dengan ketara dengan mengelakkan pengiraan rumit dalam templat, mengoptimumkan pemaparan senarai, komponen tak segerak yang mempengaruhi masa skrin pertama, dsb. Akhir sekali, menggunakan Vue Devtools ialah cara terbaik untuk mengesan dan menyelesaikan isu prestasi aplikasi.

Atas ialah kandungan terperinci Beberapa petua pengoptimuman kod Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!