Question

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

Answer 1

如果您可以想象这种行为需要在多个组件之间重用，或者例如可以想象将其应用于{#if ...}块内的某个元素，则它可能属于一个动作。

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

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

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

1 个答案: