Svelte tooltip 更新机制：函数 vs 直接传入内容的区别？

Question

<script>
    import tippy from 'tippy.js';

    let content = $state('Hello!');

    function tooltip(node, content) {
        $effect(() => {
            console.log(content)
            const tooltip = tippy(node, {content});

             return tooltip.destroy;
        });
    }
</script>

<input bind:value={content} />

<button use:tooltip={content}>
    Hover me
</button>

本人 svelte 小白, 这是我在实现 svelte 官网上的一个案例时,直接传入 content 给 tooltip 函数的写法

这种写法在 content 更新时, tooltip 中的内容不会更新

官方的写法是将 content 包装成函数传入, 解释如下:

We’re passing in a function, rather than the options themselves, because the tooltip function does not re-run when the options change.

为什么直接传入 content 的时候,在 content 更新时不会更新 tooltip

同时为什么使用函数时会更新呢

Answer 1

直接将content传递给tooltip函数会让tooltip的内容在content更新时不会自动更新。这是因为这传递的是一个静态值，而不是一个动态的函数。当你直接将content作为参数传入tooltip函数时，Tippy.js创建的tooltip实例只会在第一次初始化时读取这个值。之后即使content的值发生变化，tooltip实例并不会重新读取这个值，因为它没有被告知去更新。
你可以将content包装成一个函数传入。当tooltip被触发时，它会调用这个函数，从而获取最新的内容：

function tooltip(node, getContent) {
    $effect(() => {
        const tooltip = tippy(node, { content: getContent });
        return tooltip.destroy;
    });
}