Svelte中hover列表项触发不必要响应性的规范实现方案

核心思路是将临时UI交互状态和源业务数据解耦，避免修改源数组对象触发无关响应式更新，以下两种方案均符合Svelte设计范式，且完整保留数组增删改的动态响应能力。

方案1：独立存储交互状态（通用场景推荐） #

单独使用变量存储hover状态，完全不侵入源数组对象，hover状态变更不会触发任何依赖源数组的响应式逻辑。

<script>
    let things = [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'carrot' },
        { id: 4, name: 'doughnut' },
        { id: 5, name: 'egg' },
    ];
    // 独立存储当前悬浮项的唯一标识，不修改源数据
    let hoveredId = null;
    
    function makePretty(somethings) {
        const prettyThings = somethings.map(thing => thing.name).join(' ');
        console.log('仅在things数组本身变更时触发:', prettyThings);
        return prettyThings;
    }
    
    $: prettyThings = makePretty(things)
</script>

<ul>
{#each things as thing (thing.id)}
    <li 
        class:hover={hoveredId === thing.id}
        on:mouseenter={() => hoveredId = thing.id}
        on:mouseleave={() => hoveredId === thing.id && (hoveredId = null)}
    >
        {thing.name}
    </li>
{/each}
</ul>

<style>
    .hover {
        background-color: cyan;
    }
</style>

方案特性：

• 源数据完全纯净，不会混入临时UI状态
• 由于each块使用thing.id作为key，数组增删、排序、修改条目时，hover状态不会错位
• 扩展性强，如需支持多行hover，仅需将hoveredId替换为Set类型存储id集合即可
• 状态变更仅触发关联DOM更新，无多余响应式开销

方案2：纯CSS实现（仅样式修改场景最优） #

如果hover效果仅修改元素样式，不需要在JS逻辑中获取当前悬浮项，可直接使用CSS原生:hover伪类实现，无任何JS运行时开销：

<script>
    let things = [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'carrot' },
        { id: 4, name: 'doughnut' },
        { id: 5, name: 'egg' },
    ];
    
    function makePretty(somethings) {
        const prettyThings = somethings.map(thing => thing.name).join(' ');
        console.log('仅在things数组本身变更时触发:', prettyThings);
        return prettyThings;
    }
    
    $: prettyThings = makePretty(things)
</script>

<ul>
{#each things as thing (thing.id)}
    <li>
        {thing.name}
    </li>
{/each}
</ul>

<style>
    li:hover {
        background-color: cyan;
    }
</style>

注意：该方案无法在JS中感知当前悬浮的项，仅适合纯样式交互场景。

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