（3）svelte 教程：响应式

本文主要是介绍（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 发生变化时，所有依赖它的地方都会自动更新。

• 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>

这篇关于（3）svelte 教程：响应式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---