Composition API 23.11.20

A Composition API egy komponens leíró API, hasonlóan az Options APi-hoz. Valójában a háttérben az előző API is ezt használja fel.

setup() függyvény

A függvény az Options API-ban fog helyet foglalni, hasonlóan a data() függvényhez.

A függvényben tetszőleges ECMAScript logikát meg tudunk valósítani.

Ami fontos és nagyon figyelni kell rá, hogy csak az lesz elérhető a <template>-ben, amit visszadtaunk, egy objektumba ágyazva.

Tetszőleges dolgot át tudunk emelni az Options API-ból, ezeket paraméterként tudjuk odaadni a setup() függvénynek.

<script setup>

Ez előző egysezerűsítésére használhatjuk a setup attribútummal ellátott blokkot. Így ebben a blokkban már csak és kizárólag a setup() függvény törzse lesz benne.

Ami könnyebbség még, hogy nem kell visszaadnunk semmit, azt a háttérben kezeli a keretrendszer számunka.

Állapotok tárolása

Az állapotainkat mostmár egyszerű változóként fogjuk tárolni, így könnyebb lesz velükk dolgozni. Ennek a megoldásnak azonban az lesz a hátránya, hogy a reaktivitás képességét elveszítik ezek a változók. Ennek a megoldására két lehetőségünk van, az alábbi függvényebe csomagolva az értékeinket továbbra is reaktívak lesznek.

ref()

Csak és kizárólag egyszerű típusokat tudunk ezzel a megoldással használni, és figyelni kell rá, hogy a tényleges értéket a .valuen keresztül fogjuk tudni elérni az scripten belül.

import { ref } from 'vue';
//...
const name = "Papp Zsombor";
//...
name.value = "Kocsis Zsolt";

reactive()

Az elözővel szembern, ezt a függvényt csak összetett típusokra, adatszerkezetekre tudjuk felhasználni. Viszont nagy különbség a társához képes, hogy nem kell semmilyen segítség ahhoz, hogy elérjük a benne levő értékeket. Mindemellett az objektumunk teljes mélységében képesek vagyunk módosítani.

import { reactive } from 'vue';
//...
const shoppingList = ['milk','bread','egg'];
//...
shoppingList.push('cheese');

computed()

A számított állapotunk úgy fog átalakulni, hogy a computed() függvény számára adjuk oda azt a függvényt ami előállítja. Ez segít nekünk abban is, hogy a tényleges felületet csak akkor frissítsük, ha érdemi változás történik. Ha minden állapotunk változik, azt kivéve, amiből számolunk, akkor egész egyszerűen a függvényünket nem fogja feleselgesen lefuttatni a vue.

import { computed, reactive } from 'vue';
//...
const books = reactive(["The Hitchhiker's Guide to the Galaxy", "Gulliver's Travels"]);
//...
const numberOfBooks = computed(()=>books.length);

watch()

Az Options API-ban használt változattól annyiban fogunk eltérni, hogy nem a név alapján fogunk hivatkozni a figyelt állapotra, hanem a konkrét figyelt állapotot adjuk meg neki, valamint a kezelő függvényt.

import {ref, watch} from 'vue';
//...
const question = ref('');
//...
watch(question,(updated){
  if(updated.includes('?')){
    getAnswer();
  }
});

defineProps() vagy props:

Az átadott tulajdonságok amik a legkevesebbet változnak, ugyanis ugyanazt az objektumot fogjuk létrehozni, csak kell csomagolnunk a defineProps() függvényben.

import { defineProps } from 'vue';
//...
const props = defineProps({id: Number, name: String});

Ha a setup() függvényes megoldást használjuk, akkor lehetőségünk van ezt az objektumot az Options API részeként létrehozni és csak átadjuk paraméterként.

import { defineProps } from 'vue';
export default{
  props: {
    id: Number,
    name: String
  },
  setup(props){
    //...
  }
}

defineEmits() vagy emits:

Az előzőhöz teljes mértékben hasonlóan működik az állapotok hirdetése.

import { defineEmits } from 'vue';
//...
const emits = defineEmits(['deleteItem','editItem']);

setup() függvény és Options API segítségével:

import { defineProps } from 'vue';
export default{
  emits: ['deleteItem','editItem'],
  setup(emits){
    //...
  }
}

Életciklus

onMounted()

Az életciklus eseményeinek kezelése úgy alakul át, hogy minden függvényünk egy on előtagot kap valamint, a kezdő betűnk nagyra vált. Ezen kívül a végrehajtani kívánt függvényt paraméterként tudjuk átadni neki.

import { onMounted } from 'vue';
//...
onMounted(()=>getData());

Példák

Számláló setup() függvénnyel

<script>
import {ref} from 'vue';
export default{
  setup(){
    const count = ref(0);

    const increment = () => count.value++;
    const decrement = () => count.value--;
    
    return {count, increment, decrement}
  }
}
</script>
<template>
  <h1>{{count}}</h1>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</template>

Számáló <script setup>

<script setup>
import {ref} from 'vue';

const count = ref(0);

const increment = () => count.value++;
const decrement = () => count.value--;
</script>

<template>
  <h1>{{count}}</h1>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</template>

\pagebreak