前回の演習では state が 再代入 に対してリアクティブになることを確認しましたが、それだけでなく、 ミューテーション(mutations) に対してもリアクティブです — 私たちはこれを ディープリアクティビティ(deep reactivity) と呼んでいます。

numbers をリアクティブな配列にしましょう:

let numbers = $state([1, 2, 3, 4]);

こうすると、この配列を変更するときに...

function addNumber() {
	numbers[numbers.length] = numbers.length + 1;
}

...コンポーネントが更新されます。また、代わりに配列に push することもできます:

function addNumber() {
	numbers.push(numbers.length + 1);
}

Deep reactivity は proxy を使用して実装されており、proxy に対するミューテーションは元のオブジェクトには影響しません。