vue和react中的diff有哪些區(qū)別

這篇文章主要介紹“vue和react中的diff有哪些區(qū)別”，在日常操作中，相信很多人在vue和react中的diff有哪些區(qū)別問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue和react中的diff有哪些區(qū)別”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

區(qū)別：1、當(dāng)節(jié)點(diǎn)元素類型相同，類名不同時，vue認(rèn)為是不同的元素，會刪除重新創(chuàng)建，而react認(rèn)為是同類型節(jié)點(diǎn)，會進(jìn)行修改操作；2、列表對比時，vue采用從兩端到中間的方式進(jìn)行對比，而react則是從左往右進(jìn)行對比。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue和react中的diff有什么區(qū)別

diff算法：

對dom進(jìn)行different比較不同的一種算法（虛擬）

共同點(diǎn)：

vue和diff算法，都是不進(jìn)行跨層級比較，只做同級比較

不同點(diǎn)：

1.vue進(jìn)行diff時，調(diào)用patch打補(bǔ)丁函數(shù)，一邊比較一邊給真實(shí)的dom打補(bǔ)丁，vue對比節(jié)點(diǎn)時，當(dāng)節(jié)點(diǎn)元素類型相同，類名不同時，認(rèn)為是不同的元素，刪除重新創(chuàng)建，而react認(rèn)為是同類型的節(jié)點(diǎn)，進(jìn)行修改操作

2.vue列表對比的時候，采用從兩端到中間的方式，舊集合和新集合兩端各存在兩個指針，兩兩進(jìn)行比較，每次對比結(jié)束后，指針向隊(duì)列中間移動；react則是從左往右一次對比，利用元素的index和lastindex進(jìn)行比較

3.當(dāng)一個集合把最后一個節(jié)點(diǎn)移動到最前面，react會把前面的節(jié)點(diǎn)依次向后移動，而Vue只會把最后一個節(jié)點(diǎn)放在最前面，這樣的操作來看，Vue的diff性能是高于react的

到此，關(guān)于“vue和react中的diff有哪些區(qū)別”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！