如何用Svelte 5 Runes优化Supabase实时订阅及资源清理？

问题梳理 #

你需要在Svelte 5中通过Supabase订阅demos表的transcripts（JSONB类型）列变更，同时希望代码贴合Runes的惯用写法，并且正确清理订阅资源。

现有方案的问题 #

1. onMount + onDestroy方案：功能可行，但手动维护订阅实例和清理逻辑的方式，不够贴合Runes的声明式风格，需要额外管理subscription变量。
2. $derived误用：$derived的设计目的是纯计算衍生值，不能在其回调内修改状态（比如给transcripts赋值），这种写法会引入不必要的副作用，违背Runes的设计原则，还可能导致重复计算或状态异常。

推荐的Runes风格实现 #

使用$effect管理订阅，它会自动处理清理逻辑，无需手动编写onDestroy，更符合Svelte 5的声明式范式：

<script>
  import { supabase } from '$lib/supabase'; // 假设你的Supabase客户端已在此处初始化
  let transcripts = $state([]);

  $effect(() => {
    // 创建Supabase实时订阅
    const subscription = supabase
      .from('demos')
      .on('UPDATE', (payload) => {
        // 响应式更新转录数据，兜底处理避免空值
        transcripts = payload.new.transcripts ?? [];
      })
      .subscribe((error) => {
        if (error) console.error('订阅失败:', error);
      });

    // 返回清理函数，组件销毁时自动执行订阅取消
    return () => {
      subscription.unsubscribe();
    };
  });
</script>

<!-- 渲染实时转录内容 -->
<div>
  {#each transcripts as item}
    <p>{item.content}</p> <!-- 假设转录项包含content字段，根据实际结构调整 -->
  {/each}
</div>

方案解析 #

• $effect的优势：$effect在组件挂载时执行订阅逻辑，返回的清理函数会在组件销毁时自动触发，无需手动维护订阅实例和销毁回调，代码更简洁。
• 响应式状态更新：直接在订阅回调中更新$state声明的transcripts，符合Svelte的响应式规则，能实时触发视图更新。
• 错误处理：在subscribe回调中捕获订阅错误，避免静默失败导致的调试困难。

关键注意事项 #

• 禁止在$derived中修改状态：$derived是纯计算工具，仅用于根据现有状态生成新值，不能包含订阅、状态修改这类副作用。
• 确保Supabase客户端初始化正确：需在组件外部完成客户端初始化，避免重复创建实例。
• 数据兜底处理：使用?? []确保payload.new.transcripts为空时，transcripts始终为数组类型，避免渲染时出现类型错误。

内容的提问来源于stack exchange，提问作者From Future