Apakah kesilapan yang perlu dielakkan dalam Vue3

Mengisytiharkan nilai primitif menggunakan Reaktif

Pengisytiharan data adalah sangat mudah pada masa lalu, tetapi kini terdapat banyak fungsi pembantu untuk kami gunakan. Peraturan semasa ialah:

• Gunakan reactive untuk mengisytiharkan Object, Array, Map, Set

• Gunakan ref untuk mengisytiharkan String, Number, Boolean

Menggunakan reactive untuk nilai primitif akan mengembalikan amaran dan nilai itu tidak akan menjadi data reaktif.

/* DOES NOT WORK AS EXPECTED */
<script setup>
import { reactive } from "vue";

const count = reactive(0);
</script>

Secara paradoks, cara lain mungkin. Contohnya, mengisytiharkan ref menggunakan Array akan memanggil reactive secara dalaman.

Menyahbina data reaktif

Andaikan anda mempunyai objek reaktif dengan sifat count dan butang yang menambah count.

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

Logik di atas agak lurus ke hadapan dan berfungsi seperti yang diharapkan, tetapi anda mungkin boleh mengambil kesempatan daripada pemusnahan JavaScript untuk melakukan perkara 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>

Kod itu kelihatan sama, dan berdasarkan apa kita pernah lihat sebelum ini Pengalaman sepatutnya boleh dilaksanakan, tetapi sebenarnya, penjejakan reaktif Vue adalah melalui akses harta benda. Ini bermakna kita tidak boleh menetapkan atau memusnahkan objek reaktif kerana sambungan reaktif kepada rujukan pertama telah terputus. Ini adalah salah satu batasan menggunakan fungsi pembantu reaktif.

Keliru tentang .value

Begitu juga, menggunakan ref dalam corak yang pelik sukar untuk dibiasakan.

RefMenerima nilai dan mengembalikan objek reaktif. Nilai tersedia di dalam objek di bawah atribut .value.

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

Tetapi ref dibongkar apabila digunakan dalam fail templat dan .value tidak diperlukan.

<script setup>
import { ref } from &#39;vue&#39;

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }} // no .value needed
  </button>
</template>

Tetapi berhati-hati! Membuka bungkus hanya berfungsi dalam sifat peringkat teratas. Coretan kod di bawah menjana [object Object].

// DON'T DO THIS
<script setup>
import { ref } from &#39;vue&#39;

const object = { foo: ref(1) }

</script>

<template>
  {{ object.foo + 1 }}  // [object Object]
</template>

Menggunakan .value dengan betul mengambil masa. Walaupun ada kalanya saya terlupa cara menggunakannya, saya semakin kerap menggunakannya.

Acara pencetus

Sejak keluaran awal Vue, komponen anak boleh berkomunikasi dengan komponen induk menggunakan emit. Anda hanya perlu menambah pendengar acara tersuai untuk mendengar acara.

// 子组件
this.$emit('my-event')

// 父组件
<my-component @my-event="doSomething" />

Kini, emit perlu diisytiharkan menggunakan defineEmits.

<script setup>
const emit = defineEmits([&#39;my-event&#39;])
emit(&#39;my-event&#39;)
</script>

Satu lagi perkara yang perlu diingat ialah defineEmits mahupun defineProps tidak perlu diimport. Ia tersedia secara automatik apabila menggunakan script setup.

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits([&#39;change&#39;, &#39;delete&#39;])
// setup code
</script>

Akhir sekali, memandangkan peristiwa kini mesti diisytiharkan, tidak perlu menggunakan pengubah .native, malah ia telah dialih keluar.

Isytihar pilihan tambahan

Kaedah Options API mempunyai beberapa sifat yang tidak disokong dalam script setup.

• name

• inheritAttrs

• Penyesuaian diperlukan oleh pemalam atau perpustakaan Pilihan

Penyelesaiannya ialah dengan menyediakan dua skrip berbeza dalam komponen yang sama seperti yang ditakrifkan oleh script setupRFC.

<script>
  export default {
    name: &#39;CustomName&#39;,
    inheritAttrs: false,
    customOptions: {}
  }
</script>

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

Menggunakan Transformasi Reaktif

Transformasi Kereaktifan ialah ciri percubaan tetapi kontroversi Vue 3 yang bertujuan untuk memudahkan cara komponen diisytiharkan. Ideanya adalah untuk memanfaatkan transformasi masa kompilasi untuk membongkar ref secara automatik dan menjadikan .value usang. Tetapi kini ia ditinggalkan dan akan dialih keluar dalam Vue 3.3. Ia masih tersedia sebagai pakej, tetapi kerana ia bukan sebahagian daripada teras Vue, sebaiknya jangan melaburkan masa di dalamnya.

Mentakrifkan komponen tak segerak

Sebelum ini komponen tak segerak telah diisytiharkan dengan membalutnya dalam fungsi.

const asyncModal = () => import('./Modal.vue')

Bermula dari Vue 3, komponen tak segerak perlu ditakrifkan secara eksplisit menggunakan fungsi pembantu defineAsyncComponent.

import { defineAsyncComponent } from 'vue'

const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

Menggunakan elemen berbalut berlebihan dalam templat

Dalam Vue 2, templat komponen memerlukan satu elemen akar, yang kadangkala memperkenalkan elemen berbalut yang tidak perlu.

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Ini tidak lagi diperlukan kerana berbilang elemen akar kini disokong. ????

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Menggunakan kitaran hayat yang salah

Semua peristiwa kitaran hayat komponen telah dinamakan semula, sama ada menambah awalan on atau menukar nama sepenuhnya. Anda boleh melihat semua perubahan dalam carta di bawah.

Atas ialah kandungan terperinci Apakah kesilapan yang perlu dielakkan dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!