面试题：Svelte动态样式的复杂应用场景

Question

在一个电商商品展示页面，商品列表中的每个商品有不同的价格区间。当价格小于100时，商品卡片背景色为绿色；价格在100到300之间时，背景色为黄色；价格大于300时，背景色为红色。请使用Svelte的动态样式特性实现该功能，并且要求样式能够根据商品价格实时更新，同时考虑性能优化，避免不必要的重渲染。

Answer 1

<script>
    let products = [
        { id: 1, price: 50 },
        { id: 2, price: 150 },
        { id: 3, price: 400 }
    ];

    function getBackgroundColor(price) {
        if (price < 100) {
            return 'green';
        } else if (price >= 100 && price <= 300) {
            return 'yellow';
        } else {
            return'red';
        }
    }
</script>

<ul>
    {#each products as product}
        <li style:background-color={getBackgroundColor(product.price)}>{product.price}</li>
    {/each}
</ul>

性能优化说明

1. 函数抽取：将颜色判断逻辑抽取到 getBackgroundColor 函数中，这样在模板中调用函数，Svelte 会在依赖（即 product.price）变化时才重新计算函数结果，避免了不必要的重渲染。
2. 减少响应式变量：尽量减少使用响应式变量，这里直接在 each 块中处理每个商品的样式，没有引入过多不必要的响应式数据，从而减少重渲染范围。