8

如果我们有一个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>

使用onMountand的例子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>
4

1 回答 1

10

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

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

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

于 2019-09-24T14:29:41.910 回答