Vue 3 hakkında bilmeniz gerekenler / yenilikler

Başlık fotoğrafı: VueJS.org

Vue 3 bir çok yeni özellik ve yeniliği beraberinde getirdi. Yeni sürümle beraber gözle görülür performans ve stabilite artışı olsa da Vue 2’deki gelişmiş ‘debug’ araçları Vue 3 için tam olarak sunulmadığından ısınmam biraz uzun sürdü. Eğer Vue’yu ilk defa duyduysanız önce “Merhaba Vue.js” başlıklı yazımı okuyabilirsiniz.

Bu yazıda size Vue 3 ile birlikte gelen yeniliklerden bahsedeceğim. Vue 2 projenizi Vue 3’e güncelleme, Vue 3 ile bileşen oluşturma vb. içerikli yazılarla da Vue 3 serisini devam ettireceğim.

Vue 3 ile gelen yenilikler

Bu yeni sürüm çok sayıda iyileştirme ve yeni özelliği beraberinde getirdi. Bu yeniliklerden en önemlilerini aşağıda sizlerle paylaşacağım. Başlıklar/terimleri mümkün Türkçe ve İngilizce karşılıkları ile birlikte kullanacak olsam da oldukça teknik bir konu olduğu için Türkçe karşılıklarının yeterli olmadığı veya amacının aksine anlamayı zorlaştıracğaını düşünürsem sadece İngilizce terimi kullanacağım.

Yeni Vue’ya dışarıdan bakınca gövde de pek bir değişiklik görünmüyor, ama alttaki motor tamamen değişerek bir sanat eserine dönmüş durumda. Yeni Vue kodunda doğrudan Vue 2’den gelen bir şey yok çünkü kod TypeScript kullanılarak tamamen baştan yazıldı ve sonuçta olağan üstü performans sağlayan bir Vue sürümüne ulaşılmış oldu. Şahsen Vue’nun performansından eskiden de memnundum ve sıkı bir Vue tutkunuydum, artık Vue’ya daha da hayranım.

Render Motoru

Vue 3 çekirdeği ile bütünleşik olarak sıfırdan yazılan render motoru yeni bir şablon derleyicisi (template compiler) içeriyor. Bu yeni derleyici ön bellek (cache) işleme, render edilmiş elemanların yönetimi ve VNode’lar oluşturmak için yeni bir teknik kullanıyor

Açık API’ler / Exposed APIs

Artık Vue API’leri açık hale geldi, yani VUE özellikleri Vue uygulamasının kapsamı (scope) dışında da kullanılabiliyor. Artık Vue’nun reaktiv özellikleri veya gölge DOM’unu bir React uygulaması içerisinde Vue uygulamasını render yapmadan kullanmak mümkün. Bu Vue’yu bir frontend geliştirme aracı olmaktan çıkartıp çok daha geniş alanda kullanılabilecek bir framework haline getiriyor.

Açık API’ler / Exposed APIs

Artık Vue API’leri açık hale geldi, yani VUE özellikleri Vue uygulamasının kapsamı (scope) dışında da kullanılabiliyor. Artık Vue’nun reaktiv özellikleri veya gölge DOM’unu bir React uygulaması içerisinde Vue uygulamasını render yapmadan kullanmak mümkün. Bu Vue’yu bir frontend geliştirme aracı olmaktan çıkartıp çok daha geniş alanda kullanılabilecek bir framework haline getiriyor.

Yeni özel (custom) bileşenler

Vue 2’de üçüncü parti eklentilerle veya kendinizin oluşturması/yönetmesi gereken üç yeni bileşen/özellik Vue core’u içerisine dahil oldu. Bunlar Fragments, Teleport ve Suspense.

Parçalar/Fragments

Vue 2’de bileşenlerimizi bir ana sarıcı içerisinde oluşturmamız gerekiyordu. Sırf Vue’nun gönlü olsun diye DOM içine fazladan eleman eklememiz gerekiyordu. Vue 2’nin render motoru her node’da bir ana eleman olmasını şart koşuyordu.

<!-- Vue 2.x'de Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Yukarıdaki örnekte iki span elemanından oluşan içeriğimizi doğrudan <template> blogu içine yazamıyor, mecburen bir <div> blogunun içine koyuyorduk. Vue 3’te bu sınır ortadan kalktı ve Fragments API sayesinde dilediğimiz sayıda elemanı ana elaman olarak kullanabiliyoruz. Bu hem geliştirici konforu, hem de son kaynak kodda gereksiz elemanlar olmaması bakımından önemli bir iyileştirme oldu.

<!-- Vue 3.x'de Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Işınlanma/Teleport

Teleport bileşenleri adından da anlaşılacağı üzere bir elemanın bir bileşenden başka bir bileşene gönderilmesini sağlayan özel bileşenlerdir. Bu iletişim pencereleri, uyarı mesajları, bağlam menüleri vb. farklı yerlerde gözükmesi gereken elemanlar için pratik bir çözüm sağlıyor.

