一、對于點擊后請求時間過長的按鈕

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

解決：

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

等待時間過長用戶體驗降低：可以加個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 1000sizes = ['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

轉載于:https://www.cnblogs.com/Walker-lyl/p/9415592.html

總結

以上是生活随笔為你收集整理的bug最后汇总-2018/08/03的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。