早期查看野外VUE 3組成的API-css教學-PHP中文網

代碼組成

提取可重複使用的代碼

總結

可以獨立生活的一般功能，而無需與任何特定組件結合

可重複使用的功能，用於多個組件

組件中的代碼組織

請記住：這是一個正在進行的工作！

首頁

web前端

css教學

早期查看野外VUE 3組成的API

Joseph Gordon-Levitt

Apr 14, 2025 am 10:13 AM

早期查看野外VUE 3組成的API

最近，我有機會嘗試在一個真實項目中嘗試新的VUE組成API，以檢查其在哪裡可能有用以及我們將來如何使用它。

到目前為止，當我們創建一個新組件時，我們正在使用選項API。該API迫使我們通過選項將組件的代碼分開，這意味著我們需要在一個位置（數據），一個位置（計算），所有方法，一個位置（方法）（方法）等所有反應性數據（數據）等。

由於較小的組件非常方便且可讀，因此當組件變得更加複雜並處理多種功能時，它會變得痛苦。通常，與一個特定功能相關的邏輯包含一些反應性數據，計算的屬性，一種方法或其中一些。有時，它還涉及使用組件生命週鉤。這會使您在處理單個邏輯問題時不斷地在代碼中的不同選項之間跳躍。

與VUE合作時可能遇到的另一個問題是如何提取可以通過多個組件重複使用的常見邏輯。 Vue已經幾乎沒有選擇，但是所有這些都有自己的缺點（例如Mixins和Scoped-Slots）。

構圖API帶來了一種創建組件，分離代碼和提取可重複使用的代碼的新方法。

讓我們從組件中的代碼組成開始。

代碼組成

想像一下，您有一個主要組件，可以為整個VUE應用程序設置一些內容（例如NUXT中的佈局）。它處理以下內容：

設置環境
檢查用戶是否仍經過身份驗證，並將其重定向（如果沒有）
防止用戶重新加載應用程序太多次
跟踪用戶活動並在用戶在特定時間段內不活動時做出反應
使用EventBus（或窗口對象事件）在事件上聆聽

這些只是組件可以做的幾件事。您可能可以想像一個更複雜的組件，但這將達到此示例的目的。為了可讀性，我只是使用沒有實際實施的道具的名稱。

這就是組件的外觀，就像使用“選項” API：

 
  <div>
    ...
  </div>


<script>
導出默認{
  名稱：&#39;app&#39;，

  數據（） {
    返回 {
      userActivityTime out：null，
      lastuseractivity：null，
      重新載體：0
    }
  }，，

  計算：{
    Isauthenticated（）{...}
    locale（）{...}
  }，，

  手錶： {
    語言環境（value）{...}，
    等法（value）{...}
  }，，

  異步創建（）{
    const initiallocale = localstorage.getItem（&#39;locale&#39;）
    等待this.loadlocaleasync（initiallocale）
  }，，

  安裝（）{
    eventbus。 $ on（my_event，this.handlemyevent）

    this.setReloAdcount（）
    this.blockreload（）

    this.activateactivityTracker（）
    this.restactivitivitivitiveTire（）
  }，，

  beforedestroy（）{
    this.deactivateactivityTracker（）
    cleartimeout（this.useractivityTimeOut）
    eventbus。 $ off（my_event，this.handlemyevent）
  }，，

  方法： {
    activateactivityTracker（）{...}，
    blockreload（）{...}，
    deactivateactivityTracker（）{...}，
    handlemyevent（）{...}，
    async loadLocaleasync（selectedlocale）{...}
    redirectuser（）{...}
    restactivityTimeOut（）{...}，
    seti18nlocale（locale）{...}，
    setReloadcount（）{...}，
    useractivityThrottler（）{...}，
  }
}
</script>

登入後複製

如您所見，每個選項都包含來自所有功能的零件。它們之間沒有明確的分離，並且使代碼難以閱讀，尤其是如果您不是寫它的人，而您是第一次看它。很難找到使用哪種功能的方法。

讓我們再次看一下，但將邏輯問題確定為評論。這些是：

活動跟踪器
重新加載阻滯劑
認證檢查
語言環境
活動巴士註冊

  <div>
    ...
  </div>


<script>
導出默認{
  名稱：&#39;app&#39;，

  數據（） {
    返回 {
      userActivityTime out：null，//活動跟踪器
      lastuseractivity：null，//活動跟踪器
      重新載體：0 //重新加載阻滯劑
    }
  }，，

  計算：{
    Isauthentication（）{...} //身份驗證檢查
    locale（）{...} //語言環境
  }，，

  手錶： {
    語言環境（value）{...}，
    ISAUTHENTICATIC（value）{...} //身份驗證檢查
  }，，

  異步創建（）{
    const initiallocale = localstorage.getItem（&#39;locale&#39;）//
    等待this.loadlocaleasync（初始列表）//
  }，，

  安裝（）{
    eventbus。

    this.setReloAdcount（）//重新加載阻滯劑
    this.blockreload（）//重新加載阻滯劑

    this.activateactivityTracker（）//活動跟踪器
    this.resetactivityTimeOut（）//活動跟踪器
  }，，

  beforedestroy（）{
    this.deactivateactivityTracker（）//活動跟踪器
    clearTimeOut（this.useractivity time out）//活動跟踪器
    eventbus。 $ off（my_event，this.handlemyevent）//事件總線註冊
  }，，

  方法： {
    activateactivityTracker（）{...}，//活動跟踪器
    blockreload（）{...}，//重新加載阻止器
    deactivateactivityTracker（）{...}，//活動跟踪器
    handlemyevent（）{...}，//事件總線註冊
    異步LoadLocaleasync（SelectedLocale）{...} // LOCALE
    redirectuser（）{...} //身份驗證檢查
    restactivityTimeOut（）{...}，//活動跟踪器
    seti18nlocale（locale）{...}，//語言環境
    setReloAdcount（）{...}，//重新加載阻滯劑
    useractivityThrottler（）{...}，//活動跟踪器
  }
}
</script>

