Svelte：如何触发子组件中{#each}循环的更新？

问题根源 #

Svelte的响应式是靠赋值操作触发的。像push()这种只修改数组内容、不改变数组引用的操作，Svelte监测不到，自然不会通知子组件更新。单个变量能正常更新，是因为你对变量做了赋值操作（比如inputValue = ''），触发了响应式机制。

直接有效的解决办法 #

办法1：push后手动触发响应式 #

在调用push()之后，给数组重新赋一遍值（哪怕是同一个数组），就能触发Svelte的响应式更新：

function addNote() {
  notes.push(inputValue);
  // 关键：手动触发响应式检测
  notes = notes;
  inputValue = '';
}

办法2：用扩展运算符生成新数组 #

不用push()，直接通过扩展运算符创建新数组并赋值，天生就能触发响应式：

function addNote() {
  notes = [...notes, inputValue];
  inputValue = '';
}

办法3：用Store管理数组（适合多组件共享数据场景） #

如果数组需要在多个组件间共享，用Svelte的writable Store会更省心，它会自动监听数组变化并通知所有订阅的组件：

// 父组件中创建Store
import { writable } from 'svelte/store';
export const notes = writable([]);

// 添加元素时调用update方法
notes.update(n => [...n, inputValue]);

// 子组件中订阅使用Store
import { notes } from './parent.js';

为啥之前的尝试无效？ #

• bind:传递的是数组引用，但子组件的{#each}不会主动检测数组内容变化，必须等父组件触发响应式更新才会同步。
• $: array语句是监听变量的赋值变化，push()没有改变数组的引用，所以这个语句不会触发子组件的重新渲染。

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