有没有办法告诉 Svelte 不要回收组件？

Question

我不知道标题是否超级准确，想不出更好的解释方式。

假设我们有一个 model：

let model = [
  {
    "id": 0,
    "title": "Apple"
  },
  {
    "id": 1,
    "title": "Orange"
  },
  {
    "id": 2,
    "title": "Tomato"
  },
  {
    "id": 3,
    "title": "Avocado"
  }
]

我们这样渲染：

{#each model as item}
    <Item {...item}></Item>
{/each}

在Item组件中，当组件被安装和销毁时，我们打印到控制台：

<script>
    import {onMount, onDestroy} from 'svelte'
    
    export let id
    export let title

    onMount(() => {
        console.log('Mounted: ' + title)
    })
    onDestroy(() => {
        console.log('Destroyed: ' + title)
    })

</script>

<div id={id}>{title}</div>

我们还有一个按钮，它从 model 中删除“Orange”元素：

function deleteOrange() {
    model.splice(1, 1)
    model = model // I don't know if this is the correct way to force an update
}
    
// ...

<input on:click={deleteOrange} type="button" value="Delete Orange">

按下按钮时，Orange 组件会从 DOM 中消失，但控制台显示：

"Destroyed: Avocado"

有没有办法告诉 Svelte 销毁“橙色”组件，而不是销毁“鳄梨”并移动道具以匹配 model？

苗条的回复：

https://svelte.dev/repl/f22b37cb88c449118ff76bb5a82c296e?version=3.48.0

Answer 1

只需在each循环中添加一个(key)即可：

{#each model as item (item.id)}
    <Item {...item}></Item>
{/each}

这将确保正确跟踪 DOM 元素。 根据 Svelte 文档：

如果提供了一个关键表达式——它必须唯一地标识每个列表项——Svelte 将在数据更改时使用它来区分列表，而不是在最后添加或删除项目。 密钥可以是任何 object，但建议使用字符串和数字，因为它们允许在对象本身发生变化时保持身份。