为何解构含状态的类时必须使用$derived？（Svelte 5）

1. 解构响应式状态必须用$derived的原因 #

Svelte 5的响应式追踪依赖对$state包装值的属性访问行为，核心逻辑如下：

• 直接解构let { cnt } = counter1：只是一次性读取当前属性值，不会建立任何响应式依赖，后续counter1.cnt变化时，解构出的变量不会同步更新。
• $state(counter1)：仅将整个实例包装为响应式引用，但解构时依然是读取一次包装对象的当前属性值，无法追踪实例内部属性的变化。
• $derived(counter1)：会创建一个依赖于counter1所有属性的派生值，当实例的任何属性（比如cnt）变化时，派生值会重新计算，解构后的变量会自动同步更新。

注意：$derived生成的是只读派生值，无法直接赋值修改。如果需要修改状态，必须直接操作源对象（比如counter1.cnt = 20）。如果想兼顾解构语法和修改能力，可以直接绑定源属性：

<script>
  import { counter1 } from './test.svelte';
  let cnt = $derived(counter1.cnt);
  const updateCnt = (val) => counter1.cnt = val;
</script>

2. 类方法直接绑定onclick失效的原因 #

这是JavaScript的this绑定问题：将counter1.init直接作为函数传递给onclick时，方法内部的this会丢失与counter1实例的绑定，调用时this.cnt会变为undefined，导致方法失效。

解决方法有两种：

• 用箭头函数包裹（即你测试中的init1/inc1写法）：

  <button onclick={() => counter1.init()}>init1 works</button>
  

• 在类内部提前绑定this，或用箭头函数定义方法：

  class Counter {
      cnt = $state(1);
      constructor(start: number) {
          this.cnt = start;
          // 手动绑定this
          this.init = this.init.bind(this);
          this.inc = this.inc.bind(this);
      }
      // 或直接用箭头函数定义，自动绑定this
      inc = () => {
          console.log('inc before', this.cnt);
          this.cnt += 1;
          console.log('inc after', this.cnt);
      }
      init = () => {
          console.log('init before', this.cnt);
          this.cnt = 100;
          console.log('init after', this.cnt);
      }
  }
  

  改造后onclick={counter1.init}即可正常生效。

3. 类中$state必须在属性定义时初始化的原因 #

Svelte 5的$state是编译器宏，只能在组件顶层作用域或类字段初始化器中使用——编译器需要在编译阶段识别$state语法，将其转换为响应式属性。

如果在构造函数中写this.cnt = $state(start)，编译器无法识别该位置的$state，会将其当作普通函数调用，无法创建响应式属性；同时类字段的初始化逻辑会在构造函数执行前完成，构造函数的赋值会直接覆盖类字段的初始值，导致响应式失效。

正确写法就是你当前使用的方式：先在类字段用$state定义响应式属性，再在构造函数中赋值覆盖初始值：

class Counter {
    // 编译器识别此处的$state，创建响应式属性
    cnt = $state(1);
    constructor(start: number) {
        // 对已有的响应式属性赋值
        this.cnt = start;
    }
}

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