为什么我无法访问 svelte3 中脚本标签中的"$："(又名反应变量)？

Question

我很陌生，一周前开始了......😁

我试图了解它，我真的很喜欢❤️❤️它，但我有一个问题☹️☹️

我正在尝试访问脚本标签中的 $： 变量，但我收到错误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在您的示例中不是反应语句，因此它实际上是在任何反应语句之前执行的，遵循脚本的"正常"流执行。因此，当它被执行时greeting尚未设置(您的第一个错误(或已设置为通过let greeting声明undefined(您的第二个错误(。

通过使console.log反应式，您可以确保它将 (a( 在设置greeting后执行(解决了您的第一个问题(，以及 (b( 每次设置greeting时(解决了您的第二个问题(。而且，在响应语句中为其赋值之前，您不必声明greeting。