用途:整理 Svelte 模板指令的使用参考,重点覆盖 @attach(Svelte 5.29+),作为 use: action 的响应式替代方案,适用于 DOM 操作、第三方库集成、提示框、画布、动态 HTML 等场景。
主要能力与要点:@attach 在依赖变化时重新执行,可通过 spread 穿透包装组件,并支持清理函数;可用 fromAction(来自 svelte/attachments)把旧式 action 转换过来。资料给出一个用 js-image-zoom 的 @attach 示例,在返回函数中执行清理。指令速查包括:{@attach} 用于 DOM 操作与第三方库,具响应式;{@html} 渲染原始 HTML 字符串;{@render} 渲染 snippet;{@const} 用于块内局部常量;{@debug} 在值变化时暂停调试器;{#each (key)} 键控迭代(务必始终加 key);svelte:window 绑定窗口事件监听。@attach 与 use: 的对比:use: 参数变化不重跑,@attach 会重跑;@attach 可组合性更强;props 可经 spread 自动传递。
使用方式与限制:@attach 需要 Svelte 5.29 及以上版本;用 fromAction 转换旧 action;附件在展开 props 时穿过包装组件;始终使用键控 each 块,不要用索引作 key;全局事件监听应使用 svelte:window/svelte:document,而非 $effect。参考文件包含 attach-patterns.md 与 other-directives.md。资料最后验证时间为 2026-03-12。未提供安装命令、收费与平台信息。