（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>
1
2
3
4
5
6
7
8
9
10
11
12

• 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>
1
2
3
4
5
6
7

部分

• <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53