Svelte #each块传递对象时组件频繁更新的原因及规范问询

一、Svelte判定组件更新的核心规则 #

Svelte采用浅比较机制判断组件是否需要更新：

• 对于字符串、数字这类原始类型，直接对比值是否相等，值不变就不会触发组件更新
• 对于对象、数组这类引用类型，对比的是内存引用地址——只要引用变了，哪怕对象内容完全一致，也会被判定为属性变化，触发组件更新流程
• 注意：生命周期钩子（beforeUpdate/afterUpdate）只要组件进入更新流程就会执行，哪怕最终DOM没有实际变化。Svelte不会全量对比DOM，只会精准更新响应式变量关联的DOM节点。

二、为什么传递整个对象时所有列表条目都会触发更新？ #

看你的代码，点击按钮执行things = things.slice(1)时，slice会返回一个新的数组引用，父组件的things响应式变量引用变化，会触发#each块的更新流程。

虽然每个thing对象的引用没有改变，但Svelte在处理#each块的更新时，会遍历所有子组件检查属性变化。此时传递给Thing组件的name属性是对象引用，Svelte会触发子组件的更新流程（进而执行生命周期钩子），不过因为对象内容没有变化，最终DOM不会有任何修改。

另外补充：你的Thing组件里const emoji = emojis[name.name];不是响应式声明，如果后续name.name变化，emoji不会自动更新，应该改成$: emoji = emojis[name.name];来让它响应式变化。

三、传递对象给组件是不是不良实践？ #

完全不是，只是要注意使用场景：

• 如果需要用到对象的多个属性，传递整个对象会让代码更简洁，Svelte也能追踪对象内部属性的响应式变化（比如修改thing.name时，子组件会自动更新）
• 避免不必要的引用变化：尽量修改现有对象的属性，而不是每次更新都创建新的对象引用（比如不要用things = [...things]这种方式触发更新，除非真的需要新数组）
• 如果只用到对象的某一个属性，单独传递该属性会更高效——比如传递name={thing.name}而不是整个thing，这样Svelte的浅比较会更精准，减少不必要的更新流程触发

修正后的代码示例 #

App.svelte

<script>
    import Thing from './Thing.svelte';

    let things = [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'carrot' },
        { id: 4, name: 'doughnut' },
        { id: 5, name: 'egg' }
    ];

    function handleClick() {
        things = things.slice(1);
    }
</script>

<button on:click={handleClick}>
    Remove first thing
</button>

{#each things as thing (thing.id)}
    <Thing name={thing} />
{/each}

Thing.svelte

<script>
    import { beforeUpdate, afterUpdate } from 'svelte';
    
    const emojis = {
        apple: '🍎',
        banana: '🍌',
        carrot: '🥕',
        doughnut: '🍩',
        egg: '🥚'
    };

    export let name;
    // 用$:声明响应式变量，确保name变化时emoji自动更新
    $: emoji = emojis[name.name];

    beforeUpdate(() => {
        console.log('before updating ' + name.id)
    });
    
    afterUpdate(() => {
        console.log('after updating ' + name.id)
    });
</script>

<p>{emoji} = {name.name}</p>

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