Ini adalah dua cara untuk menulis komponen Vue. Options API mengorganisir kode berdasarkan tipe opsi (data, methods, computed); Composition API mengorganisir kode berdasarkan kepentingan logis menggunakan fungsi seperti , , dan .
Ini adalah dua cara untuk menulis komponen Vue. Options API mengorganisir kode berdasarkan tipe opsi (data, methods, computed); Composition API mengorganisir kode berdasarkan kepentingan logis menggunakan fungsi seperti , , dan .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Semua dikelompokkan ke dalam wadah tetap (data, methods, computed, lifecycle). Sederhana dan dapat ditemukan, tetapi logika satu fitur tersebar di seluruh wadah tersebut.
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
State, computed, methods, dan lifecycle untuk satu kepentingan berada bersama, dan <script setup> membuatnya ringkas (tanpa this, tanpa return).
Composition API memungkinkan Anda untuk mengekstrak dan menggunakan kembali logika stateful sebagai fungsi biasa (composables):
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
Ini dengan bersih menyelesaikan masalah reuse logika, yang canggung di Options API (mixins memiliki tabrakan penamaan dan sumber yang tidak jelas).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Composition API (dengan <script setup>) adalah rekomendasi default untuk proyek Vue 3 baru, terutama dengan TypeScript.
Composition API adalah jawaban Vue 3 untuk mengorganisir dan menggunakan kembali logika komponen.
Memahami bahwa ia mengelompokkan kode berdasarkan fitur (bukan berdasarkan tipe opsi) dan memungkinkan composables — versus wadah berbasis opsi Options API — menjelaskan gaya Vue modern dan mengapa komponen kompleks dan basis kode TypeScript menyukainya.
Keduanya sepenuhnya didukung; Anda bahkan dapat mencampurnya.