構建Vue.js組件的10個技巧

1. 組件能夠在全局或本地加載

Vue.js提供了兩種加載組件的方法：一種在Vue實例全局，另外一種在組件級別。兩種方法都有其自身的優勢。

全局加載組件使其能夠從應用程序中的任何模板（包括子組件）訪問。它減小了將全局組件導入子組件的次數。

此外，若是全局加載組件，將沒法得到Vue註冊組件錯誤--「did you register the component correctly?」。注意，謹慎加載全局組件。它會使您的應用程序膨脹，即便它未被使用，它仍將包含在Webpack構建的初始bundle中。

在本地加載組件使您可以隔離組件並僅在必要時加載它們。與Webpack結合使用時，只有在使用組件時纔去延遲加載組件。這使您的初始應用程序文件大小更小，並減小了初始加載時間。

2. 延遲加載/異步組件

使用Webpack的動態導入延遲加載組件。 Vue支持在渲染時和代碼拆分時延遲加載組件。這些優化容許您的組件代碼僅在須要時加載，從而減小您的HTTP請求，文件大小，並自動爲您提供性能提高。關於此功能的重要部分是它適用於全局加載和本地加載的組件。

全局加載異步組件：

本地加載異步組件：

3. 必須的屬性

有不少方法能夠爲組件建立props。您能夠傳遞表示prop名稱的字符串數組，也能夠傳入一個帶有鍵做爲prop名稱和配置對象的對象。

使用基於對象的方法容許您爲單個 prop 修改一些配置，好比設置是否 required。required 的值是true 或 false。若是在使用組件時未設置prop，true將拋出錯誤，false（默認值）表示不是必須的，不拋出錯誤。

在共享組件給他人或本身使用時，準確使用 required 配置是很好的，代表這個prop很重要。

4. 使用$emit觸發自定義事件

子組件和父組件之間的通訊能夠經過使用組件內置函數 $emit 發出自定義事件來完成。

$ emit函數接收 事件名稱的字符串 和 可選的值兩個參數。要監聽事件，只需將「@eventName」添加到發出事件的組件中（即子組件使用的地方），而後傳入事件處理方法。這是保持單一數據流，並使數據從子組件流向父組件的好方法。

5. 從邏輯上分解組件

提及來容易作起來難，如何根據一個邏輯來劃分一個組件？

分解組件的第一種方法是基於數據變化。若是數據在組件的一個部分中不斷變化，而在其餘部分中不變，那麼變化的組件那部分應該單獨抽取出來做爲獨立組件。

緣由是若是您的數據/HTML在模板的一個部分中不斷變化，則須要檢查和更新整個組件。可是，若是將變化的HTML放入其本身的組件中，並使用props傳入數據，則只有該組件在其props更改時纔會更新。

從邏輯上分解組件的另外一種方法是可重用性。若是您擁有在整個應用程序中重複使用的HTML，圖形或功能，如按鈕，複選框，徽標動畫，號召性用語或具備簡單更改文本的圖形 - 這將是一個很好的候選，抽取到一個新的組件，能夠被重用。可重用組件具備易於維護的隱藏優點，由於您只須要更改一個組件，而沒必要在代碼庫中找到替換和更改多個地方。

6. 驗證您的props

不使用字符串數組來定義props，而是使用容許配置每一個prop的對象。兩種很是有用的配置項目是「類型」和驗證器。

使用類型參數，Vue將自動鍵入檢查您的prop值。例如，若是咱們指望一個Number prop但收到一個String，你會在控制檯中收到相似這樣的警告：

[Vue warn]: Invalid prop: type check failed for prop 「count」. Expected Number

對於更復雜的驗證，咱們能夠將函數傳遞給validator屬性，該屬性接收 prop值 做爲參數並返回true或false。這很是強大，由於它容許咱們針對傳遞給該特定屬性的值編寫自定義驗證。

7. 多個props綁定和覆蓋

若是你的組件有多個props，好比說5，6，7或更多，那麼連續設置每一個prop的綁定可能會變得很繁瑣。幸運的是，有一種快速方法能夠爲組件上的全部屬性設置綁定，這就是經過使用v-bind綁定對象而不是單個屬性。

使用對象綁定的另外一個好處是能夠覆蓋對象的任何綁定。

在咱們的例子中，若是咱們在 person 對象中將 isActive 設置爲false，那麼咱們能夠對實際person 組件執行另外一個綁定，並將 isActive 設置爲true而不覆蓋原始對象。

8. 修改組件中的props

在某些狀況下，您可能但願修改從prop傳入的值。可是，這樣作會給你一個警告「Avoid mutating a prop directly」，不讓直接修改屬性。而是使用prop值做爲本地數據屬性的默認值。這樣作將使您可以查看原始值，但修改本地數據不會更改prop值。

有一個好處。使用此方法，您的本地數據屬性不會對prop值產生影響，所以對父組件的prop值的任何更改都不會更新您的本地值。可是，若是您確實須要這些更新，則可使用計算屬性組合值。

9. 測試工具中 Mount vs Shallow Mount

在Vue測試工具中有兩種方法能夠建立和啓動組件。一個是mount，另外一個是shallow mount。二者都有本身的優勢和缺點。

當您想要在組件及其子組件之間進行相互依賴的測試時，mout技術很是有效。容許您測試父組件是否按預期正確地與其子組件交互。相反，正如其名稱所暗示的那樣，shallow mount技術實例化並僅渲染父組件，而徹底隔離而忽略其任何子組件。也就是說，mount會渲染全部父子組件，shallow mount僅僅渲染父組件。由於有時候只須要測試父組件的一些特性。

那麼哪一種方法更好？隨你（由你決定。您選擇的策略應取決於您可衡量的目標。試圖經過徹底隔離來自行測試組件，shallow mount方法效果很好。須要處理具備要確保通訊的子組件的組件，那就使用mount。一個很好的選擇是同時使用它們。不侷限於一個混合搭配，以知足您的測試需求。

10. Vue CLI的力量

Vue CLI 是一個功能強大的命令行界面，容許開發人員快速利用大量能夠加快工做流程的功能。

一個我使用不少的功能是，運行 vue serve，後邊跟上一個Vue組件的路徑。這樣作的好處在於，您能夠徹底開發一個獨立的組件，同時也能夠對組件進行熱從新加載和迭代，無需臨時將新組件導入頁面進行開發。

在團隊工做時，您可能須要提取一個特定組件並與其餘組人共享。這就引出了 Vue CLI 的下一個功能：將Vue組件導出爲庫的能力。調用時，Vue將自動構建單個文件組件，將CSS移動到外部CSS文件（可選，您也能夠內聯），以及建立 UMD 和 Common .js文件以導入到其餘JS項目中。

---

相關文章：

Vue.js應用性能優化一

Vue.js應用性能優化二

Vue.js應用性能優化三

如何使用Vue.js渲染JSON中定義的動態組件