Svelte reactivity类成员的更改不会反映在UI上

<script>
  class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  }

  let person = new Person('Alice', 30);

  function updateAge() {
    person.age += 1; // 直接修改类成员属性
  }
</script>

<p>{person.name} is {person.age} years old.</p>
<button on:click={updateAge}>Increase Age</button>

<script>
  class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  }

  let person = new Person('Alice', 30);

  function updateAge() {
    person.age += 1;
    person = { ...person }; // 重新赋值顶层变量
  }
</script>

<p>{person.name} is {person.age} years old.</p>
<button on:click={updateAge}>Increase Age</button>

<script>
  import { writable } from 'svelte/store';

  class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  }

  const personStore = writable(new Person('Alice', 30));

  function updateAge() {
    personStore.update(person => {
      person.age += 1;
      return person;
    });
  }
</script>

<p>{$personStore.name} is {$personStore.age} years old.</p>
<button on:click={updateAge}>Increase Age</button>

<script>
  class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  }

  let person = new Person('Alice', 30);

  person = new Proxy(person, {
    set(target, property, value) {
      target[property] = value;
      person = { ...target }; // 重新赋值顶层变量
      return true;
    }
  });

  function updateAge() {
    person.age += 1;
  }
</script>

<p>{person.name} is {person.age} years old.</p>
<button on:click={updateAge}>Increase Age</button>