为什么我不能在 svelte3 的脚本标签内访问“$:”又名反应变量？

Question

一周前开始使用 svelte 还是个新手......

我想知道它我真的很喜欢❤️❤️但我有一个问题☹️☹️

我正在尝试访问脚本标记中的 $: 变量，但出现错误 Cannot access 'greeting' before initialization。

<script>
    let name = 'world';
    $: greeting = `Hello ${name}`
    console.log(greeting)
</script>

<h1>Hello {name}!</h1>

我还尝试在使用它之前用 let 声明变量

    let greeting

但在这种情况下 console.log 输出 undefined.

Answer 1

您的问题的解决方案是使 console.log(greeting) 语句也具有反应性：

<script>
    let name = 'world';
    $: greeting = `Hello ${name}`
    $: console.log(greeting)
</script>

<h1>Hello {name}!</h1>

因为 console.log 在您的示例中不是反应式语句，它实际上在在任何反应式语句之前执行，在您的 'normal' 流程执行之后脚本。所以当它执行时 greeting 还没有被设置（你的第一个错误）或者它已经通过 let greeting 声明设置为 undefined （你的第二个错误）。

通过使 console.log 具有反应性，您可以确保它会被执行 (a) after greeting 已设置（这解决了您的第一个问题），和 (b) 每次 greeting 设置（这解决了你的第二个问题）。在反应式语句中为它赋值之前，您不必声明 greeting。

为什么我不能在 svelte3 的脚本标签内访问“$:”又名反应变量？

Why can't I access a "$:" aka reactive variable inside the script tags in svelte3?

svelte

svelte-3

reactive-variable