Fahami kerja dalaman DOM maya dalam React atau Vue

Question

Saya seorang pelajar dan saya cuba mencipta DOM maya saya sendiri untuk projek kolej saya (ia tidak akan mempunyai sebarang ciri lanjutan seperti prop atau acara, saya akan pastikan ia mudah) seperti rangka kerja terkenal lain React, Vue dll . Sama.

Saya cuma ingin tahu bila kita mempunyai berbilang fail kod (pemisahan kod). Jika saya membuat perubahan kepada mana-mana elemen anak dalam, adakah saya perlu membandingkan DOM maya yang lengkap (termasuk semua elemen anak dan elemen induk), atau adakah saya hanya perlu membandingkan elemen anak itu.

Jika saya perlu membandingkan DOM maya baharu yang lengkap (termasuk semua kanak-kanak) dengan DOM maya sebelumnya. Jadi mengapa saya perlu mengambil berat tentang pemaparan semula dalam React atau Vue (memandangkan sebarang perubahan pada kanak-kanak akan memaksa rangka kerja untuk membandingkan DOM Maya penuh)

Answer 1

Untuk Vue, DOM maya berfungsi secara berbeza dalam vue2 dan vue3.

Pendekatan

vue3 ialah,

1. Dengan menghuraikan templat HTML atau memaparkan fungsi dalam fail komponen dan menukarnya kepada perwakilan nod maya.
2. Semasa menghuraikan, ia akan merekodkan nod yang mempunyai kebergantungan pada data dinamik.
3. Seperti yang ditunjukkan di bawah

4. Kesan ialah fungsi yang mentakrifkan pengiraan yang diperlukan untuk menghuraikan nilai data tertentu.
5. Kesannya juga termasuk fungsi pemaparan nod maya
6. Fungsi rendering dengan bijak menukar nod maya kepada elemen DOM
7. Kini apabila data1 berubah, Vue3 akan melaksanakan semula kesan yang sepadan dan mencetuskan kemas kini untuk perubahan data seterusnya.

Rujukan:

1. Vue3 Reaktif
2. Penukaran Vnod