0Pricing
Sveltejs Academy · 课时

使用 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 反馈 — 无需本地设置。

此课程中的所有课时

  1. script、template、style 结构
  2. 使用 let 声明响应式变量
  3. 插值:{expression}
  4. 计算值:$: 响应式声明
← 返回 Sveltejs Academy