Tai yra du būdai rašyti Vue komponentus. Options API organizuoja kodą pagal parinkties tipą (data, methods, computed); Composition API organizuoja kodą pagal loginį interesą, naudodami funkcijas, tokias kaip , ir .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Vis kas yra sugrupuota į fiksuotus dėžes (data, methods, computed, lifecycle). Paprasta ir atrandama, tačiau vienos funkcijos logika išsidėstyta per tas dėžes.
<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>
Būsena, computed, methods ir lifecycle vienam interesui sėdi kartu, o <script setup> tai daro glaustai (nėra this, nėra return).
Composition API leidžia išskirti ir pakartotinai panaudoti valstybinę logiką kaip paprastas funkcijas (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>
Tai gražiai išsprendžia logikos pakartotinį naudojimą, kuris buvo nepatogus Options API (mixins turėjo vardų susidūrimus ir neaiškius šaltinius).
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 (<script setup>) yra rekomenduojama numatytoji naujiems Vue 3 projektams, ypač su TypeScript.
Composition API yra Vue 3 atsakas į komponento logikos organizavimą ir pakartotinį naudojimą.
Supratimas, kad jis organizuoja kodą pagal funkcionalumą (o ne pagal parinkties tipą) ir suteikia galimybę naudoti composables — priešingai nei Options API parinktims skirtos dėžės — paaiškina šiuolaikinį Vue stilių ir kodėl sudėtingi komponentai ir TypeScript kodo bazės jį naudoja.
Abu yra visiškai palaikomi; jūs netgi galite juos sumaišyti.
IT pokalbių klausimų biblioteka su išsamiais atsakymais — nuo Junior iki Senior.
Paaukoti