Svelte响应式Prop不更新：动态路由组件值无法实时刷新

1. 给each循环添加稳定的key #

Svelte的{#each}依赖key追踪元素变化，Object.entries()默认迭代器如果没指定稳定key，对象结构变动时Svelte可能无法精准识别更新。修改循环代码，用变量的键名作为唯一标识：

{#each Object.entries(module_info.data.variables) as [key, value] (key)}
  <TextInput bind:value={value} />
{/each}

用(key)作为循环key，确保每个TextInput和对应变量键名绑定，variables更新时Svelte能精准同步组件值。

2. 确保循环数据源和响应式变量同步 #

如果module_info.data.variables是variables的复制值，会丢失响应式关联。要么直接用响应式变量作为循环数据源，要么通过响应式声明同步两者：

// 同步中间变量与响应式variables
$: if (variables) {
  module_info.data.variables = { ...variables };
}

或者直接循环响应式变量，跳过中间值：

{#each Object.entries(variables || {}) as [key, value] (key)}
  <TextInput bind:value={value} />
{/each}

3. 用双向绑定替代单向赋值 #

单向value={...}无法在变量更新时同步组件内部状态，双向绑定能保证数据双向同步：

• 原生input直接用bind:value：

<input type="text" bind:value={value} />

• 自定义TextInput组件需内部暴露value属性并触发input/change事件，外部同样用bind:value。

4. 验证响应式变量的更新触发 #

加日志确认variables是否随路由变化正确更新：

$: {
    variables = $config.stager.modules?.[$page.params.module];
    console.log('响应式variables更新:', variables);
}

如果日志未触发，检查$page.params.module是否响应路由变化，或$config.stager.modules是否为Svelte响应式对象（比如store导出的数据）。

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