Svelte中向数组添加元素时#each绑定的列表无法更新问题

核心原因 #

Svelte的响应式更新仅在变量被直接赋值时触发，你在添加元素时应该是直接调用了push()、unshift()这类数组变异方法，Svelte无法自动识别这类对原数组的修改操作。而你删除元素时应该是使用了filter()等返回新数组的方法，并且直接给原数组变量赋了新值，自然能触发视图更新，这也解释了为什么删除操作会把之前未渲染的新增元素一并显示出来。

可行解决方案 #

你可以任选以下任意一种方式修复问题：

• 数组变异后新增自赋值语句触发响应式
  调用变异方法后新增一行数组变量 = 数组变量，主动通知Svelte该变量发生了变化，示例代码如下：

  function addNewItem() {
    itemList.push({ text: "新列表项" })
    // 新增以下这行即可触发更新
    itemList = itemList
  }
  

• 直接赋值新数组（更推荐）
  不使用变异方法，通过扩展运算符生成新数组后直接赋值给原变量，写法更简洁也符合不可变数据规范：

  function addNewItem() {
    itemList = [...itemList, { text: "新列表项" }]
  }
  

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