Front-end Dərsləri. - Vue Js . III versiya. Yeni gələn əlavələr 1-ci hissə. Setup()

   Fevral ayının 21 - i dərsdə tələbələr ilə vue js - in rutlar (vue-router) - mövzusunu keçirdik. Vue js-in artıq 3 cü versiyasının çıxdığını bilirdim amma yeni çıxan versiyalar adətən bilirik ki, demo versiya olur və müəyyən xətalardan tamamilə təmizlənsin deyə həmin verisyaya keçmirik. Amma dediyim kimi rutlar mövzüsunu keçəndə artıq bir problemlə qarşılaşdıq. Belə ki, vue-nin 2.6.11 - ci versiyası vue-routeri yükləməyə icazə vermədi və biz məcbur qalıb III versiyaya keçməli olduq. 

  Beləliklə qərara gəldim ki, bir məqalə yazım və III versiyada çıxan yenilikləri özüm öyrəndikcə sizinlə paylaşım. Tezliklə yeni versiya ilə bağlı  video da çəkəcəm. İndi isə başlayaq.

  Vue js-in III versiyasında yeni proyekt düzəltmək tamamilə dəyişilib. Əvvəl vue cli yüklədikdən sonra vue init (webpack, webpack-simple və ya babel) və daha sonra proyektin adını qeyd edirdik. Yeni versiyada isə "npm init vue@latest" - əmrini yazırıq və bizə sual verir: Typescript  və ya bəzi testerler işlədəcəyikmi? 

  Eyni zamanda Single Page Application(SPA)  olacaqsa bizə vue-routeri özü yükləyir. Bundan əlavə olaraq vue-proyektinin görünüşü daha çox Laravel lahiyəsinə oxşayır. Onsuzda Laravel ilə çox yaxşı qarşılıqlı işləyə bilən Vue indi özünü daha çox onun proyekt görünüşünə oxşadıb. 

  Yeni bir vue-proyekti düzəldə biliriksə indi yeniliklərə baxaq. Belə ki, ən çox bəyəndiyim və əminəm ki, vue ilə işləyən bir çox developerin bəyənəcəyi "setup()" - funksiyası gətirilib. Bu funksiya işimizi çox asanlaşdırır. Script teqləri daxilində bir funskiya kimi yazmaqla yanaşı: 

  export default {

   setup() {

    const count = ref(0)

    // expose to template and other options API hooks

    return {

      count

    }

  },

həm də onu script teqinin atributu kimi qeyd edib işlədə bilərik: script setup.

   Setup funskiyası bizi əvvəlki versiyada componenti App.Vue import etdikdən sonra onu components - propertisində bildirmək məcburiyyətindən azad edir. 

import MyComponent from './MyComponent.vue' - componenti import etdikdən sonra onu birbaşa template teqləri arasında çağırıb işlədə bilirik. 

   Bundan əlavə olaraq içərisində defineProps() & defineEmits() - var.  Bunlar isə props və $emit-in setup scriptinin daxilində yazılır. 

   Daxilində gələn await - isə JavaScriptdən bildiyimiz async-await məntiqidir. Əgər siz const post = await fetch(`/api/post/1`).then((r) => r.json())

belə bir kod yazırsınızsa o zaman setup funskisiyası asinxron olur . async setup().

  Bundan əlavə Vue js-in III versiyası bir sıra yenilikləri əhatə edir. Növbəti yazılarımda bu məqamlara da toxunacam.