15 masalah biasa dalam pembangunan baldi keluarga Vue3 (membantu anda mengelakkan perangkap dengan cepat)

Artikel ini akan berkongsi dengan anda beberapa masalah biasa dalam pembangunan baldi keluarga Vue3, supaya anda boleh mengelakkan perangkap dan ranjau saya harap ia dapat membantu anda!

Saya baru-baru ini mula menggunakan Vue3 dan menyelesaikan 3 projek. Hari ini saya akan mengambil sedikit masa untuk menyelesaikannya dan berkongsi dengan anda 15 daripadanya masalah yang lebih biasa. Pada asasnya, alamat dokumen yang sepadan disiarkan, sila baca lebih banyak dokumen ~ Tiga projek yang telah siap pada asasnya dibangunkan menggunakan Vue3 (mod persediaan-skrip) Family Bucket, jadi ia diringkaskan terutamanya dalam beberapa aspek:

• Vue3
• Vite
• VueRouter
• Pinia
• ElementPlus

(Perkongsian video pembelajaran: video vue tutorial )

1. Vue3

1. >

Alamat dokumen: https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

Vue2.x dan Vue3.x life kaedah kitaran Perubahannya agak besar, sila lihat dahulu:

Pada masa ini Vue3.x masih menyokong kitaran hayat Vue2.x, tetapi tidak disyorkan untuk mencampur dan padan. Anda boleh menggunakan 2.x dalam kitaran hayat peringkat awal, cuba gunakan pembangunan kitaran hayat 3.x kemudian.

Memandangkan saya menggunakan mod

, saya terus menggunakan fungsi kitaran hayat Vue3.x:

script-srtup

Anda juga boleh melihat pada masa pelaksanaan setiap cangkuk. Dokumen:

// A.vue\
<script setup>\
import { ref, onMounted } from "vue";\
let count = ref<number>(0);\
\
onMounted(() => {\
count.value = 1;\
})\
</script>

v3.cn.vuejs.org/guide/insta…

2. Dalam mod persediaan skrip, komponen induk memperoleh data komponen anak

Alamat dokumen:

v3.cn.vuejs.org/api/sfc-scr…

Di sini kami memperkenalkan terutamanya cara komponen induk memperoleh takrifan dalaman komponen kanak-kanak, mengenai komunikasi komponen ibu bapa-anak, anda boleh membaca dokumentasi untuk butiran lanjut:

v3.cn.vuejs.org/guide/compo…

Kita boleh menggunakan

makro pengkompil global

's makro, yang perlu mendedahkan parameter dalam komponen anak kepada komponen induk dan menggunakan kaedah sebagai parameter yang diperolehi oleh komponen induk contoh komponen anak melalui kaedah rujukan templat, dan boleh memperoleh nilai yang sepadan: defineExpose{key: vlaue}

// 子组件\
<script setup>\
let name = ref("pingan8787")\
defineExpose({ name }); // 显式暴露的数据，父组件才可以获取\
</script>\
\
// 父组件\
<Chlid ref="child"></Chlid>\
<script setup>\
let child = ref(null)\
child.value.name //获取子组件中 name 的值为 pingan8787\
</script>

Nota

:

Makro pengkompil global boleh hanya digunakan dalam mod persediaan skrip;
• Dalam mod persediaan skrip, makro boleh digunakan secara langsung tanpa
• mod persediaan skrip menyediakan sejumlah 4 makro , termasuk: defineProps, defineEmits, defineExpose dan withDefaults. import
• 3. Sediakan nilai lalai untuk prop

definedProps Documentation:

v3.cn.vuejs.org/api/sfc -scr …

Dokumentasi:

v3.cn.vuejs.org/api/sfc-scr…Diperkenalkan sebelum ini ialah 4

kompilasi global yang disediakan oleh skrip -mod persediaan Makro peranti

belum diperkenalkan secara terperinci lagi Bahagian ini memperkenalkan

dan . Makro boleh digunakan untuk mentakrifkan parameter input komponen, seperti berikut: definePropswithDefaultsdefinePropsDi sini kita hanya mentakrifkan jenis dua atribut

dan

<script setup>\
let props = defineProps<{\
schema: AttrsValueObject;\
modelValue: any;\
}>();\
</script>

dalam

atribut, ialah ia tidak menyediakan cara untuk menetapkan nilai lalai props. propsschemaMalah, kita boleh mencapai ini melalui makro withDefaults: modelValuedefineProps

withDefaults Fungsi helper menyediakan pemeriksaan jenis untuk nilai lalai dan memastikan bahawa jenis prop yang dikembalikan telah dipadamkan. Bendera pilihan untuk sifat yang mengisytiharkan nilai lalai.

<script setup>\
let props = withDefaults(\
defineProps<{\
schema: AttrsValueObject;\
modelValue: any;\
}>(),\
{\
schema: [],\
modelValue: &#39;&#39;\
}\
);\
</script>

