svelte - Svelte 如何处理在 each 循环中更新数组中的对象

Question

下面是一个非常简单的 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>

Answer 1

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

例子:如果您在同一个方法中更改数组中的 2 个名称，则 View 只会更新一次。

如果您在没有(keying)的每个循环中使用一个组件，并且您更改一个值将表现为仅更改一个值，因此 onMount方法不会被解雇。