欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

vue diff廣度優先

張吉惟2年前7瀏覽0評論

Vue的虛擬DOM是通過比較新舊虛擬節點,找出差異后只對差異部分進行DOM更新。這個過程就是diff算法,Vue中的diff算法采用了廣度優先遍歷算法。

廣度優先遍歷算法,顧名思義,就是從根節點開始,按照層級依次遍歷同一層節點,再依次往下遍歷。比如對于下圖,廣度優先遍歷的訪問順序是1,2,3,4,5,6,7,8,9。

1
/    \
2      3
 /  \   /  \
4    5 6    7
\
8
/ \
9   10

對于Vue中的diff算法來說,就是對新、舊虛擬節點采用廣度優先遍歷,比較同一層的虛擬節點是否相同,如果有不同則將該節點以及其子節點全部重新渲染,否則繼續向下遍歷子節點,以此類推。

為了避免不必要的比較,Vue采用了兩個策略。第一個是如果新舊節點的標簽名不同,直接刪除舊節點,新節點直接代替舊節點。這種情況比較少見,但是可以節省很多比較的時間。第二個是如果新節點和舊節點標簽名相同,但是屬性不同,那么只更新這些不同的屬性,而不是整個節點及其子節點全部重新渲染。

除此之外,Vue還采用了key的策略來優化diff算法。每個v-for循環生成的節點都需要給定一個獨一無二的key值,Vue根據這個key值來判斷該節點是否需要重新渲染。首先,Vue會通過key值找到新列表中對應的節點,如果找到了,則對新、舊節點比較是否相同,如果不同則更新節點及其子節點,否則繼續遍歷子節點。如果新列表中有節點沒有對應的key值(即新節點與舊節點key值不同),這些新節點將會全部重新渲染。

綜上所述,Vue中的diff算法采用了廣度優先遍歷,對于同一層次的節點,只比較其中不同的部分,避免全局遍歷所帶來的性能損耗。并且,通過key值策略,進一步優化了diff算法。