4. Konfigurasikan parameter tersuai global

Alamat dokumen: v3.cn.vuejs.org/guide/migra…

在 Vue2.x 中我们可以通过 Vue.prototype 添加全局属性 property。但是在 Vue3.x 中需要将 Vue.prototype 替换为 config.globalProperties 配置：

// Vue2.x\
Vue.prototype.$api = axios;\
Vue.prototype.$eventBus = eventBus;\
\
// Vue3.x\
const app = createApp({})\
app.config.globalProperties.$api = axios;\
app.config.globalProperties.$eventBus = eventBus;

使用时需要先通过 vue 提供的 getCurrentInstance方法获取实例对象：

5. v-model 变化

文档地址：v3.cn.vuejs.org/guide/migra…

当我们在使用 v-model指令的时候，实际上 v-bind 和 v-on 组合的简写，Vue2.x 和 Vue3.x 又存在差异。

Vue2.x

在子组件中，如果要对某一个属性进行双向数据绑定，只要通过 this.$emit('update:myPropName', newValue) 就能更新其 v-model绑定的值。

• Vue3.x

script-setup模式下就不能使用 this.$emit去派发更新事件，毕竟没有 this，这时候需要使用前面有介绍到的 defineProps、defineEmits 两个宏来实现：

父组件使用的时候就很简单：

6. 开发环境报错不好排查

文档地址：v3.cn.vuejs.org/api/applica…

Vue3.x 对于一些开发过程中的异常，做了更友好的提示警告，比如下面这个提示：

这样能够更清楚的告知异常的出处，可以看出大概是 <elinput>这边的问题，但还不够清楚。这时候就可以添加 Vue3.x 提供的<strong>全局异常处理器</strong>，更清晰的<strong>输出错误内容和调用栈信息，代码如下</strong>：</elinput>

这时候就能看到输出内容如下：

一下子就清楚很多。当然，该配置项也可以用来集成错误追踪服务 Sentry 和 Bugsnag。推荐阅读：Vue3 如何实现全局异常处理？

7. 观察 ref 的数据不直观，不方便

当我们在控制台输出 ref声明的变量时。

会看到控制台输出了一个 RefImpl对象：

看起来很不直观。我们都知道，要获取和修改 ref声明的变量的值，需要通过 .value来获取，所以你也可以：

这里还有另一种方式，就是在控制台的设置面板中开启 「Enable custom formatters」选项。

image.png

image.png

这时候你会发现，控制台输出的 ref的格式发生变化了：

更加清晰直观了。

Saya menemui kaedah ini dalam "Reka Bentuk dan Pelaksanaan Vue.js", tetapi saya tidak menemui sebarang pengenalan yang berkaitan dalam dokumen Jika sesiapa menemuinya, sila beritahu saya~

2. Vite

1. Masalah menggunakan import dinamik Vite

Alamat dokumen: cn.vitejs. dev/ guide/featu…

Pelajar yang menggunakan webpack harus tahu bahawa dalam webpack anda boleh mengimport fail secara dinamik melalui require.context:

Dalam Vite, kami boleh menggunakan dua kaedah ini untuk mengimport fail secara dinamik:

• import.meta.glob

Fail lalai yang dipadankan dengan kaedah ini ialah lazy Loading dilaksanakan melalui import dinamik Apabila membina, ia akan memisahkan bongkah bebas, iaitu import tak segerak Apa yang dikembalikan ialah Promise, yang memerlukan asynchronous operasi. Penggunaannya adalah seperti berikut:

• import.meta.globEager

Kaedahnya ialah mengimport semua modul secara terus, dan Import serentak, dan hasil yang dikembalikan boleh dikendalikan terus melalui gelung for...in Kaedah penggunaan adalah seperti berikut:

Jika anda hanya menggunakan import asynchronous komponen Vue3, anda juga boleh terus menggunakan Vue3 defineAsyncComponent API untuk memuatkan:

2. Vite configure alias jenis alias

Alamat dokumen:

cn.vitejs.dev/config/#res…

Apabila projek lebih kompleks, selalunya perlu konfigurasikan alias laluan alias untuk memudahkan beberapa kod:

juga sangat mudah untuk dikonfigurasikan dalam Vite, cuma konfigurasikannya dalam

daripada vite.config.ts: resolve.alias

Jika anda menggunakan TypeScript , editor akan menggesa amaran bahawa laluan itu tidak wujud⚠️ Pada masa ini, anda boleh menambah konfigurasi

dalam tsconfig.json: compilerOptions.paths

3. Vite konfigurasi Global scss

Alamat dokumen:

cn.vitejs.dev/config/#css …

Apabila kita perlu menggunakan konfigurasi scss Pembolehubah tema (seperti

), kaedah mixin (seperti

), dsb., seperti: $primary@mixin lines

Kami boleh mengkonfigurasi fail konfigurasi tema scss dalam

