一、對於點選後請求時間過長的按鈕

現象：容易給使用者點選無效的錯覺，從而導致多次點選，從而發出多個相同請求，這顯然是不符合我們意願的

解決：

使用者點擊發出多個請求：加個鎖，當用戶點選後，將鎖關閉，使使用者之後的點選無效，當請求完畢後再開啟鎖

等待時間過長使用者體驗降低：可以加個loading，點選後按鈕內容後加個"..."，或者後加個loading圖示，當請求完畢再回復原樣

二、傳送資料內容能在前端驗證的儘量在前端驗證

原因：如果把一些驗證放到後端介面，我們傳送請求，然後驗證沒通過，請求返回原因，然後呢？肯定是使用者修改後，再次傳送請求了。

但是如果我們把這些驗證放到前端，這個請求就沒必要發出，之後驗證通過後才會發出請求，這樣可以一定程度減少請求數量，減輕伺服器負擔。

三、Vue.js開發中關於第三方元件的使用

使用第三方元件的好處：節省了很多重複程式碼，直接引入使用即可

使用第三方元件的缺點：雖然元件好用，但是我們也要根據需求具體分析，因為元件的樣式和功能是定死的，要考慮使用這個的元件和當前需求衝突的多少，如果衝突很多，或者自己寫個適配的元件會更加高效方便。

四、開發前一定要把需求弄清楚才開始開發，如果是因為需求弄錯而導致的時間和人力的浪費，痛苦的只會是你自己，要對自己負責。

五、Vue.js開發，如果如果通過等號，為data中的一個數組或者一個物件內，新增一個新物件，這個新新增的新物件不是響應式，我們修改該物件的值，並不會觸發重新渲染。

解決：通過 this.$set(obj, prop, value) 來新增，通過此方法新增的是響應式的，因為會被重新定義新增setter和getter

六、如果介面傳遞的資料除了正常的資料外，還存在檔案，我們需要 new FormData() ，通過FormData例項的append方法新增資料，然後將改FormData例項作為引數傳遞

七、檔案位元組轉換為正常單位

// 位元組轉換為最合適的單位，最後是四捨五入取整，如果其他需求可以修改
function bytesToSize(bytes) {
    if (bytes === 0) return '0 B';
    
 
var k = 1024, // or 1000
        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        i = Math.floor(Math.log(bytes) / Math.log(k));
   return (bytes / Math.pow(k, i)).toFixed(0) + '' + sizes[i];
}

八、Vue.js使用ElementUI元件，自定義樣式問題

問題：自定義樣式其實就是覆蓋元件的預設樣式，這些內容需要放到全域性，即不能放到設定scope的style標籤中，否則不會生效

原因：因為Vue.js被放到scope中的樣式選擇器在打包後都會被加上一個唯一的屬性標識，通過這個唯一的屬性標識來限定元件作用域，避免影響其他元件的樣式。

九、編輯器內容初始化問題

需求：如果元件或者頁面存在編輯器，當頁面初次載入時，我們需要將獲取到的資料初始化到編輯器中

問題：編輯器初始化一般要操作dom，如果在為編輯器初始化填充資料的時候，編輯器例項（也就是編輯器DOM）還沒有渲染完畢，會導致編輯器的內容初始化失敗

解決：

方一：有些編輯器會提供編輯器例項載入完畢的事件，我們在該事件的回撥中填充初始化資料，如下例子

editor.on('ready', () => {
   editor.setData("初始化資料"); 
});

方法二：如果沒有提供方一的事件api，可能會存在一個編輯器當前狀態的屬性，比如說是status，載入時status為loading，載入完畢，status變為ready

然後我們可以設定定時器，每過100ms就監測一次status，如果status變為ready，關閉監測定時器，填充初始化資料

let timer = setInterval( () => {
    clearInterval(timer);
   if (editor.status == 'ready') {
        editor.setData('初始化資料');
   }
});

十、Vue.js開發中使用了ElementUI中的table元件

問題：會出現橫向滾動條，雖然表格中內容沒有超過設定的寬度

原因：table的border存在會導致內容border超過設定的width，從而莫名出現橫向滾動條，但因為樣式，表格的border又不能去掉

解決：在全域性樣式中加入如下程式碼：

.form-content .el-table__body-wrapper,
.form-content .el-table__footer-wrapper,
.form-content .el-table__header-wrapper {
  width: 101%;
}

------------ end