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

前端知否發表於2019-09-12

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。一個很好的選擇是同時使用它們。不侷限於一個混合搭配，以滿足您的測試需求。