Đây là hai cách viết component Vue. Options API tổ chức code theo loại option (data, methods, computed); Composition API tổ chức code theo mối quan tâm logic bằng các hàm như ref, , và .
Đây là hai cách viết component Vue. Options API tổ chức code theo loại option (data, methods, computed); Composition API tổ chức code theo mối quan tâm logic bằng các hàm như ref, , và .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Mọi thứ được gom vào các nhóm cố định (data, methods, computed, lifecycle). Đơn giản và dễ tìm, nhưng logic của một tính năng đơn lẻ bị rải rác qua các nhóm đó.
<script setup>
import { ref, computed, onMounted } from "vue";
// toàn bộ logic cho "counter" nằm chung với nhau
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
State, computed, method, và lifecycle cho một mối quan tâm nằm chung với nhau, và <script setup> khiến nó ngắn gọn (không có this, không có return).
Composition API cho phép bạn trích xuất và tái sử dụng logic có state dưới dạng các hàm thuần (composable):
// useCounter.js — tái sử dụng trên mọi component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // tái sử dụng ở bất cứ đâu
</script>
Điều này giải quyết gọn gàng vấn đề tái sử dụng logic, vốn khó xử trong Options API (mixin gặp xung đột tên và nguồn gốc không rõ ràng).
Options API → mô hình tư duy đơn giản hơn, ổn cho component nhỏ, quen thuộc với người mới
Composition API → tốt hơn cho component lớn, TypeScript, và tái sử dụng logic (composable)
Composition API (với <script setup>) là lựa chọn mặc định được khuyến nghị cho các dự án Vue 3 mới, đặc biệt với TypeScript.
Composition API là câu trả lời của Vue 3 cho việc tổ chức và tái sử dụng logic component.
Hiểu rằng nó gom code theo tính năng (không theo loại option) và cho phép composable — so với các nhóm theo option của Options API — giải thích phong cách Vue hiện đại và lý do các component phức tạp và codebase TypeScript ưa chuộng nó.
Cả hai đều được hỗ trợ đầy đủ; bạn thậm chí có thể kết hợp chúng.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