javascript - 什么时候使用 Svelte 的 use :action vs onMount and 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 ...} block 内的元素(例如) , 那么它可能属于一个 Action 。

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

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