1. setup() – điểm khởi đầu của Composition API
Mọi logic của component được khai báo trong setup() hoặc gọn hơn là <script setup>.
<script setup>
import { ref } from 'vue'
const message = ref('Xin chào từ Composition API!')
</script>
<template>
<h1>{{ message }}</h1>
</template>
Ở đây, ref giúp tạo biến reactive (sẽ giải thích kỹ ở phần sau).
2. ref() – Reactive cho giá trị đơn
ref dùng cho kiểu dữ liệu nguyên thủy (string, number, boolean…).
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">+1</button>
<p>Giá trị: {{ count }}</p>
</template>
📌 Lưu ý: khi dùng trong JS phải .value, nhưng trong template thì không cần.
3. reactive() – Reactive cho Object
Nếu dữ liệu là object hoặc array, dùng reactive().