Apakah perbezaan antara react dan vue virtual dom?

Tiada perbezaan antara dom maya react dan vue; kedua-duanya menggunakan objek js untuk mensimulasikan DOM sebenar dan menggunakan perbezaan DOM maya untuk meminimumkan pengemaskinian DOM sebenar , yang boleh mengurangkan prestasi yang tidak diperlukan.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah perbezaan antara dom maya react dan vue?

DOM maya tindak balas dan vue adalah sama. Kedua-duanya menggunakan objek JS untuk mensimulasikan DOM sebenar, dan kemudian menggunakan perbezaan DOM maya untuk meminimumkan kemas kini DOM sebenar.

Kecuali untuk beberapa pelaksanaan, separuh pertama daripada kedua-dua (menggunakan objek JS untuk mensimulasikan DOM sebenar) adalah hampir sama.

Untuk separuh masa kedua (menggunakan perbezaan DOM maya untuk meminimumkan pengemaskinian DOM sebenar), kedua-dua algoritma adalah serupa, termasuk menggantikan sisipan padam, dsb.

Vue dan bertindak balas kedua-duanya menggunakan Algoritma dom maya untuk meminimumkan pengemaskinian DOM sebenar, dengan itu mengurangkan kehilangan prestasi yang tidak perlu.

Mengikut butiran, ia dibahagikan kepada perbezaan pokok, perbezaan komponen dan perbezaan pokok membandingkan nod DOM pada tahap yang sama dan melakukan operasi tambah, padam dan alih. Jika komponen ditemui, proses perbezaan pokok akan dimulakan semula.

Walaupun dua strategi kemas kini untuk DOM berbeza, bertindak balas menggunakan perbezaan penuh atas ke bawah dan vue menggunakan model langganan separa. Tetapi ini sebenarnya tiada kaitan dengan dom maya

Strategi kemas kini dom adalah berbeza

reaksi akan berbeza sepenuhnya dari atas ke bawah.

vue akan menjejaki Kebergantungan setiap komponen tidak memerlukan pemaparan semula keseluruhan pepohon komponen.

1. Sebagai tindak balas, apabila keadaan berubah, pokok komponen akan dibezakan sepenuhnya dari atas ke bawah, memaparkan semula halaman, menjana semula pokok dom maya baharu, membandingkan pokok dom lama dan baharu dan melakukan tampalan Kaedah tampalan adalah untuk mengemas kini DOM secara setempat Oleh itu, untuk mengelakkan kemas kini komponen anak yang tidak diperlukan yang disebabkan oleh mengemas kini komponen induk, React boleh membuat pertimbangan logik dalam shouldComponentUpdate, mengurangkan render yang tidak perlu dan menjana semula DOM maya untuk melakukan perbezaan. proses perbandingan.

2. Dalam vue, tukar semua sifat data ini kepada getter/setters melalui Object.defineProperty. Pada masa yang sama, objek instance pemerhati akan merekodkan sifat sebagai dep apabila komponen dipaparkan Apabila penetap dalam item dep dipanggil, jam tangan akan dimaklumkan untuk mengira semula, menyebabkan komponen yang berkaitan dikemas kini.

Algoritma Diff menggunakan kunci elemen untuk menentukan sama ada elemen itu ditambah, dipadam atau diubah suai, dengan itu mengurangkan pemaparan semula elemen yang tidak perlu.

Pembelajaran yang disyorkan: "

tutorial video bertindak balas

"

Atas ialah kandungan terperinci Apakah perbezaan antara react dan vue virtual dom?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!