早期查看野外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>

就是这样！现在，我们可以在所需的任何组件中使用它。