使用 let 声明响应式变量
使用普通的 let 声明在 Svelte 中声明响应式状态。
使用 let 声明响应式变量 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 2 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
无需特殊 API
在 Svelte 中,script 块中的普通 let 声明具有响应式。不存在等同于 useState 的 API。
声明并使用
声明一个变量,并在标记中插值使用它。更新变量后,依赖它的部分会重新渲染。
<script>
let count = 0;
</script>
<p>The count is {count}</p>通过赋值更新
赋值就是触发条件。count = count + 1 会告诉 Svelte 该值发生了变化。
function inc() { count = count + 1; }递增简写
标准 JS 简写同样有效:count++、count += 5 等。
function inc() { count++; }数组与变更
通过 push 修改数组不会触发响应式更新。您必须重新赋值。
items = [...items, newItem]; // ok
items.push(newItem); // does not update对象与变更
对象也遵循相同规则:替换引用,或者重新赋值某个属性以及其父对象。
user.name = "Bea";
user = user; // tell Svelte it changed赋值为何重要
Svelte 编译器会处理赋值运算符。像 push 这样的函数调用对编译器是不可见的。
局部与共享
普通的 let 会创建仅属于一个组件实例的状态。若要在组件之间共享状态,请使用 props 或 stores。
初始值
let 声明的右侧表达式会在组件实例初始化时运行一次。
类型标注
使用 lang="ts" 时,请为变量指定明确的类型。
<script lang="ts">
let count: number = 0;
</script>多个变量
您可以在一行或多行中声明任意数量的响应式变量。
let x = 0, y = 0;
let items = [];快速检查
什么会触发响应式更新?
回顾
普通的 let 具有响应式。请重新赋值(而不是修改原值)来触发更新。数组和对象需要改变引用。
常见问题解答
「使用 let 声明响应式变量」课时是免费的吗?
是的 — 「使用 let 声明响应式变量」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Sveltejs Academy 课程的其余内容,请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「使用 let 声明响应式变量」这节课中我会学到什么?
使用普通的 let 声明在 Svelte 中声明响应式状态。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 2 节课,共 4 节。
「使用 let 声明响应式变量」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗?
能。每节 Sveltejs Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- script、template、style 结构
- 使用 let 声明响应式变量
- 插值:{expression}
- 计算值:$: 响应式声明