（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 发生变化时，所有依赖它的地方都会自动更新。
• let firstName = "Jimi";
  • 声明一个名为 firstName 的变量，并将其初始值设置为 "Jimi"。这是一个响应式值。
• let lastName = "Hend";
  • 声明一个名为 lastName 的变量，并将其初始值设置为 "Hend"。这是一个响应式值。
• $: fullName = \${firstName} ${lastName}`;`
  • 使用 $: 前缀声明一个响应式语句，计算 fullName 的值。当 firstName 或 lastName 发生变化时，这个语句会重新执行，更新 fullName 的值。
• $: { console.log(beltColour); console.log(fullName); }
  • 这是一个块级的响应式语句，当任意依赖的响应式值发生变化时，整个块会重新执行。这里会打印 beltColour 和 fullName 的当前值。当 beltColour 或 fullName 发生变化时，控制台会显示相应的日志信息。

<main> <h1>Hello {name}!</h1> <p style="color: { 
       beltColour}">{fullName} {beltColour} belt</p> <input type="text" bind:value={firstName}> <input type="text" bind:value={lastName}> <input type="text" bind:value={beltColour}> </main> 

部分

• <h1>Hello {name}!</h1>
  • 一个 HTML <h1> 素，使用 {name} 表达式将 name 变量的值插入到标题中。当 name 变量的值变化时，标题会自动更新。
• <p style="color: {beltColour}">{fullName} {beltColour} belt</p>
  • 一个 HTML <p> 素，使用 {fullName} 和 {beltColour} 表达式将 fullName 和 beltColour 变量的值插入到段落中，同时将 beltColour 作为段落文本的颜色样式。当 fullName 或 beltColour 变量的值变化时，段落的内容和样式会自动更新。
• <input type="text" bind:value={firstName}>
  • 一个 HTML <input> 素，类型为文本输入框。使用 bind:value 语法将输入框的值与 firstName 变量进行双向绑定。当用户在输入框中输入内容时，firstName 变量会自动更新；反之，当 firstName 变量的值变化时，输入框的内容也会自动更新。
• <input type="text" bind:value={lastName}>
  • 一个 HTML <input> 素，类型为文本输入框。使用 bind:value 语法将输入框的值与 lastName 变量进行双向绑定。其行为与 firstName 的输入框相同。
• <input type="text" bind:value={beltColour}>
  • 一个 HTML <input> 素，类型为文本输入框。使用 bind:value 语法将输入框的值与 beltColour 变量进行双向绑定。当用户在输入框中输入内容时，beltColour 变量会自动更新；反之，当 beltColour 变量的值变化时，输入框的内容也会自动更新。

这个 Svelte 组件展示了如何使用响应式值和响应式语句来管理状态，并让 UI 根据数据的变化自动更新。

APP.svelte 完整代码如下：

<script> export let name; let beltColour = "black"; let firstName = "Jimi"; let lastName = "Hend"; $: fullName = `${ 
     firstName} ${ 
     lastName}`; // $: console.log(beltColour); $: { 
    console.log(beltColour); console.log(fullName); } // const handleClick = () => { 
    // beltColour = "orange"; // }; // const handleInput = (e) => { 
    // beltColour = e.target.value; // }; </script> <main> <h1>Hello { 
   name}!</h1> <p style="color: {beltColour}">{ 
   fullName} { 
   beltColour} belt</p> <!-- <button on:click={ 
   handleClick}>update belt colour</button> --> <!-- <input type="text" on:input={ 
   handleInput} value={ 
   beltColour}> --> <input type="text" bind:value={ 
   firstName}> <input type="text" bind:value={ 
   lastName}> <input type="text" bind:value={ 
   beltColour}> </main> <style> main { 
    text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { 
    color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { 
    main { 
    max-width: none; } } </style>