Svelte 模板语法：深入理解 {@attach} 指令-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00815/article/details/148323351

Svelte 模板语法：深入理解 {@attach} 指令

svelte 网络应用的赛博增强。项目地址: https://gitcode.com/gh_mirrors/sv/svelte

什么是 {@attach} 指令

在 Svelte 5.29 及更高版本中，引入了一个强大的新特性：{@attach} 指令。这个指令允许开发者在元素挂载到 DOM 或内部状态更新时执行特定的函数逻辑。

{@attach} 的核心特点是：

它会在元素挂载时自动执行
当函数内部读取的状态发生变化时，它会重新执行
可以返回一个清理函数，在重新运行前或元素从 DOM 移除时执行

基本用法示例

让我们看一个最简单的 {@attach} 使用示例：

<script>
    function myAttachment(element) {
        console.log(`元素 ${element.nodeName} 已挂载`);
        
        return () => {
            console.log('执行清理操作');
        };
    }
</script>

<div {@attach myAttachment}>这是一个示例元素</div>

当这个 div 元素挂载到 DOM 时，控制台会输出日志；当组件销毁时，清理函数会被调用。

附件工厂模式

在实际开发中，更常见的模式是使用"附件工厂"——一个返回附件函数的函数。这种模式特别适合创建可复用的行为：

<script>
    import tippy from 'tippy.js';
    
    let tooltipContent = $state('默认提示内容');

    function createTooltip(content) {
        return (element) => {
            const instance = tippy(element, { content });
            return () => instance.destroy();
        };
    }
</script>

<input bind:value={tooltipContent} />

<button {@attach createTooltip(tooltipContent)}>
    悬停查看提示
</button>

这个例子展示了如何创建一个动态更新的 tooltip。当 tooltipContent 变化时，旧的 tooltip 会被销毁，新的会被创建。

内联附件

对于简单的场景，可以直接内联定义附件函数：

<canvas
    width={32}
    height={32}
    {@attach (canvas) => {
        const ctx = canvas.getContext('2d');
        
        $effect(() => {
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        });
    }}
></canvas>

注意这里嵌套的 $effect 和 {@attach} 的区别：外层附件只在初始化时运行一次，而内层 effect 会在 color 变化时重新执行。

组件中的附件传递

{@attach} 也可以用于组件，通过 Symbol 类型的 prop 传递附件：

<!-- Button.svelte -->
<script>
    let { children, ...props } = $props();
</script>

<button {...props}>
    {@render children?.()}
</button>

<!-- App.svelte -->
<script>
    import Button from './Button.svelte';
    
    function createTooltip(content) {
        return (element) => {
            /* tooltip 实现 */
        };
    }
</script>

<Button {@attach createTooltip('提示内容')}>
    带提示的按钮
</Button>

这种模式非常适合创建可组合的 UI 组件。

控制附件重新执行的时机

默认情况下，{@attach} 是完全响应式的，任何依赖变化都会导致重新执行。对于性能敏感的场景，可以通过函数包装来优化：

function optimizedAttachment(getData) {
    return (node) => {
        // 昂贵的初始化操作
        setupExpensiveStuff(node);
        
        $effect(() => {
            // 只有数据变化时才更新
            updateContent(node, getData());
        });
    };
}