登入後複製

看到解開所有這些的困難是多麼困難？？

現在，想像一下您需要更改一個功能（例如活動跟踪邏輯）。您不僅需要知道哪些元素與該邏輯有關，而且即使您知道，您仍然需要在不同的組件選項之間上下跳下。

讓我們使用構圖API通過邏輯問題分開代碼。為此，我們為與特定功能相關的每個邏輯創建一個單個函數。這就是我們所說的組成函數。

 //活動跟踪邏輯
函數UseActivitivitivityTracker（）{
  const userActivityTimeout = ref（null）
  const lastuseractivity = ref（null）

  函數activateactivityTracker（）{...}
  函數deactivateactivityTracker（）{...}
  函數repetActivityTimeOut（）{...}
  功能useractivityThrottler（）{...}

  onbeforemount（（）=> {
    ActivateActivityTracker（）
    restactivityTimeOut（）
  }））

  onunmounted（（）=> {
    停用vitivativitivityTracker（）
    cleartimeout（userActivityTimeout.value）
  }））
}

登入後複製

 //重新加載阻止邏輯
功能UserEleloadblocker（上下文）{
  const ReloadCount = Ref（null）

  功能BlockReLoad（）{...}
  函數setReloadcount（）{...}

  on mounted（（）=> {
    setReloAdcount（）
    Blockreload（）
  }））
}

登入後複製

 //語言環境邏輯
功能USELOCALE（上下文）{
  異步函數loadLocaleasync（SelectedLocale）{...}
  函數seti18nlocale（locale）{...}

  觀看（（）=> {
    const locale = ...
    LoadLocaleasync（位置）
  }））

  //不需要“創建”鉤子，在設置功能中運行的所有邏輯都放在beforecreate和創建的鉤子之間
  const initiallocale = localstorage.getItem（'locale'）
  LOADLOCALEASYNC（初始列表）
}

登入後複製

 //活動巴士聽眾註冊
從“@/event-bus”導入eventbus

功能UseEventBuslistener（EventName，Handler）{
  on mounted（（）=> eventbus。
  onunmounted（（）=> eventbus。$ off（eventname，handler））
}

登入後複製

如您所見，我們可以聲明反應性數據（參考 /反應性），計算道具，方法（普通功能），觀察者（手錶）和生命週期掛鉤（OnMounted / OnunMounted）。基本上，您通常在組件中使用的所有內容。

在保留代碼的位置時，我們有兩個選擇。我們可以將其放入組件中，或將其提取到單獨的文件中。由於構圖API尚未正式存在，因此沒有關於如何處理的最佳實踐或規則。我看到的方式，如果將邏輯緊密耦合到特定組件（即它不會在其他任何地方重複使用），並且沒有組件本身就無法生存，我建議將其留在組件中。另一方面，如果一般功能可能會重複使用，我建議將其提取到單獨的文件中。但是，如果我們想將其保存在單獨的文件中，我們需要記住將功能從文件導出並將其導入到我們的組件中。

這就是我們的組件看起來像使用新創建的構圖功能：

 
  <div>
      <!-- ... -->
  </div>


<script>
導出默認{
  名稱：&#39;app&#39;，

  設置（props，context）{
    USEEVENTBUSLISTENER（my_event，handlemyevent）
    UseectivityTracker（）
    UserEleloadblocker（上下文）
    USELOCALE（上下文）

    const iSauthenticated =計算（（（）=> ...）

    觀看（（）=> {
      如果（！iSauthenticated）{...}
    }））

    函數handlemyevent（）{...}，

    函數uselocale（）{...}
    函數UseActivityTracker（）{...}
    函數useeventbuslistener（）{...}
    功能UserEleloadBlocker（）{...}
  }
}
</script>

登入後複製

這為我們提供了每個邏輯問題的一個功能。如果我們想使用任何特定問題，我們需要在新設置功能中調用相關的構圖功能。

再次想像一下，您需要改變活動跟踪邏輯的一些更改。與該功能相關的所有內容都存在於UsictivityTracker功能中。現在，您立即知道在哪裡看，然後跳到正確的位置，查看所有相關的代碼。美麗的！

提取可重複使用的代碼

在我們的情況下，事件總線聽眾註冊看起來像是我們可以在任何傾聽事件總線上的事件的組件中使用的代碼。

如前所述，我們可以將邏輯與單獨文件中的特定功能相關。讓我們將活動總線偵聽器設置移至單獨的文件中。

 // composables/useeventBuslistener.js
從“@/event-bus”導入eventbus

導出函數useeventbuslistener（eventname，handler）{
  on mounted（（）=> eventbus。
  onunmounted（（）=> eventbus。$ off（eventname，handler））
}

登入後複製

要在組件中使用它，我們需要確保我們導出我們的功能（命名或默認）並將其導入組件。

 
  <div>
    ...
  </div>


<script>
來自&#39;@/composables/useeventBuslistener&#39;的導入{useEventBusListener}

導出默認{
  名稱：“ myComponent”，

  設置（props，context）{
    USEEVENTBUSLISTENER（my_event，myEventHandled）
    USEEVENTBUSLISTENER（另一_EVENT，緬甸人）
  }
}
</script>

登入後複製

就是這樣！現在，我們可以在所需的任何組件中使用它。