Rumah > Artikel > hujung hadapan web > Apakah kesilapan yang perlu dielakkan dalam Vue3
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.
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.
Begitu juga, menggunakan ref
dalam corak yang pelik sukar untuk dibiasakan.
Ref
Menerima 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 'vue' 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 'vue' 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.
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(['my-event']) emit('my-event') </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(['change', 'delete']) // setup code </script>
Akhir sekali, memandangkan peristiwa kini mesti diisytiharkan, tidak perlu menggunakan pengubah .native
, malah ia telah dialih keluar.
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 setup
RFC.
<script> export default { name: 'CustomName', inheritAttrs: false, customOptions: {} } </script> <script setup> // script setup logic </script>
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.
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'))
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>
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!