如何配置Svelte，仅在指定条件下触发someValue的响应式变化？

要实现仅在someIndex变化且someBool为false时才触发someValue的响应式更新，核心是避免在someBool为true时让Svelte跟踪someIndex的变化。以下是两种可行方法：

方法一：拆分响应式赋值逻辑 #

将原三元表达式拆分为两个条件响应式块，这样当someBool为true时，代码不会接触someIndex，自然不会因为它的变化触发更新：

<script>
    import { onMount } from "svelte";
    export let someBool = true;
    
    const someArray = [];
    const someObject = {};
    
    let someIndex = 0;
    let timesReacted = 0;
    let someValue = someObject; // 初始化默认值

    // someBool为true时，仅响应someBool的变化
    $: if (someBool) {
        someValue = someObject;
    }
    // someBool为false时，才响应someIndex的变化
    $: if (!someBool) {
        someValue = someArray[someIndex];
    }
        
    $: someValue, timesReacted += 1;
        
    onMount(() => {
        const interval = setInterval(() => someIndex += 1, 1000);
        return () => clearInterval(interval);
    });
</script>

someValue reacted to changes {timesReacted} times

方法二：用函数封装逻辑 #

如果逻辑更复杂，可通过函数包裹赋值逻辑，仅在someBool为false时才访问someIndex，从而控制依赖跟踪：

<script>
    import { onMount } from "svelte";
    export let someBool = true;
    
    const someArray = [];
    const someObject = {};
    
    let someIndex = 0;
    let timesReacted = 0;

    $: someValue = getSomeValue();
    $: someValue, timesReacted += 1;

    function getSomeValue() {
        if (someBool) return someObject;
        // 仅当someBool为false时才访问someIndex，触发依赖跟踪
        return someArray[someIndex];
    }
        
    onMount(() => {
        const interval = setInterval(() => someIndex += 1, 1000);
        return () => clearInterval(interval);
    });
</script>

someValue reacted to changes {timesReacted} times

原理说明 #

Svelte的响应式系统会跟踪响应式语句中实际被执行访问的变量。原代码的三元表达式里，无论someBool取值如何，someArray[someIndex]都会被语法解析，导致someIndex始终被系统跟踪。拆分或用函数封装后，当someBool为true时，代码完全不涉及someIndex，因此它的变化不会触发someValue的更新。

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