何时使用 Svelte 的 use:action 与 onMount 和 onDestroy？

Question

如果我们有一个Tooltip类需要实例化一个实例，更新该实例，并在组件安装、更新和销毁时同步销毁该实例（如下面的代码所示），似乎有两种模式为了做到这一点。

1. 使用 use:action
2. 使用onMount和onDestroy

该use:action方法看起来更简洁，但除此之外，这两种方法之间是否存在任何潜在差异，从而在某些情况下使一种方法优于另一种方法？

使用示例use:action：

<script>
  import Tooltip from './tooltip'

  export let text = ''

  function initTooltip(node, text) {
    const tooltip = Tooltip(node)
    tooltip.text = text
    return {
      update(text) {
        tooltip.text = text
      },
      destroy() {
        tooltip.destroy()
      }
    }
  }
</script>

<div use:initTooltip={text}>
  <slot></slot>
</div>

使用onMount和的示例onDestroy：

<script>
  import Tooltip from './tooltip'
  import { onMount, onDestroy } from 'svelte'

  export let text = ''

  let node
  let tooltip

  onMount(() => {
    tooltip = Tooltip(node)
    tooltip.text = text
  })

  $: if (tooltip && tooltip.text !== text) {
    tooltip.text = text
  }

  onDestroy(() => {
    if (tooltip) {
      tooltip.destroy()
    }
  })
</script>

<div bind:this={node}>
  <slot></slot>
</div>

Answer 1

如果它是您可以想象需要在多个组件之间重用的行为，或者如果它是您可以想象应用于{#if ...}块内元素的东西（例如），那么它可能属于一个动作。

它是“属于”组件本身的东西，而不是一个特定的元素，那么它可能更像是一个生命周期的东西。

在这种情况下，我的倾向可能是使用一个动作。