VueJS’te sihirli bir konsept <script setup>

VueJS, kendisiyle aynı işi yapan framework ve libraryler’den sıklıkla besleniyor. Bu, ilk bakışta, kararsız bir yol haritaları varmış hissi yaratsa da developera kendi ‘küçük’ topluluğunun dışındaki toplulukların buluşlarını da deneyimleme fırsatı yaratıyor.

VueJS 3'e kadar kolay öğrenilen ama zor okunan bir yerel veri yönetimi, dolambaçlı bir implementation kurgusu vardı.

Eski yöntemle basit bir sayaç artırma yapalım.

VueJS Options API
<template>
  <div>
    <button @click="increase">Increase</button>
    {{ count }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count++
    }
  }
</script>

Aynı işi yapan kodu yeni konseptle, diğer framework’lerle çalışan developerların da kolayca okuyabileceği, script setup yöntemiyle yapalım.

VueJS Composition API
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increase = () => {
  count.value++
}
</script>
<template>
  <div>
    <button @click="increase">Increase</button>
    {{ count }}
  </div>
</template>

Satır sayısı bakımından çok büyük bir fark yok ancak farklı disiplinlerden birçok developer için Composition API okuması kolay bir konsept.

Her yeni data için yeni bir değişken mi tanımlayacağız?

Elbette hayır, reactive reserved function burada devreye giriyor. Reactive sayesinde primitive olmayan değişkenler yaratabilirsiniz.

import { reactive } from 'vue'
const state = reactive({
  myMessage: 'Hello World',
  count: 0
})

Template içerisinde {{ state.myMessage }} yazarak reaktif datayı sunabilirsiniz.

script setup’ın gücüyle dinamik olmayan dataları da dinamikmiş gibi tanımlamaktan kurtuluyoruz.

const myMessage = 'Hello World'

Template içerisinde {{ myMessage }} yazdığımızda ekranda statik bir data sunulur. Böylece dinamik olmayan bir veri yüzünden Vue Instance’a başvurulmaz. Komponentin tamamının ya da bir kısmının re-render olma ihtimalini aza indirir. Sonuç olarak performans artışı sağlar. Artık statik bir JSON’ı data içerisinde return etmeniz gerekmiyor.

VueJS’in geleceğinin bu format üzerine kurulacağını düşünmek yanlış olmaz.