10 Kesalahan Umum Yang Harus Dihindari Saat Starting Dengan Vue 3

Vue 3 sudah stabil untuk beberapa saat sekarang ini. Banyak basis kode menggunakannya dalam produksi, dan semuanya orang pada akhirannya harus bermigrasi. Saya mempunyai kesempatan untuk melakukannya dan melacak kesalahan saya, yang kemungkinan ingin Anda hindari.

1. Menggunakan Pembantu Reaktif untuk Mengumumkan Primitif

Deklarasi data dahulunya gampang, tapi saat ini banyak pembantu ada. Aturan umum saat ini adalah:

Gunakan reaktif untuk Object, Array, Map, Set

Gunakan ref untuk String, Number, Boolean

Menggunakan reaktif untuk primitif akan mendatangkan 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 reactive 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 perusakan 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 kelihatan sama dan, berdasarkan pengalaman kami sebelumnya, seharusnya berfungsi, tapi kenyataannya, pencarian reaktivitas Vue berfungsi lewat akses properti. Ini berarti kami tidak bisa menetapkan atau merusak objek reaktif karena jaringan reaktivitas ke rekomendasi pertama hilang. Ini adalah batas dalam menggunakan pembantu reaktif.

3. Bingung dengan `.value`

Pada catatan yang sama, salah satu kebiasaan menggunakan ref bisa jadi 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) // 1

Tapi 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 bungkus 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 dengan benar membutuhkan waktu. Meskipun kadang-kadang saya melupakannya, pertama kali saya mendapati diri saya menggunakannya lebih sering daripada yang dibutuhkan.

4. Acara yang Dikeluarkan

Semenjak rilis awal Vue, komponen turunan bisa berkomunikasi dengan induknya menggunakan emisi. Anda perlu menambah pendengar khusus untuk mendengarkan 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 lain yang harus diingat adalah jika baik defineEmits atau defineProps (digunakan untuk mendeklarasikan props) tak perlu diimpor. Mereka ada secara otomatis saat menggunakan skrip setup.

<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 scrip setup

name
inheritAttrs
Opsi khusus yang dibutuhkan oleh plugin atau pustaka

Solusinya adalah memiliki 2 skrip berbeda dalam komponen yang sama seperti yang ditentukan dalam pengaturan skrip RFC.

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
  }
</script>

<script setup>
  // script setup logic
</script>

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 Wrapping yang Tidak Perlu di Template

Sebuah komponen root tunggal untuk template komponen dibutuhkan di Vue 2, yang kadang mengenalkan wrapping 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.