（3）svelte 教程：响应式

（3）svelte 教程：响应式

什么是 Reactive Value 和 Reactive Statement

Reactive Value（响应式值）：
响应式值是指在 Svelte 中，当变量的值发生变化时，Svelte 会自动检测到变化并更新所有依赖于该变量的部分。这使得开发者可以轻松地管理状态，并让UI自动反映这些状态的变化。

Reactive Statement（响应式语句）：
响应式语句是一种特殊的语法，通过 $: 前缀标识。当任何响应式语句中依赖的变量发生变化时，该语句会重新执行。这可以用来自动更新某些计算值或执行一些副作用（如日志记录）。

逐行解释代码

<script>
    export let name;
    let beltColour = "black";
    let firstName = "Jimi";
    let lastName = "Hend";

    $: fullName = `${
       firstName} ${
       lastName}`;
    $: {
     
        console.log(beltColour);
        console.log(fullName);
    }
</script>

• export let name;

  • 声明一个名为 name 的变量，并将其导出，使其成为一个可由父组件传递的属性。name 是响应式的，当父组件改变 name 的值时，Svelte 会自动更新使用 name 的地方。

• let beltColour = "black";

  • 声明一个名为 beltColour 的变量，并将其初始值设置为 "black"。这是一个响应式值，当 beltColour 发生变化时，所有依赖它的地方都会自动更新。