响应式 let/var 声明
在符文模式下,响应式状态通过 $state
rune 显式声明。
在遗留模式下,在组件顶层声明的变量会自动被视为响应式的。重新赋值或修改这些变量(count += 1
或 object.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>