Skip to main content

响应式 let/var 声明

在符文模式下,响应式状态通过 $state rune 显式声明。

在遗留模式下,在组件顶层声明的变量会自动被视为响应式的。重新赋值或修改这些变量(count += 1object.x = y)会导致 UI 更新。

<script>
	let count = 0;
</script>

<button on:click={() => count += 1}>
	点击次数: {count}
</button>

因为 Svelte 的遗留模式响应式是基于赋值的,使用数组方法如 .push().splice() 不会自动触发更新。需要一个后续的赋值来”告诉”编译器更新 UI:

<script>
	let numbers = [1, 2, 3, 4];

	function addNumber() {
		// 这个方法调用不会触发更新
		numbers.push(numbers.length + 1);

		// 这个赋值会更新所有依赖于
		// `numbers` 的内容
		numbers = numbers;
	}
</script>

在 GitHub 编辑此页面

上一页 下一页