为何存储数组的Svelte Rune无法响应元素属性更新？

你遇到的问题核心是：Svelte的$state深度响应代理仅对原生JavaScript对象/数组生效，自定义类的实例不在此覆盖范围内。

文档里提到的"simple object"指的是原生字面量对象（比如{ stringProperty: 'hi' }），而你用的是自定义类ObjectWithStringProperty的实例，这种情况下，Svelte无法追踪实例内部属性的变化，所以修改stringProperty不会触发组件更新。

解决方案 #

方案1：改用原生对象替代自定义类 #

把类实例换成原生对象，$state的深度代理就能正常追踪属性变化：

// 单独的.svelte.js文件
export let allQuestionsRune = $state([{ stringProperty: "hi" }])

后续修改代码不变，点击按钮后页面会正常更新为"new string"。

方案2：让自定义类的属性成为响应式 #

如果必须保留自定义类，需要在类内部用$state定义属性，让类本身具备响应式能力：

// 定义类时
class ObjectWithStringProperty {
  stringProperty = $state("")
  constructor(initialValue) {
    this.stringProperty = initialValue
  }
}

// 状态定义
export let allQuestionsRune = $state([new ObjectWithStringProperty("hi")])

这样修改实例的stringProperty时，Svelte就能感知到变化并更新组件。

方案3：手动触发响应（临时 workaround） #

如果不想修改类或改用原生对象，可以通过重新赋值数组元素的方式手动触发响应：

// 按钮onClick方法中
const updatedItem = allQuestionsRune[0]
updatedItem.stringProperty = "new string"
allQuestionsRune[0] = updatedItem // 重新赋值触发更新

这种方式通过数组元素的赋值操作，强制Svelte检测到变化并更新组件。

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