開發VUE使用第三庫，發現有bug怎麼辦？

qfkobe發表於2018-06-06
Vue

寫在前面

本文只針對使用vue技術棧，進行討論。

正文

使用vue技術棧開發，難免會使用第三庫，這大大提高了我們開發的效率。然而，這是第三方庫有bug怎麼辦？

既然有bug，就是現有功能沒有達到預想效果。除了，等作者更新之外有沒有其他方法解決？作為有作為的青年，當然不能坐以待斃咯。

第一步

閱讀第三方庫原始碼，怎麼閱讀這裡就不要展開。閱讀原始碼，找不問題所在。

第二部

找到了問題所在，怎麼解決，給作者提bug？

恩~ 這個想法不錯。但是，我們其他辦法解決。

既然程式碼存在bug，我們可以重寫有bug的程式碼。

沒有錯，就是重寫程式碼。vue在提供了extends和mixins提供重寫程式碼的方式。關於extends和mixins可以閱讀之前的一篇文章：vue mixins和extends的妙用。

舉個例子：使用mint-ui Swipe元件過程中發現存在的bug

import { 
 Swipe
  } from 'mint-ui'export default { 
 components: { 
   imageSwipe: { 
     extends: Swipe,      watch: { 
       defaultIndex (val) { 
         this.reInitPages()        
  }      
  }    
  }  
  } 
  }複製程式碼

上面程式碼的做法就是，定義一個imageSwipe，繼承mint-ui的Swipe元件，加一個watcher。

這時候使用imageSwipe時，props、event和slots與mint-ui的Swipe元件是一樣的。

<
image-swipe>
<
/image-swipe>
複製程式碼

有上面重寫元件的思路，基本上可以開拓了一片新大陸，說的有點誇張， 哈哈哈~

寫在後面

假設，元件中巢狀為暴露出來的元件，這時沒有辦法從元件引入，可以在原有元件的基礎上重寫、繼承之後，開發出新的功能，不一定修復存在的bug。

import { 
 Table
  } from 'element-ui'export default { 
 extends: Table.components.TableHeader
  }複製程式碼

以上是重寫Table中的tableHeader元件，tableHeader元件無法從element-ui中獲取，通過Table.components.TableHeader去獲取。

本文提供一種解決在引用第三庫存在bug的解決方案，僅供參考。如果不對，請指正！

來源：https://juejin.im/post/5b15ea29f265da6e4d5af504

相關文章