Dalam

: vite.config.tscss.preprocessorOptions.scss.additionalData

Jika anda tidak mahu gunakan fail konfigurasi scss, anda juga boleh terus menulis kod scss:

3 VueRouter

1 parameter penghalaan dalam mod persediaan skrip

Alamat dokumen:

router.vuejs...

Sejak. dalam mod

, tiada

boleh digunakan, anda tidak boleh mendapatkan parameter penghalaan terus melalui script-setup atau this dan penghalaan lompat. Apabila kita perlu mendapatkan parameter penghalaan, kita boleh menggunakan kaedah this.$router yang disediakan oleh this.$route untuk mendapatkannya, seperti berikut: vue-routeruseRoute

Jika anda ingin membuat lompatan laluan, anda boleh menggunakan nilai pulangan kaedah useRouter untuk melompat:

4 >

1. Pembolehubah yang dimusnahkan kedai tidak dikemas kini selepas pengubahsuaian

Alamat dokumen:

pinia.vuejs.org/core-concep…

Apabila kita menyahbina pembolehubah kedai dan kemudian mengubah suai nilai pembolehubah pada kedai, paparan tidak dikemas kini:

Pada kali ini, klik butang untuk mencetuskan ,

pada paparan tidak berubah. Ini kerana stor adalah objek reaktif, dan apabila dimusnahkan, tindak balasnya akan musnah. Jadi kita tidak boleh dekonstruksi secara langsung. Dalam kes ini, anda boleh menggunakan kaedah alat changeName yang disediakan oleh Pinia Ia juga sangat mudah untuk digunakan Anda hanya perlu membungkus objek yang perlu dinyahkonstruk melalui kaedah name Logik yang lain tetap tidak berubah. storeToRefsstoreToRefs

Ubah suai nilainya dengan cara ini dan paparan akan dikemas kini serta-merta.

2. Cara Pinia mengubah suai status data

Menurut pelan yang diberikan oleh laman web rasmi, pada masa ini terdapat tiga cara untuk mengubah suainya:

Ubah suai status data tunggal melalui
• tugasan;

  store.属性名

Kaedah ini digunakan dalam bahagian sebelumnya:

Ubah suai status berbilang data melalui kaedah
• ; /api/interfa…

  $patch

Apabila kita perlu mengubah suai status beberapa keping data pada masa yang sama, jika kita masih mengikut kaedah di atas, kita boleh menulis seperti ini:

Tulis seperti ini Tiada masalah, tetapi laman web rasmi Pinia telah menyatakan bahawa menggunakan

akan lebih cekap dan berprestasi lebih baik, jadi apabila mengubah suai berbilang data, ia lebih disyorkan untuk menggunakan

, dan kaedah penggunaannya juga sangat mudah:

$patchUbah suai status berbilang data melalui kaedah $patch;

Anda juga boleh menentukan kaedah tindakan dalam stor Untuk mengemas kini:

• action

  Apabila menggunakan:

Tiga kaedah ini boleh mengemas kini status data kedai di Pinia.

5 Element Plus

1 @charset warning apabila element-plus dibungkus

Elemen yang baru dipasang- Plus. adalah perkara biasa semasa peringkat pembangunan dan tidak menggesa sebarang amaran Walau bagaimanapun, semasa proses pembungkusan, konsol mengeluarkan kandungan amaran berikut:

Baca dalam isu rasmi untuk. lama: github.com/element-plu…

Cuba konfigurasikan

dalam , hasilnya juga tidak sah:

Akhirnya dalam Cari penyelesaian dalam isu rasmi:

vite.config.tscharset: false

2 konfigurasi pek bahasa Cina

Alamat dokumen: element-plus.gitee.io/zh-CN/guide…

Komponen lalai elemnt-plus adalah dalam bahasa Inggeris:

Kami boleh bertukar kepada bahasa Cina dengan memperkenalkan pek bahasa Cina dan menambahkannya pada konfigurasi ElementPlus:

Pada masa ini, anda boleh melihat bahawa teks komponen dalam ElementPlus menjadi bahasa Cina.

Ringkasan

Di atas ialah ringkasan terbaru saya tentang pengalaman mengelakkan perangkap selepas tiga projek bermula kepada baldi keluarga Vue3 yang sebenar. Sebenarnya, Ramai daripada mereka diperkenalkan dalam dokumentasi, tetapi saya tidak biasa dengannya pada mulanya. Saya juga berharap semua orang akan membaca dokumentasi dengan lebih banyak~

Mod persediaan skrip Vue3 sememangnya menjadi semakin popular seperti yang ditulis.

Sekiranya terdapat sebarang masalah dengan kandungan artikel ini, sila berasa bebas untuk mengulas dan membincangkannya bersama.

[Tutorial video berkaitan yang disyorkan: tutorial pengenalan vuejs, bermula dengan bahagian hadapan web]