Ini adalah dua cara untuk menulis komponen Vue. Options API mengatur kod mengikut jenis pilihan (data, methods, computed); Composition API mengatur kod mengikut kebimbangan logik menggunakan fungsi seperti , , dan .
Ini adalah dua cara untuk menulis komponen Vue. Options API mengatur kod mengikut jenis pilihan (data, methods, computed); Composition API mengatur kod mengikut kebimbangan logik 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>
Semuanya dikelompokkan ke dalam baldi tetap (data, methods, computed, lifecycle). Mudah dan dapat ditemui, tetapi logik satu ciri tersebar di baldi-baldi 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>
Kesadaran, computed, methods, dan lifecycle untuk satu kebimbangan duduk bersama, dan <script setup> menjadikannya ringkas (tiada this, tiada return).
Composition API memungkinkan anda untuk mengekstrak dan menggunakan semula logik berstateful 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 menyelesaikan penggunaan semula logik dengan bersih, yang canggung dalam Options API (mixins mempunyai perlanggaran 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 lalai yang disyorkan untuk projek Vue 3 yang baru, terutamanya dengan TypeScript.
Composition API adalah jawapan Vue 3 untuk mengatur dan menggunakan semula logik komponen.
Memahami bahawa ia mengatur kod mengikut ciri (bukan jenis pilihan) dan membolehkan composables — berbanding baldi berasaskan pilihan Options API — menjelaskan gaya Vue moden dan mengapa komponen kompleks dan pangkalan kod TypeScript menyukainya.
Kedua-duanya disokong sepenuhnya; anda bahkan boleh mencampurkannya.