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