如何在Svelte中导入外部JS函数，使其仅响应指定变量变化？

首先修正function.js中的函数，解决原代码里c未定义的报错问题，同时让函数能接收所需变量：

export function sum(a, b, c) {
    return a + b + c;
}

接着调整App.svelte的反应式逻辑，确保只有b变化时才重新计算res，计算时直接取用当前的c值：

<script>
    import { sum } from './function.js';
    let a = 1;
    let b = 2;
    let c = 3;
    let res;

    // 仅当b变化时触发计算，使用当前的a、b、c值
    $: [b], res = sum(a, b, c);
</script>

<button on:click={() => c = c + 1}>
    C
</button>
<button on:click={() => b = b + 1}>
    B
</button>

{res}
{c}

逻辑说明 #

• Svelte的$: [b], res = ...语法中，[b]是依赖触发条件，只有数组内的b发生变化时，才会执行后续的计算语句。
• 计算res时会直接调用当前的a、b、c值，但a或c的变化不会触发res更新，完全匹配需求。
• 修正后的sum函数通过参数传递变量，既解决了未定义变量的错误，也保证了函数的可复用性。

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