開發vue元件踩過的坑

前言

近期又完成一個vue專案，公司好像十分看好vue框架，之後的幾個專案也準備使用vue框架。然而回想起之前，使用vue開發元件時遇到的各種bug,心中一陣後怕。在此記錄下那些填坑的歷程，方便以後查閱。

問題

1. input輸入出現白屏問題
   專案要求header部分固定，main部分可以滾動，css3實現main的css:

   .main{
          overflow: hidden;
          height: calc(100vh - 40px);
          position: relative;
          ....         
       }
    
   

   聚焦時，鍵盤彈起，螢幕滾動，因此出現白屏。
   只需在main的樣式中加上：transform: scale(0);
   推薦一篇transform對position影響的部落格，CSS3 transform對普通元素的N多渲染影響

2. scroller元件出現白屏問題
   專案中使用了better-scroll實現一個上拉載入更多和下拉重新整理的元件，測試發現部分手機，無法顯示列表。具體原因目前不清楚，但是估計是better-scroll使用了transform的鍋。一開始以為是部分手機不支援calc計算，因此在元件的計算屬性裡計算出螢幕高度，然並卵。可是，將計算的高度發在vue鉤子函式mounted中，竟然起作用了，太神奇了
3. input[type=file]上傳 圖片問題
   開發上傳圖片元件時，input[type=file]會呼叫原生相簿或者相機，由於安卓和IOS對系統的保護，遮蔽了input[type=file]的功能，這個需要原生程式碼實現
4. JSON資料量很大(約1.5M),卡屏問題
   開發tree元件時，正常情況使用v-show來控制tree的摺疊和展開，由於資料量很大，出現卡屏問題。網上搜索了一下，v-if在這種情況會比v-show效能更好。
   使用v-if出現當摺疊起來的元素被選中時，其子元素沒被選中。這時需要操作資料來源，將其設定為選中狀態。