svelte 中的反应函数在值更改时不会触发？

Question

下面是整个代码示例。

我遇到的问题是我知道 vatSuccess 实际上正在成功更改。然而，当我尝试以被动的方式用它做任何事情时，当我知道它应该是真的时，它似乎不起作用。

在下面的示例中，我希望记录“vatSuccess”的反应式语句控制台首先在声明为 false 时运行两次，然后在声明为 true 时再次运行。

但是它只运行第一次

let vatSuccess = false
let nameSuccess = false

function handleVatValidation(): Error {
    // Vat is optional so putting nothing passes validation
    if (companyInformation.vat.length === 0) {
        vatSuccess = true
        vatError = null
        return null
    }

    if (companyInformation.vat.length < 6) {
        vatSuccess = false
        vatError = 'vat must be at least 6 characters'
        return 'vat must be at least 6 characters'
    }

    vatSuccess = true
    console.log('vatSuccess', vatSuccess) // This code runs and prints true

    vatError = null
    return null
}

$: {
    console.log('vatSuccess', vatSuccess) // This only runs once when it is false
}

我试图改变它，所以 vatSuccess 一开始是一个反应值，但行为是相同的。

$: vatSuccess = false

Answer 1

函数不会调用自身，函数内部读取的任何变量对 Svelte 3/4 中的反应性没有影响。

如果在模板（组件的 HTML 部分）或反应块 (

$: ...

) 中调用该函数，则如果函数本身或参数之一发生更改，则会重新评估该函数。

此函数依赖于

companyInformation

但这不是“可见的”。要么把它变成一个参数，要么反应性地声明整个函数本身：

$: handleVatValidation = () => {
   ...
}

（

$: vatSuccess = false

不执行任何操作，因为它不包含会导致重新评估的其他依赖项。）