跳至主要内容

响应式 let/var 声明

在符文模式下,响应式状态使用 $state 符文 显式声明。

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

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

<button on:click={() => count += 1}>
	clicks: {count}
</button>

由于 Svelte 的旧版模式响应式基于赋值,因此使用诸如 .push().splice() 之类的数组方法不会自动触发更新。需要后续赋值才能“告知”编译器更新 UI。

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

	function addNumber() {
		// this method call does not trigger an update
		numbers.push(numbers.length + 1);

		// this assignment will update anything
		// that depends on `numbers`
		numbers = numbers;
	}
</script>

在 GitHub 上编辑此页面

上一页 下一页