面试题：Svelte响应式表达式高级难度题

Question

已知在Svelte组件中有两个响应式变量`width`和`height`，分别表示一个矩形的宽和高。现在需要创建一个响应式表达式来计算矩形的面积`area`，并且当`area`的值超过100时，将`width`和`height`重置为10。请写出实现代码，并解释如何确保响应式更新的正确性以及避免不必要的重复计算。

Answer 1

<script>
    let width = 5;
    let height = 5;
    let area;

    $: {
        area = width * height;
        if (area > 100) {
            width = 10;
            height = 10;
        }
    }
</script>

<p>Width: {width}</p>
<p>Height: {height}</p>
<p>Area: {area}</p>

响应式更新正确性及避免重复计算的解释

1. 响应式更新正确性：
   • 在Svelte中，使用$:前缀表示响应式语句块。在这个块中，当width或height发生变化时，整个块会被重新执行。这确保了area总是根据最新的width和height值进行计算。
   • 当area计算完成后，如果area的值超过100，会将width和height重置为10。由于width和height是响应式变量，它们的变化又会触发响应式语句块的重新执行，重新计算area，从而保证了整个逻辑的响应式正确性。
2. 避免不必要的重复计算：
   • Svelte会跟踪响应式语句块中依赖的变量（这里是width和height）。只有当这些依赖变量发生变化时，响应式语句块才会重新执行。如果width和height没有变化，不会重复计算area，也不会重复检查area > 100的条件，从而避免了不必要的重复计算。