vue中關於v-for性能優化---track-by屬性


      vue中關於v-for性能優化---track-by屬性

最近看了一些react,angular,Vue三者的對比文章,對比來說Vue比較突出的是輕量級與易上手。

對比Vue與angular,Vue有更好的性能,非常容易優化,因為他不用臟檢查。而angular中,watcher越來越多的時候整理代碼性能就會變得越來越慢,因為作用域中的每一次變化,所有的watcher都需要重新計算。並且,如果一些watcher觸發另一個更新,臟檢查循環可能要運行多次。angular用戶常常需要頭疼解決臟檢查循環機制的問題,有時候沒有簡單的辦法來優化大量的watcher的作用域。而Vue用沒有這個問題,因為他使用基於依賴追蹤的觀察系統並且異步隊列更新,所有的數據變化都是獨立觸發,除非他們之間有依賴關系。

但是Vue中需要優化的是在v-for上使用track-by

track-by屬性:數據修改時,數據不改變的dom不會被重新渲染,已經改變的數據所在的dom才會被重新渲染

不添加屬性時數據變動時,無論值是否被修改,都會重新渲染dom

track-by的兩種使用方法:

1.使用數據中的某唯一字段,例_uid

渲染效果如右:兩個值都不變的情況下,才不會被渲染。(左邊沒有track_by屬性,右邊有track_by屬性)

 

2.使用$index,其他同上

同樣的數據變化,message沒有改變的情況下,dom不重新渲染

當有多個值進行渲染的時候,只有所顯然的值都保持不變的時候dom才不會渲染


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM