求助：Svelte无法检测响应式数据变化的问题排查

开发者阿泽

2026-4-28

Svelte响应式不更新？问题出在store的更新方式上！

嘿，我一眼就瞅出来问题所在了——你直接修改了writable store的属性，但这根本不是Svelte store的正确更新姿势，自然触发不了页面的响应式更新。

为啥你的代码没效果？

在stream.js里你写了这段：

room_data.board_number = 7;

但room_data不是普通的JavaScript对象哦，它是Svelte的writable store实例。直接给它加属性或者改属性，Svelte的响应式系统根本感知不到，页面上绑定的$room_data.board_number当然不会跟着变啦。

两种正确的更新方法

Svelte给store提供了专门的更新方法，用这俩就行：

1. 用`set`直接替换整个对象

如果你明确知道新的完整数据结构，直接用set方法把整个对象传进去：

import { writable } from 'svelte/store'
export var room_data = writable({
  board_number: -1,
});
setTimeout(function() {
  room_data.set({ board_number: 7 }); // 这里是关键！
  console.log('数据已更新');
}, 2000);

2. 用`update`修改部分属性

如果只是想改对象里的某个属性，不想重新写整个对象，update方法更合适——它会接收当前的store值，你在回调里修改后返回新值就行：

import { writable } from 'svelte/store'
export var room_data = writable({
  board_number: -1,
});
setTimeout(function() {
  // 方式一：直接修改当前对象（简单直接）
  room_data.update(current => {
    current.board_number = 7;
    return current;
  });

  // 方式二：用展开运算符创建新对象（更符合immutable规范，推荐）
  // room_data.update(current => ({
  //   ...current,
  //   board_number: 7
  // }));

  console.log('数据已更新');
}, 2000);