Vue 3 belum dirilis secara resmi, tetapi tim Vue telah merilis versi Alfa bagi kami para pengembang untuk menggunakan beberapa fitur yang akan dikirimkan dengan Vue 3.

Pada saat menulis artikel ini, kami memiliki versi (Alpha-10) yang tersedia untuk bereksperimen.

Meskipun ini belum siap untuk digunakan dalam produksi, sebaiknya pelajari fitur-fitur baru terlebih dahulu sehingga ketika versi stabil dirilis, kita dapat langsung mulai menggunakannya atau memigrasi aplikasi Vue 2 yang ada ke versi 3.0 untuk menggunakan fitur terbaru.

Setup

Kita akan menggunakan penyiapan berbasis WebPack. Untuk melakukan ini, clone repositori ini:

git clone https://github.com/vuejs/vue-next-webpack-preview.git vue-next
cd vue-next

Lalu install package

npm install

Untuk menjalankan aplikasi, jalankan yang berikut ini:

npm run dev

Buka localhost: 8080 di browser Anda, dan Anda dapat melihat aplikasi counter sederhana. Buka file package.json, Anda dapat melihat versi Vue di sini. Pada saat menulis artikel ini, versinya adalah 3.0.0-alpha.8. Buka App.vue dan Anda akan melihat metode setup (), yaitu API Komposisi sudah digunakan di sini. Kita mungkin melihat beberapa kesalahan lint dari plugin resmi Vue, eslint-plugin-vue, karena linters belum diperbarui untuk memahami sintaks baru.

Sebelum kita mulai membuat kode, mari kita bahas fitur-fitur baru di Vue 3.

Fitur baru di Vue 3

Vue 3 lebih cepat, lebih kecil dalam ukuran file, dan dilengkapi dengan dukungan TypeScript yang lebih baik. Beberapa fitur baru yang dapat kita diskusikan dan pelajari untuk diterapkan dalam artikel ini meliputi:

     API Komposisi (Sekarang sudah ada di dalamnya)
     Beberapa elemen root (sintaks Template)
     Ketegangan
     Beberapa V-model
     Reaktivitas yang lebih baik
     Portal

API Komposisi

Composition API diluncurkan sebagai plugin beberapa bulan lalu, jadi tidak ada yang baru di sana, tetapi di Vue 3 kami tidak perlu menginstalnya seperti plugin lagi. Sekarang, ini sudah ada dalam paket dan dapat digunakan langsung tanpa penyiapan tambahan apa pun.

Ada dua keuntungan utama menggunakan API Komposisi:

• Organisasi yang lebih baik
• Berbagi / menggunakan kembali kode

Vue 3 akan tetap mendukung Options API, jadi jika Anda merasa tidak memerlukan API komposisi, Anda selalu dapat menggunakan metode tradisional yang digunakan di Vue 2.

Jika Anda baru mengenal Composition API, berikut adalah cara kami menggunakannya untuk mengimplementasikan komponen:

<template>
  <div class="counter">
    <p>count: {{ count }}</p>
    <p>NewVal (count + 2): {{ countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p> Message: {{ msg }} </p>
    <button @click="changeMessage()">Change Message</button>
  </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
  setup() {
/* ---------------------------------------------------- */
    let count = ref(0)
    const countDouble = computed(() => count.value * 2)
    watch(count, newVal => {
      console.log('count changed', newVal)
    })
    const inc = () => {
      count.value += 1
    }
    const dec = () => {
      if (count.value !== 0) {
        count.value -= 1
      }
    }
/* ---------------------------------------------------- */
    let msg= ref('some text')
    watch(msg, newVal => {
      console.log('msg changed', newVal)
    })
    const changeMessage = () => {
      msg.value = "new Message"
    }
/* ---------------------------------------------------- */
    return {
      count,
      inc,
      dec,
      countDouble,
      msg,
      changeMessage
    }
  }
}
</script>

Dan berikut kode yang setara di Options API:

<template>
  <div class="counter">
    <p>count: {{ count }}</p>
    <p>NewVal (count + 2): {{ countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p> Message: {{ msg }} </p>
    <button @click="changeMessage()">Change Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      msg: 'some message'
    }
  },
  computed: {
    countDouble() {
      return this.count*2
    }
  },
  watch: {
    count(newVal) {
      console.log('count changed', newVal)
    },
    msg(newVal) {
      console.log('msg changed', newVal)
    }
  },
  methods: {
     inc() {
      this.count += 1
    },
    dec() {
      if (this.count !== 0) {
        this.count -= 1
      }
    },
    changeMessage() {
      msg = "new Message"
    }
  }
 
}
</script>

Kita dapat melihat bahwa menggunakan Composition API memungkinkan kita mengatur dengan lebih baik dengan menyimpan kode (status, metode, properti yang dihitung, pengamat, dll) dari fitur tertentu bersama-sama, yang tidak mungkin dilakukan di Options API.

Dalam contoh di atas, kode untuk penghitung dan kode untuk mengubah pesan dipisahkan dengan jelas di API Komposisi.

Seiring bertambahnya ukuran komponen, pengorganisasian kode menjadi faktor penting. Pengembang baru mana pun dapat dengan mudah memahami kode tanpa menghabiskan terlalu banyak waktu menganalisis semua baris kode.

Sebelumnya, kami dapat menggunakan Mixins untuk membagikan kode. Namun, sulit untuk melacak status dan metode di berbagai komponen, dan Mixins berpotensi menimpa status atau metode yang ada di komponen jika tidak berhati-hati.