Vue Academy · 课时

setup() 函数与响应式变量

Q: 「setup() 函数与响应式变量」这节课中我会学到什么？

setup() 入口、用于基本类型的 ref()、用于对象的 reactive()，以及返回值。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

setup() 入口、用于基本类型的 ref()、用于对象的 reactive()，以及返回值。

setup() 函数与响应式变量 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

setup() 入口

组合式 API 位于一个名为 setup() 的特殊组件选项中。它会在组件创建之前运行一次，您可以在其中声明响应式状态和函数。

从 setup() 中 return 的任何内容，都会在模板中可用。

使用 ref 创建响应式状态

ref() 会将单个值（数字、字符串、布尔值，甚至对象）包装成响应式容器。实际值位于 .value 属性上。

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

使用 reactive 创建响应式对象

reactive() 接收一个普通对象，并返回一个深度响应式代理。您可以直接访问它的属性，不需要使用 .value。

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

将状态返回给模板

从 setup() 以对象形式返回的所有内容，都会成为模板绑定。在这里，count 和 user 都被暴露了出来。

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

模板中的自动解包

在 JavaScript 中，您需要写 count.value。在模板中只需写 count 即可。Vue 会自动解包顶层 ref，因此您永远不需要在模板中输入 .value。

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

添加函数

在 setup() 中定义的函数可以读取和修改响应式状态。请记住：在 JavaScript 内部，对于 ref 仍然需要使用 .value。

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

在模板中完成连接

返回该函数，并将它绑定到一个事件上。点击按钮会调用 increment，它会修改 ref，随后 Vue 会重新渲染。

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

无需 this 关键字

在 setup() 内部没有 this。您可以直接使用所声明的变量。这样代码更容易理解，也更适合 TypeScript。

尝试在 setup() 中使用 this，并不会得到组件实例。

setup 在创建之前运行

setup() 执行得非常早——早于 created，也早于组件实例完成初始化。因此这里无法使用 this，也还不能访问 DOM。

setup() 参数：属性与上下文

setup(props, context) 会将解析后的属性作为第一个参数，将上下文对象作为第二个参数。上下文会暴露 attrs、slots、emit 和 expose。

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

一个完整的迷你组件

下面将所有内容放在一起：一个 ref、一个响应式对象、一个函数，以及返回的绑定。

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

快速检查

请确保您理解 setup() 和响应式变量。

回顾

您学到了组合式 API 的基础知识：

setup() 在创建之前运行一次，并返回模板绑定。
ref() 会包装一个值——在 JS 中使用 .value。
reactive() 会包装一个对象——直接访问其属性。
模板会自动解包 ref，因此在那里可以省略 .value。
在 setup() 内部没有 this。

常见问题解答

「setup() 函数与响应式变量」课时是免费的吗？

是的 — 「setup() 函数与响应式变量」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「setup() 函数与响应式变量」这节课中我会学到什么？

setup() 入口、用于基本类型的 ref()、用于对象的 reactive()，以及返回值。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「setup() 函数与响应式变量」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy