Vue Composition API

Kompozitsiya API

Composition API bilan mantiq biz Options API’dan o‘rganib qolgan Vue misol strukturasidan foydalanish o‘rniga import qilingan Vue funksiyalari yordamida yoziladi.

Tugma yordamida saqlashdagi yozuv mashinkalari sonini kamaytiradigan Vue ilovasini yozish uchun Composition API-dan shunday foydalanish mumkin:

<template>
  <h1>Example</h1>
  <img src="/img_typewriter.jpeg" alt="Typewriter">
  <p>Typewriters left in storage: {{ typeWriters }}</p>
  <button @click="remove">Remove one</button>
  <p style="font-style: italic;">"{{ storageComment }}"</p>
</template>

<script setup>
  import { ref, computed } from 'vue'

  const typeWriters = ref(10);

  function remove(){
    if(typeWriters.value>0){
      typeWriters.value--;
    }
  }

  const storageComment = computed(
    function(){
      if(typeWriters.value > 5) {
        return "Many left"
      }
      else if(typeWriters.value > 0){
        return "Very few left"
      }
      else {
        return "No typewriters left"
      }
    }
  )
</script>

Yuqoridagi misoldagi 9-qatorda setup atributi Composition API-dan foydalanishni osonlashtiradi. Masalan, setup atributidan foydalanib, o‘zgaruvchilar va funksiyalar bevosita <template> ichida ishlatilishi mumkin.

10-qatorda ref va hisoblash ularni ishlatishdan oldin import qilinishi kerak. Options API’da reaktiv o‘zgaruvchilarni e’lon qilish yoki hisoblangan xususiyatlardan foydalanish uchun hech narsa import qilishimiz shart emas.

12-qatorda ref "yozuv mashinasi" xususiyatini reaktiv deb e’lon qilish uchun "10" boshlang‘ich qiymat sifatida ishlatiladi.

“Yozuv mashinkalari” xususiyatini reaktiv deb e’lon qilish, “yozuv mashinkalari” xususiyati qiymati o‘zgartirilganda yangilangan qiymatni ko‘rsatish uchun <template> ichidagi {{ typewriters }} qatori avtomatik ravishda qayta ko‘rsatilishini anglatadi. Option API bilan ma’lumotlar xususiyatlari, agar ilova yaratilganda bo‘lishi kerak bo‘lsa, reaktiv bo‘ladi, ularni aniq reaktiv deb e’lon qilish shart emas.

14-qatorda e’lon qilingan "remove()" funksiyasi, agar misol Options API’da yozilgan bo‘lsa, "methods" Vue xususiyati ostida e’lon qilinadi.

20-qatordagi "storageComment" hisoblangan xususiyati, agar misol Options API’da yozilgan bo‘lsa, "hisoblangan" Vue xususiyati ostida e’lon qilinadi.

Options API

Options API - bu qo‘llanmaning boshqa joylarida qo‘llaniladigan narsa.

Ushbu qo‘llanma uchun Options API tanlangan, chunki u taniqli tuzilishga ega va yangi boshlanuvchilar uchun boshlash osonroq deb hisoblanadi.

Misol tariqasida, Options API-dagi tuzilma Vue misolining turli qismlarida joylashtirilgan, aniq ajratilgan ma’lumotlar xususiyatlari, metodlari va hisoblangan xususiyatlariga ega.

Yuqoridagi misol Options API bilan yozilgan:

<template>
  <h1>Example</h1>
  <img src="/img_typewriter.jpeg" alt="Typewriter">
  <p>Typewriters left in storage: {{ typeWriters }}</p>
  <button @click="remove">Remove one</button>
  <p style="font-style: italic;">"{{ storageComment }}"</p>
</template>

<script>
export default {
  data() { 
    return {
      typeWriters: 10
    };
  },
  methods: {
    remove(){
      if(this.typeWriters>0){
        this.typeWriters--;
      }
    }
  },
  computed: {
    storageComment(){
      if(this.typeWriters > 5) {
        return "Many left"
      }
      else if(this.typeWriters > 0){
        return "Very few left"
      }
      else {
        return "No typewriters left"
      }
    }
  }
}
</script>