İlgili Vue dokümantasyonu

Askıyla Alma/Suspense

Bileşenlerimizin son şekillerini almadan önce asenkron bazı işlemler yapması gerekir. Suspense bileşenini, bir bileşen içinde başka bir bileşeni kullanıyorsanız o bileşen yüklenene kadar bir varsayılan göstermek, ya da bir bileşen ilk oluşturulduğunda gerekli veriler sunucudan gelene kadar bu defaultu göstermek için kullanabillirsiniz.

Vue 3’den önce bu mantığı manuel olarak kendimiz kuruyorduk. Vue 3 bu ihtiyacı kendi içinde çözmek için bize suspense bileşenini sunuyor. Harikalar yaratan bir özellik olmasa da, ‘fallback’ ihtiyacını Vue içinde yapısal ve standart bir şekilde çözen bir bileşen.

İlgili Vue dokümantasyonu

API değişiklikleri

Yeni Vue 3 API’sine yeni eklenen özelliklere ek olarak mevcut yöntemlerde de değişiklikler oldu. Bu değişikliklerin bazıları Vue mantığını tamamen değiştirdi ve Vue 3’e geçiş için eski kodlarınızda ufak değişiklikler yapmanızı gerektiriyor.

Yeni Filtre / Filters API’si

Vue 3.x’le birlikte filtreler kullanımdan kaldırıldı. Vue 2’de kullandığımız filtre mantığı yerine method veya computed property kullanmamız öneriliyor. Bileşen bazında tanımlayıp kullandığınız filtreleri o bileşen içinde düzelmek tek yöntem, bunda şüphe yok. Maalesef global tanımlayıp kodunuzun her yerinde kullandığınız filtreler için tek yerden düzeltme olanağı yok. O tek yerden global filtre tanımını değiştirseniz dahi, yine ilgili bileşenleri teker teker açıp filtreyi kullandığınız yerde de değişiklik yapmanız gerekiyor.

İlgili Vue dokümantasyonu

Mount API

Vue 3’de uygulamanın mount edilme yöntemi de değişti. Vue 2 mount edilecek elemanı render edilen içerikle değiştiriyordu. Vue 3 ise içeriği bu elemanın innerHTML’i içine ekliyor. Mantıksal bu değişimin yanı sıra kullanılan syntax’da da ufak değişiklikler var. (Kodunuzu güncellemeniz gereken bir başka nokta)

İlgili Vue dokümantasyonu

Vue 2’de uygulamayı mount etmeden önce Vue örneğini oluşturuyor, daha sonra kullanmak istediğimiz eklenti, filtre, bileşen, router vs. parçaları uygulamayı mount etmeden önce ekliyorduk.

//Vue 2.x'de uygulamayı böyle mount ediyorduk
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';

Vue.use(Vuex);
const store = new Vuex.store({});

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

Vue 3.x’de ise önce uygulama mount ediliyor, akabinde mount edilmiş bu uygulamaya eklenti

//Vue 3.x'de uygulamayı böyle mount ediyoruz
import { createApp } from 'vue';
import { createStore } from 'vuex';
import App from './App.vue';

const store = createStore({});

createApp(App)
.use(store)
.mount('#app');

v-model

Vue 3 ile birlikte v-model kullanımında da faydalı değişikliklere gidildi, Vue 2’de yaşanan tasarım sıkıntılarını ortadan kaldıran ve işlevselliği arttıran bu yeni özellikler için mevcut kodunuzda da değişiklikler yapmanız gerekebilir.

İlgili Vue dokümantasyonu

Composition API

Vue 3.x’deki en büyük yeniliklerden biri de Compositon API. Composition API alıtşığımız yöntem olan ‘options api’ yi bir adım öteye taşıyıp geliştiriciye daha fazla özgürlük veriyor. Büyük ve karmaşık bileşenleri daha iyi organize etmek ve ve okunurluğu kolaylaştırmak, yazdığınız kodların tekrar kullanılabilirliğini arttırmak için için Composition API kullanabilirsiniz.

İlgili Vue dokümantasyonu

Farkedeceğiniz üzere her bölümden sorna Vue dokümantasyonundaki ilgili bölüme bağlantı verdim. Bu başlıkların her biri üzerine bir yazı yazılacak genişlikte anlatım ve örneklendirmeler gerektiriyor. Bunu tek bir yazıda yapmak mümkün olmadığı gibi Vue ile ilgili anlatılacaklar da bunlarla sınırlı değil. Bu nedenle zaman içerisinde Vue ile ilgili yeni yazılar yazarak bu konulara da değineceğim.

Vakit ayırıp okuduğunuz için teşekkür ederim.

Bu yazıda yapılan düzenlemeler

• 11.05.2022: Yazı özeti düzenlendi.