Vue Js Cheat Sheet! Memudahkan yang sudah mudah .
Vue.js menjadi salah satu framework yang sukses digunakan dikalangan para deveolper front-end saat ini, kemudian Vue3 hadir dengan banyak fitur baru, artikel ini akan memberikan beberapa fundamental dari Vue2 dan Vue3, pada dasarnya dengan menggunakan Cheat Sheet memudahkan developer dalam pekerjaanya mengembangkan sebuah aplikasi berbasis web, bagi para pemula agar bisa menambah pengetahuan dan menguatkan dasar dasar penggunaan Vue.js.
Vue DOM
> new Vue({}) : Methode ini menghadirkan instance vue.js dari elemen DOM yang ada, pada methode inilah nanti semua kode vue.js kita akan ditentukan.
>template : Template adalah sebuah string yang digunakan sebagai markup untuk instance Vue itu sendiri.
>el : String pemilih CSS atau HTMLElement yang sebenarnya bahwa semua kode Vuejs akan dipasang.
>renderError (createElement, err): Ini memberikan keluaran render ketika fungsi render default mengalami kesalahan. Pertemuan kesalahan akan diteruskan ke fungsi sebagai param kedua.
>render: h => h (App): Fungsi render menerima metode createElement sebagai argumen pertama yang digunakan untuk membuat VNodes. Aliasing createElement to h adalah konvensi umum yang akan kita lihat di ekosistem Vue dan sebenarnya diperlukan untuk JSX. Jika h tidak tersedia dalam cakupan, aplikasi Anda akan menampilkan kesalahan.
Vue Lifecycle Hooks
Sebuah komponen di Vuejs memiliki siklus hidup yang dikelola oleh Vue itu sendiri ketika membuat komponen, memasang komponen ke DOM, memperbarui komponen dan menghancurkan komponen.
>created : Ini dipanggil setelah instance Vue dibuat. itu dipanggil secara sinkron segera setelah instance diinisialisasi, sebelum observasi data dan penyiapan acara / pengamat.
>beforeMount: Dalam fase ini, ia memeriksa apakah ada template yang tersedia di objek yang akan dirender di DOM. Jika tidak ada template yang ditemukan, maka HTML luar dari elemen yang ditentukan dianggap sebagai template.
>beforeUpdate: Ini diaktifkan sebelum perubahan yang mencerminkan elemen DOM asli. Juga perhatikan bahwa hook tidak dipanggil selama rendering sisi server.
>beforeDestroy: Ini dipanggil sebelum instance Vue dihilangkan.
>destroyed: Ini dipanggil setelah instance Vue dihilangkan.
Vue 3 Lifecycle Hooks
Vue 3 juga hadir dengan siklus hidupnya sendiri yang sangat bagus untuk pengembangan. Untuk menggunakannya, kita harus mengimpornya ke dalam komponen kita seperti ini:
import { onMounted, onUpdated, onUnmounted } from ‘vue’
Di sini kita hanya bisa mengimpor hook yang ingin kita gunakan. Berikut adalah kait siklus hidup Vue 3:
>onBeforeMount: Hook ini dipanggil sebelum pemasangan terjadi
>onMounted: Setelah komponen dipasang, hook ini dipanggil
>onBeforeUpdate: Dipanggil setelah data reaktif berubah dan sebelum dirender ulang.
>onUpdated: Dipanggil setelah komponen dirender ulang.
>onBeforeUnmount: Ini dipanggil sebelum instance Vue dihancurkan
>onUnmounted: Ini dipanggil segera setelah Vue Instance dihancurkan.
>onActivated: Komponen di Vuejs dapat tetap hidup, hook ini dipanggil saat komponen ini diaktifkan.
>onDeactivated: Ini dipanggil setelah komponen yang tetap hidup dinonaktifkan.
>onErrorCaptured: Ini bagus untuk penanganan kesalahan. Hook ini dipanggil setelah kesalahan ditangkap dalam komponen anak.
Vue Global Configs
Objek Vue.config adalah tempat kita dapat mendefinisikan semua konfigurasi global Vuejs kita. Salah satu bagian penting dari Vue Cheat Sheet.
>Vue.config.silent: Konfigurasi ini menonaktifkan semua log dan peringatan Vuejs.
>Vue.config.devtools: Ini menambahkan konfigurasi apakah akan mengizinkan pemeriksaan vue-devtools atau tidak.
>Vue.config.performance: Konfigurasi ini memungkinkan initalisasi komponen, kompilasi, render, dan patch pelacakan kinerja di timeline devtool browser.
>Vue.config.productionTip: Ini memungkinkan tip produksi pada startup Vue.
>Vue.config.ignoredElements: Make Vue mengabaikan elemen khusus yang ditentukan di luar Vue (misalnya, menggunakan API Komponen Web). Jika tidak, ini akan memunculkan peringatan tentang elemen kustom Tidak Dikenal.
>Vue.config.errorHandler: Konfigurasi ini menetapkan penangan untuk kesalahan yang tidak tertangkap selama fungsi render komponen dan pengamat.
>Vue.config.optionMergeStrategies: Ini mendefinisikan strategi penggabungan kustom untuk opsi. Strategi penggabungan ini menerima nilai dari opsi yang ditentukan pada instance induk dan anak sebagai argumen pertama dan kedua.
