響應式基礎?
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 上的例子，沒有使用任何構建工具。
