最近用Vuejs重構了公司的一個項目，項目是個Web的素材管理系統，相當於Web版windows的資源管理器，遇到了不少性能的瓶頸，優化過程中積累了一些經驗，特記錄下來以供各位園友參考：
1. 慎用deep watch：
第一次遇到性能問題是文件夾數據量稍大時，操作素材會感覺到明顯的延遲和卡頓，通過chrome的performance分析發現是使用watch時，配置了deep等於true，由於這個文件系統是個大的tree狀對象，每個素材對象又相互引用，導致任何一份數據更新都會通知到這個watcher。復盤分析對比圖如下：
deep:true, 明顯延遲卡頓
deep:false, 流暢
2. 使用更好的方式來解決問題:
第二次性能問題是在數據量超過1500左右時，加載元素耗時變久，操作開始慢慢變卡，檢查發現此時頁面內存暫用升高，dom元素數量巨大，附上16000個素材的dom數，這個時候系統已經完全不能用了，卡出天際。
優化方案，只渲染用戶能看到部分的素材，用戶滾動滾動條時才動態的切換素材，產生一種所有素材都已經渲染了的感覺。優化后的dom數如下，使用基本流程，滑動滾動條還是有明顯的不流暢。
3. 盡可能的減少watcher的數量
在上面16000個素材的情況，vue至少會創建16000個watcher，實際情況下會多得多，這樣的后果就是操作時js執行會特別耗時，這里我優化的辦法是把素材數據單獨保存到一個js變量中，只把需要展示給用戶的那一屏數據拿出來給vue監聽，這樣大大減少了wather的數據，原理同2，現在16000個素材無論是操作還是滑動滾動條一點都沒有卡頓的感覺了。
結語：之前在哪看過一句話，大意是不要老想着從技術的角度去解決問題，要試着從設計上從方式上去規避問題，挺有感觸的。