通过Socket IO请求修改页面内容不更新的问题

你的问题出在变量不是响应式的：用var声明的screen是普通变量，Svelte无法追踪它的变化，所以即使你在Socket IO回调里修改了它的值，页面也不会同步更新。

解决步骤： #

• 把var screen = "this";改成let screen = "this";——Svelte会将let声明的变量视为响应式变量，能自动追踪赋值操作并更新页面。
• 回调逻辑本身无需改动，替换变量声明方式即可。

修改后的代码：

<script>
  import { io } from "../src/lib/socketClient";

  let screen = "this";
  io.on("screenChange",(msg)=>{
    screen = msg.screen;
  });
</script>

<div>
  {#if screen == "this"}
    <h1>this</h1>
  {:else if screen == "that"}
    <h1>that</h1>
  {/if}
</div>

补充说明： #

Svelte的响应式系统是编译时分析实现的，只有let声明的变量（或const配合可修改的复杂类型，比如对象、数组）会被纳入响应式追踪范围。普通var变量不在这个范围内，所以修改后无法触发DOM更新。

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