响应式基础
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) // 0count.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 中需要 .valuecount.value++}// 不要忘记同时暴露 increment 函数return {count,increment}}
}然后，暴露的方法可以被用作事件监听器：
template
<button @click="increment">{{ count }}
</button>这里是 Codepen 上的例子，没有使用任何构建工具。
