响应式基础
API 参考
本页和后面很多页面中都分别包含了选项式 API 和组合式 API 的示例代码。现在你选择的是 组合式 API。你可以使用左侧侧边栏顶部的“API 风格偏好”开关在 API 风格之间切换。
声明响应式状态
ref()
在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：
js
import { ref } from 'vue'
const count = ref(0)ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：
js
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1参考：为 refs 标注类型
要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们：
js
import { ref } from 'vue'
export default {
// `setup` 是一个特殊的钩子，专门用于组合式 API。
setup() {
const count = ref(0)
// 将 ref 暴露给模板
return {
count
}
}
}template
<div>{{ count }}</div>注意，在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包 (有一些注意事项)。
你也可以直接在事件监听器中改变一个 ref：
template
<button @click="count++">
{{ count }}
</button>对于更复杂的逻辑，我们可以在同一作用域内声明更改 ref 的函数，并将它们作为方法与状态一起公开：
js
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
// 在 JavaScript 中需要 .value
count.value++
}
// 不要忘记同时暴露 increment 函数
return {
count,
increment
}
}
}然后，暴露的方法可以被用作事件监听器：
template
<button @click="increment">
{{ count }}
</button>这里是 Codepen 上的例子，没有使用任何构建工具。
<script setup>
在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用单文件组件 (SFC) 来避免这种情况。我们可以使用 <script setup> 来大幅度地简化代码：
vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
{{ count }}
</button>
</template>
