Iki rong cara kanggo nulis komponen Vue. Options API ngatur kode miturut jenis opsi (data, methods, computed); Composition API ngatur kode miturut kepentingan logikal nganggo fungsi kayak ref, , lan .
Iki rong cara kanggo nulis komponen Vue. Options API ngatur kode miturut jenis opsi (data, methods, computed); Composition API ngatur kode miturut kepentingan logikal nganggo fungsi kayak ref, , lan .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Semua digabung ing ember tetep (data, methods, computed, lifecycle). Gampang lan bisa ditemokake, nanging logika fitur siji kasebar ing ember-ember kasebut.
<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>
Status, computed, methods, lan lifecycle kanggo sawijining kepentingan duduk bebarengan, lan <script setup> nggawé dadi ringkes (ora ana this, ora ana return).
Composition API nggawé sampeyan bisa ekstrak lan ulang maneh logika kanthi status minangka fungsi polos (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>
Iki kanthi rapi ngatasi kaulangan logika, sing awkward ing Options API (mixins duwe tabrakan ngaran lan sumber sing ora 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 (karo <script setup>) minangka default sing disaranake kanggo proyek Vue 3 anyar, utamane karo TypeScript.
Composition API minangka jawaban Vue 3 kanggo ngatur lan ngulang logika komponen.
Memahami manawa iku ngumpulake kode miturut fitur (ora miturut jenis opsi) lan nggawé composables bisa - versus ember-ember basis opsi Options API - nerangake gaya Vue modern lan mengapa komponen kompleks lan basis kode TypeScript milih.
Kabaehe disuportake; sampeyan malah bisa nakaake iki.