Kaedah dalam vue yang tidak mencetuskan kemas kini paparan

Vue ialah rangka kerja JavaScript popular yang sering digunakan untuk membina aplikasi web dinamik dan interaktif. Teras Vue adalah pengikatan data responsif Setiap kali data berubah, Vue akan memaparkan semula paparan secara automatik. Walau bagaimanapun, sesetengah kaedah dan komponen Vue tidak mencetuskan kemas kini paparan secara automatik, yang boleh menyebabkan kekeliruan dalam beberapa kes khas.

Artikel ini akan memperkenalkan kaedah dalam Vue yang tidak mencetuskan kemas kini paparan dan sebab perkara ini berlaku.

1. Object.defineProperty()

Object.defineProperty() ialah fungsi asli JavaScript yang membenarkan pembangun mentakrifkan sifat sesuatu objek. Vue menggunakan Object.defineProperty() untuk melaksanakan pengikatan data reaktif. Apabila kami menentukan sifat baharu, Vue akan menjejakinya secara automatik Apabila harta itu diubah suai, Vue akan mengesan perubahannya dan mencetuskan kemas kini paparan secara automatik.

Walau bagaimanapun, jika kami mengubah suai deskriptor sifat bagi harta sedia ada (seperti menukar fungsi dapatkan harta itu), ini tidak akan mencetuskan kemas kini paparan. Ini kerana Vue hanya menjejaki deskriptor harta pada masa penciptaan objek, bukan pada masa jalan. Oleh itu, jika anda mengubah suai deskriptor sifat bagi harta sedia ada, Vue tidak mengetahui bahawa ia telah berubah.

2. Array.prototype.push()

Vue akan menjejaki perubahan dalam tatasusunan Apabila kami menggunakan Array.prototype.push() untuk menambah elemen baharu, Vue akan secara automatik Perubahan pada tatasusunan dikesan dan paparan dipaparkan semula.

Walau bagaimanapun, jika kita mengubah suai secara langsung sifat panjang tatasusunan, seperti Array.prototype.length=0, ini tidak akan mencetuskan pengesanan perubahan tatasusunan. Ini kerana Vue hanya akan menjejaki operasi yang boleh diperhatikan, dan mengubah suai secara langsung sifat panjang tatasusunan ialah operasi yang tidak boleh diperhatikan.

3. Object.assign()

Object.assign() ialah fungsi asli JavaScript, yang digunakan untuk menetapkan nilai semua sifat terhitung daripada satu atau lebih banyak objek sumber disalin ke objek sasaran. Apabila kami menggunakan Object.assign() untuk mengemas kini kandungan objek, Vue tidak mencetuskan kemas kini paparan secara automatik.

Ini kerana Vue bergantung pada perubahan dalam deskriptor sifat untuk mengesan perubahan objek dan menggunakan Object.assign() tidak mengubah deskriptor sifat. Oleh itu, jika anda mahu Vue mengesan perubahan dalam objek, sila gunakan kaedah Vue.set() atau this.$set() untuk menetapkan sifat objek secara manual.

4. arahan v-sekali

Arahan v-sekali memberitahu Vue supaya hanya memaparkan elemen sekali sahaja dan tidak lagi mencetuskan kemas kini paparan. Ini berguna dalam kes khas, seperti semasa memaparkan teks statik untuk mengelakkan overhed prestasi yang tidak perlu.

Walau bagaimanapun, apabila menggunakan arahan v-sekali, Vue tidak lagi akan menjejaki sebarang perubahan pada elemen, jadi ia tidak akan mengemas kini paparan secara automatik apabila sifat di sebalik elemen berubah. Jika anda perlu mengemas kini kandungan di sebalik elemen v-sekali, gunakan kaedah lain yang disediakan oleh Vue, seperti sifat yang dikira atau pemerhati.

Kesimpulan

Pengikatan data reaktif Vue ialah salah satu ciri terpentingnya. Vue secara automatik memaparkan semula paparan dengan menjejaki perubahan data, yang membolehkan kami membina aplikasi web dinamik dan interaktif dengan cepat. Walau bagaimanapun, beberapa kaedah dan arahan mungkin menjejaskan tindak balas Vue, dan kami perlu menggunakannya dengan berhati-hati.

Artikel ini memperkenalkan beberapa kaedah dan arahan Vue yang tidak akan mencetuskan kemas kini paparan, termasuk Object.defineProperty(), Array.prototype.length, Object.assign(), arahan v-sekali, dsb. Memahami batasan ini akan membantu kami menggunakan rangka kerja Vue dengan lebih baik dan mengurangkan ralat yang tidak perlu.

Atas ialah kandungan terperinci Kaedah dalam vue yang tidak mencetuskan kemas kini paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!