Inilah Beberapa Kesalahan Yang Harus Dihindari Saat Starting Dengan Vue 3
Vue 3 sudah stabil untuk beberapa saat sekarang ini. Banyak basis kode menggunakannya dalam produksi, dan semua orang pada akhirannya harus bermigrasi. Saya memiliki kesempatan untuk melakukannya dan mencari kesalahan saya, yang kemungkinan ingin Anda jauhi.
1. Menggunakan Helper Reaktif untuk Mendeklarasikan Primitif
Deklarasi data dahulunya gampang, tapi saat ini banyak Helper ada. Ketentuan umum saat ini adalah:
Gunakan reaktif untuk Object, Array, Map, Set
Gunakan ref untuk String, Number, Boolean
Menggunakan reaktif untuk primitif akan hasilkan peringatan, dan nilainya tidak dibuat reaktif.
/* DOES NOT WORK AS EXPECTED */
<script setup>
import { reactive } from "vue";
const count = reactive(0);
</script>[Peringatan Vue]: nilai tidak dapat dibuat reaktif
Cobalah sendiri
Paradoksnya sebaliknya bekerja! Misalnya, menggunakan ref untuk mendeklarasikan Array akan secara internal memanggil reaktif sebagai gantinya.
2. Merusak nilai Reaktif
Bayangkan Anda memiliki objek reaktif dengan penghitung dan tombol untuk menaikkannya.
<template>
Counter: {{ state.count }}
<button @click="add">Increase</button>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
const state = reactive({ count: 0 });
function add() {
state.count++;
}
return {
state,
add,
};
},
};
</script>Cukup mudah dan berfungsi seperti yang diharapkan, tetapi Anda mungkin tergoda untuk memanfaatkan destruction javascript dan melakukan hal berikut.
/* DOES NOT WORK AS EXPECTED */
<template>
<div>Counter: {{ count }}</div>
<button @click="add">Increase</button>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
const state = reactive({ count: 0 });
function add() {
state.count++;
}
return {
...state,
add,
};
},
};
</script>Cobalah sendiri
Kode terlihat sama dan, berdasarkan pengalaman kami sebelumnya, seharusnya berfungsi, tetapi kenyataannya, tracking reaktivitas Vue berfungsi melalui akses properti. Ini berarti kami tidak dapat menetapkan atau merusak objek reaktif karena koneksi reaktivitas ke referensi pertama hilang. Ini adalah salah satu batasan dalam menggunakan Helper reaktif.
3. Menjadi Bingung dengan .value
Pada catatan yang sama, salah satu kebiasaan menggunakan ref mungkin sulit untuk dibiasakan.
Ref mengambil nilai dan mengembalikan objek reaktif. Nilai tersedia di dalam objek di bawah properti .value.
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1Tapi referensi dibuka saat digunakan dalam template dan .value tidak diperlukan.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
{{ count }} // no .value needed
</button>
</template>Tetapi berhati-hatilah! Membuka package hanya berfungsi pada properti tingkat atas. Cuplikan berikut akan menghasilkan [Object Object]
// DON'T DO THIS
<script setup>
import { ref } from 'vue'
const object = { foo: ref(1) }
</script>
<template>
{{ object.foo + 1 }} // [object Object]
</template>Menggunakan.value secara benar memerlukan waktu. Walau terkadang saya melupakannya, pertama kalinya saya merasakan diri saya menggunakannya seringkali dibanding yang diperlukan.
4. Emitted Events
Semenjak rilis awalnya Vue, komponen turunan bisa berbicara dengan induknya menggunakan emisi. Anda perlu menambah pendengar khusus untuk dengarkan acara.
this.$emit('my-event')<my-component @my-event="doSomething" />Sekarang emisi harus dideklarasikan menggunakan makro defineEmits.
<script setup>
const emit = defineEmits(['my-event'])
emit('my-event')
</script>Hal yang lain harus diingat adalah jika baik defineEmits atau defineProps (dipakai untuk mengumumkan props) tak perlu diimpor. Mereka ada secara otomatis saat menggunakan persiapan skrip.
<script setup>
const props = defineProps({
foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup code
</script>Terakhir, karena peristiwa sekarang harus dideklarasikan, penggunaan pengubah .native tidak diperlukan, dan sebenarnya sudah dihapus.
5. Mendeklarasikan Opsi Tambahan
Ada beberapa properti metode API Opsi yang tidak didukung dari penyiapan skrip
- name
- inheritAttrs
- Opsi khusus yang dibutuhkan oleh plugin atau perpustakaan
Solusinya adalah memiliki 2 skrip berbeda dalam komponen yang sama seperti yang didefinisikan dalam RFC pengaturan skrip.
6. Linting
skrip setup merangkum banyak keajaiban, dan linter javascript tidak menyukai beberapa hal. Misalkan tidak mendeklarasikan defineEmits atau segala hal yang berhubungan dengan .value akan hasilkan peringatan. Menggunakan vue-eslint-parser v9.0.0+ benar-benar disarankan untuk menghilangkan kebisingan.
7. Mengartikan Komponen Async
Komponen asinkron awalnya dideklarasikan dengan menyertakannya dalam sebuah fungsi.
const asyncModal = () => import('./Modal.vue')Sejak Vue 3, komponen async perlu didefinisikan secara eksplisit dengan bantuan defineAsyncComponent.
import { defineAsyncComponent } from 'vue'
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))8. Menggunakan Package yang Tidak Perlu di Template
Sebuah komponen root tunggal untuk template komponen dibutuhkan di Vue 2, yang kadang mengenalkan package yang tidak perlu.
<!-- Layout.vue -->
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>Ini tidak lagi terjadi, karena banyak komponen root sekarang didukung.
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>9. Menggunakan Event Lifecycle yang Salah
Semua peristiwa daur hidup komponen diganti namanya, baik dengan menambahkan awalan on atau dengan mengubah nama sepenuhnya. Anda dapat memeriksa semua perubahan dalam grafik berikut.
10. Melewati Dokumentasi
Terakhir, dokumentasi resmi sudah diganti untuk menggambarkan API baru dan menyertakan banyak catatan berharga, tutorial, dan praktek terbaik. Bahkan juga bila Anda seorang insinyur Vue 2 berpengalaman, Anda pasti mempelajari suatu hal yang baru dengan membacanya.
Kesimpulan
Setiap rangka kerja mempunyai kurva pembelajaran, dan Vue 3 tidak diragukan kembali lebih curam dibanding Vue 2. Saya tetap tidak percaya jika usaha migrasi antara versi bisa dibetulkan, tapi komposisi API lebih bersih dan berasa alami sesudah Anda memahaminya.