有沒有辦法告訴 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，但建議使用字符串和數字，因為它們允許在對象本身發生變化時保持身份。