Svelte 如何在每个循环中处理更新数组中的对象答案

【问题标题】：How does Svelte handle updating an object in an array within an each loopSvelte 如何在每个循环中处理更新数组中的对象
【发布时间】：2021-02-20 22:21:32
【问题描述】：

下面是一个非常简单的 Svelte 组件。

当您单击按钮时，它会更新 pages[2].name。 Svelte 如何处理这个问题？它是否重新评估所有 3 个 DIV？或者它是否知道只修改第 3 个 DIV 的数据，因为分配给 pages[2].name？

<script>
    let pages = [{name:'Adam'}, {name:'Barry'}, {name:'Charlie'}];

    function updateName(){
 pages[2].name = 'New Person';
}
</script>

{#each pages as page}
<div>{page.name}</div>
{/each}
<button on:click={updateName}>Update Name</button>

【问题讨论】：

标签： svelte

【解决方案1】：

简短回答：在创建 div 后，如果您更改一个值，它将评估数组中的所有项目。

示例：如果您在同一方法内更改数组中的 2 个名称，则视图只会更新一次。

如果您在没有 (keying) 的情况下在 each 循环内使用组件，并且您更改值的行为将表现为仅更改了值，因此不会触发 onMount 方法。

【讨论】：