当前位置:   article > 正文

(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>
  • 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 的值。当 firstNamelastName 发生变化时,这个语句会重新执行,更新 fullName 的值。
  • $: { console.log(beltColour); console.log(fullName); }

    • 这是一个块级的响应式语句,当任意依赖的响应式值发生变化时,整个块会重新执行。这里会打印 beltColourfullName 的当前值。当 beltColourfullName 发生变化时,控制台会显示相应的日志信息。
<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} 表达式将 fullNamebeltColour 变量的值插入到段落中,同时将 beltColour 作为段落文本的颜色样式。当 fullNamebeltColour 变量的值变化时,段落的内容和样式会自动更新。
  • <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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/675234
推荐阅读
相关标签
  

闽ICP备14008679号