如果我们有一个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
and的例子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>