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

Question

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

使用use:action
使用 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 ...} 块内的元素（例如），那么它可能属于动作。

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

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

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

When to use Svelte's use:action vs onMount and onDestroy?

javascript

svelte

svelte-component