Mari kita bincangkan tentang sebab pendengar Vue dilaksanakan dua kali

Vue.js ialah rangka kerja JavaScript bahagian hadapan yang popular yang menyediakan kami set alat dan ciri lengkap untuk membangunkan aplikasi web yang cekap dan mudah diselenggara. Salah satu fungsi penting ialah pendengar, yang bertanggungjawab untuk memerhati perubahan dalam data dalam contoh Vue Apabila data berubah, pendengar akan mengemas kini paparan secara automatik untuk mencapai antara muka pengguna yang responsif.

Dalam penggunaan sebenar, kadangkala kami mendapati bahawa pendengar Vue dilaksanakan dua kali Masalah ini telah menyebabkan kekeliruan dan masalah di kalangan banyak pembangun. Jadi, mengapa pendengar Vue melaksanakan dua kali?

Sebab 1: Penyampaian awal dan perubahan data

Pertama sekali, perlu diperhatikan bahawa pendengar Vue dilaksanakan dua kali kerana data yang terikat kepada pendengar ini berbeza daripada data semasa permulaan rendering. Dicetuskan sekali apabila menukar. Sebagai contoh, apabila kami mengikat data dalam komponen Vue, dan data berubah apabila komponen itu dipaparkan, maka pendengar akan dilaksanakan semasa pemaparan awal dan apabila data berubah.

Secara khusus, Vue akan melaksanakan fungsi pemaparan semasa pemaparan awal Fungsi pemaparan ini akan menjana Dom maya dan mengemas kini paparan berdasarkan Dom maya ini, yang mungkin mencetuskan pelaksanaan pendengar Vue. Apabila data berubah, Vue akan melaksanakan fungsi pemaparan sekali lagi, menjana Dom maya baharu dan mengemas kini paparan Proses ini juga boleh mencetuskan pelaksanaan pendengar.

Sebab 2: Cara Pengawas terikat pada teg

Kedua, pendengar Vue dilaksanakan dua kali kerana kaedah pengikatannya yang berbeza. Pendengar Vue biasanya dilaksanakan melalui objek Watcher, dan objek Watcher boleh dibuat melalui kaedah pengikatan yang berbeza. Di bawah kaedah pengikatan yang berbeza, bilangan masa pelaksanaan pendengar mungkin berbeza.

Sebagai contoh, apabila kami menggunakan arahan model v untuk mengikat data, Vue akan mengikat data secara automatik pada objek Pemerhati dan melakukan pengikatan dua hala pada data. Apabila data berubah, objek Watcher secara automatik mencetuskan fungsi pendengar. Oleh itu, apabila kita menggunakan v-model untuk mengikat data dalam templat, fungsi pendengar akan dilaksanakan dua kali.

Selain itu, jika kita mengikat berbilang tag pada data yang sama dalam templat, fungsi pendengar juga akan dilaksanakan beberapa kali. Sebagai contoh, apabila kita menggunakan v-model untuk mengikat data yang sama pada kedua-dua teg input dan teg textarea, fungsi pendengar akan dilaksanakan dua kali.

Bagaimana untuk mengelakkannya?

Jadi, bagaimana untuk menghalang pendengar Vue daripada melaksanakan dua kali? Malah, tiada penyelesaian tetap untuk masalah ini, kerana terdapat banyak sebab untuk pendengar dilaksanakan dua kali, dan situasi yang berbeza mungkin memerlukan penyelesaian yang berbeza. Walau bagaimanapun, kami boleh mencuba penyelesaian berikut:

1. Kurangkan pemantauan data. Jika paparan tidak perlu dikemas kini apabila data berubah, maka tidak perlu mendengarnya.
2. Elakkan membuat perubahan pada data pada pemaparan awal. Data boleh dimulakan dalam kitaran hayat yang dicipta untuk mengelakkan perubahan data selepas pemasangan.
3. Gunakan tag untuk mengikat data dengan sewajarnya. Anda boleh menggunakan sifat yang dikira, kaedah, dsb. untuk menggantikan arahan model-v.

Ringkasan

Pendengar Vue ialah bahagian penting dalam responsif Vue dan salah satu ciri teras rangka kerja Vue. Melaksanakan pendengar dua kali bukanlah ralat, tetapi berkaitan dengan rendering, kaedah mengikat, dsb. Dengan memahami punca dan penyelesaian, kami boleh menggunakan pendengar dengan lebih baik dan membina aplikasi Vue yang cekap dan stabil.

Atas ialah kandungan terperinci Mari kita bincangkan tentang sebab pendengar Vue dilaksanakan dua kali. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!