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

【问题标题】：When to use Svelte's use:action vs onMount and onDestroy?何时使用 Svelte 的 use:action 与 onMount 和 onDestroy？
【发布时间】：2019-09-24 22:29:41
【问题描述】：

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

使用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>

【问题讨论】：

你的tooltip是js文件中的组件还是函数？
@voscausa, Tooltip 是 js 文件中的一个类。调用Tooltip(node) 会将一些事件侦听器附加到该节点并返回一个具有.destroy() 方法的实例，调用该方法时会删除这些事件侦听器。

标签： javascript svelte svelte-component

【解决方案1】：

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

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

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

【讨论】：

知道了。谢谢，里奇！