Svelte异步更新外部文件变量时响应式语句未触发问题

核心原因：Svelte响应式的作用边界 #

Svelte的响应式语句（$:）是编译时生效的特性，它只对组件内部声明的变量（比如你的let y）生效。Svelte编译组件时，会把内部变量转换成带响应式追踪的存储结构，一旦变量值变化，就会自动触发关联的响应式语句。

但从外部模块（test.mjs）导入的普通变量x不在Svelte的编译范围内——Svelte没法修改外部模块的代码逻辑，自然没法给这个变量加上响应式追踪。所以你在外部修改x的值时，Svelte的响应式系统完全感知不到变化，也就不会触发对应的$: console.log("x:", x)语句。

对应你的代码表现 #

从控制台输出就能清晰看到差异：

• 初始加载时，x和y都是unset，两条响应式语句各执行一次
• 外部模块的initx完成后修改了x，但Svelte没感知到，没有输出x: set
• 内部的inity完成后修改y，Svelte追踪到值变化，输出了y: set

解决办法：用Svelte可写存储（Writable Store） #

如果要让外部模块的变量能触发组件的响应式逻辑，必须用Svelte的Store API，具体是writable类型的存储：

1. 修改test.mjs，用writable包装变量：

import { writable } from 'svelte/store';

export const x = writable("unset");

async function initx() {
    await new Promise(r => setTimeout(r, 100));
    console.log("initx timeout done");
    x.set("set"); // 用store的set方法更新值
}

initx();

2. 在TestApp.svelte中用$前缀自动订阅store：

<script>
import { x } from './test.mjs';

let y = "unset";

async function inity() {
    await new Promise(r => setTimeout(r, 100));
    console.log("inity timeout done");
    y = "set";
}
inity();

// 用$前缀自动订阅store，响应式语句可追踪变化
$: console.log("x:", $x);
$: console.log("y:", y);

</script>

<p>Hello world</p>

这样修改后，外部模块更新x的store值时，组件里的$x会自动同步变化，触发对应的响应式日志。

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