Svelte 5嵌套 reactivity问题：自定义对象无法触发$derived更新

云原生阿岚

2026-6-12

Svelte 5中自定义类实例的响应式数组更新问题解决方法

Svelte 5的响应式系统对普通对象/数组的属性变更追踪是自动的，但自定义类实例的内部属性默认不会被自动代理，所以直接对类里的数组执行push操作时，$derived声明的变量感知不到变更。以下是几种保留自定义Meet类的解决思路：

1. 把类内部数组改成Svelte响应式变量

在Meet类的构造函数里，用$state()包裹数组属性，这样数组的任何修改（包括push）都会被Svelte的响应式系统追踪：

class Meet {
  constructor() {
    this.events = $state([]);
  }
}

之后不管是直接调用STATE.meet.events.push()，还是通过类的方法修改数组，$derived的events1都会实时更新。

2. 修改数组后手动触发响应式更新

如果没办法修改Meet类的内部实现，可以在修改数组后，手动通知Svelte系统实例发生了变更：

// 方式一：重新赋值触发更新
STATE.meet.events.push(newEvent);
STATE.meet = STATE.meet; // 让响应式系统感知到实例引用“变化”

// 方式二：用Svelte的$invalidate API直接通知
import { $invalidate } from 'svelte';
STATE.meet.events.push(newEvent);
$invalidate(STATE.meet);

3. 在类中封装数组修改方法，内部触发更新

给Meet类添加专门的数组修改方法，在方法内部确保触发响应式通知。如果用了$state包裹数组，直接修改就行；如果没用到，就手动调用$invalidate：

class Meet {
  constructor() {
    this.events = [];
  }

  addEvent(event) {
    this.events.push(event);
    $invalidate(this); // 通知系统实例属性已变更
  }
}