15 häufige Probleme bei der Entwicklung von Vue3-Familien-Buckets (hilft Ihnen, Fallstricke schnell zu vermeiden)

In diesem Artikel werden einige häufige Probleme bei der Entwicklung des Vue3-Familien-Buckets erläutert, damit Sie Fallstricke und Minenfelder vermeiden können.

Ich habe vor kurzem mit der Verwendung von Vue3 begonnen und bin auf viele Probleme gestoßen. Heute werde ich mir die 15 häufigsten Probleme mitteilen Gib mir mehr. Schau dir das Dokument an ~ Die drei abgeschlossenen Projekte werden grundsätzlich mit Vue3 (Setup-Skript-Modus) entwickelt und sind daher hauptsächlich in mehreren Aspekten zusammengefasst:

• Vue3
• Vite
• VueRouter
• Pinia
• ElementPlus

(Lernvideo-Sharing: vue-Video-Tutorial)

1. Änderungen in den Lebenszyklusmethoden von Vue2.x und Vue3.x

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

Die Lebenszyklusmethoden von Vue2.x und Vue3.x haben sich ziemlich verändert, werfen wir zuerst einen Blick darauf:

Vue3.x wird im aktuellen Vue2.x-Lebenszyklus noch unterstützt, es wird jedoch nicht empfohlen, den 2.x-Lebenszyklus in der frühen Phase zu verwenden und später zu versuchen, den 3.x-Lebenszyklus zu verwenden .

Da ich den script-srtup-Modus verwende, verwende ich direkt die Lebenszyklusfunktion von Vue3.x:

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

Für den Ausführungszeitpunkt jedes Hooks können Sie sich auch die Dokumentation ansehen: a href="https://v3.cn.vuejs.org/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B % BE%E7%A4%BA" target="_blank" textvalue="v3.cn.vuejs.org/guide/insta…">v3.cn.vuejs.org/guide/insta…

script-srtup模式，所以都是直接使用 Vue3.x 的生命周期函数：

// 子组件\
<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>

每个钩子的执行时机点，也可以看看文档：v3.cn.vuejs.org/guide/insta…

2. script-setup 模式中父组件获取子组件的数据

文档地址：v3.cn.vuejs.org/api/sfc-scr…

这里主要介绍父组件如何去获取子组件内部定义的变量，关于父子组件通信，可以看文档介绍比较详细：v3.cn.vuejs.org/guide/compo…

我们可以使用全局编译器宏的defineExpose宏，将子组件中需要暴露给父组件获取的参数，通过 {key: vlaue}方式作为参数即可，父组件通过模版 ref 方式获取子组件实例，就能获取到对应值：

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

注意：

• 全局编译器宏只能在 script-setup 模式下使用；
• script-setup 模式下，使用宏时无需 import可以直接使用；
• script-setup 模式一共提供了 4 个宏，包括：defineProps、defineEmits、defineExpose、withDefaults。

3. 为 props 提供默认值

definedProps 文档：v3.cn.vuejs.org/api/sfc-scr… 文档：v3.cn.vuejs.org/api/sfc-scr…

前面介绍 script-setup 模式提供的 4 个全局编译器宏，还没有详细介绍，这一节介绍 defineProps和 withDefaults。使用 defineProps宏可以用来定义组件的入参，使用如下：

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

这里只定义props属性中的 schema和 modelValue两个属性的类型， defineProps2. Im Skript-Setup-Modus erhält die übergeordnete Komponente die Daten der untergeordneten Komponente

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

Hier stellen wir hauptsächlich vor, wie die übergeordnete Komponente die in der untergeordneten Komponente definierten Variablen erhält. Weitere Informationen zur Kommunikation zwischen der übergeordneten und untergeordneten Komponente finden Sie im Dokument: v3.cn.vuejs.org/guide/compo…

Wir können das

globale Compiler-Makro

defineExpose-Makro verwenden. Die Parameter in der untergeordneten Komponente, die der übergeordneten Komponente ausgesetzt werden müssen, können über den {key: vlaue} als Parameter verwendet werden -Methode. Die übergeordnete Komponente erhält die untergeordnete Komponente über die Vorlagen-Ref-Methode. Beispiel: Sie können den entsprechenden Wert abrufen:

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

Hinweis🎜: 🎜🎜🎜🎜Globale Compiler-Makros können nur im Skript-Setup verwendet werden Modus; 🎜🎜🎜Skript-Setup-Modus, bei Verwendung von Makros ist kein erforderlich kann direkt verwendet werden; 🎜🎜Skript-Setup-Modus bietet insgesamt 4 Makros, darunter: defineProps, defineEmits, defineExpose, und withDefaults. 🎜🎜

🎜3. Geben Sie Standardwerte für Requisiten an🎜🎜🎜🎜definierteProps-Dokumentation: v3.cn.vuejs.org /api /sfc-scr…🎜 Dokumentation: v3.cn.vuejs .org /api/sfc-scr…🎜🎜🎜🎜Die 4 🎜globalen Compiler-Makros🎜, die vom Skript-Setup-Modus bereitgestellt werden, wurden noch nicht im Detail vorgestellt und withDefaults . Das Makro defineProps kann verwendet werden, um die Eingabeparameter der Komponente zu definieren. Die Verwendung ist wie folgt: 🎜rrreee🎜Hier definieren wir nur das schema und im <code>props-Attribut. >modelValueZwei Attributtypen, defineProps Der Nachteil dieser Deklaration besteht darin, dass sie keine Möglichkeit bietet, den Standardwert von props festzulegen. 🎜🎜Tatsächlich können wir dies durch das withDefaults-Makro erreichen: 🎜rrreee🎜🎜withDefaults Die Hilfsfunktion bietet eine Typprüfung für Standardwerte und stellt sicher, dass der Typ der zurückgegebenen Requisiten das optionale Flag der Eigenschaft entfernt, die a deklariert hat Standardwert. 🎜🎜🎜🎜4. Konfigurieren Sie globale benutzerdefinierte Parameter 🎜🎜🎜🎜Dokumentadresse: 🎜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的格式发生变化了：

更加清晰直观了。

Ich habe diese Methode in „Vue.js Design and Implementation“ entdeckt, konnte aber keine relevante Einführung im Dokument finden. Wenn Freunde sie finden, lassen Sie es mich bitte wissen~

1. Probleme bei der Verwendung des dynamischen Imports von Vite

Dokumentadresse:

cn.vitejs.dev/guide/featu…

Studenten, die Webpack verwenden, sollten wissen, dass Sie im Webpack require.contextDynamische Importdatei:

require.context动态导入文件：

在 Vite 中，我们可以使用这两个方法来动态导入文件：

• import.meta.glob

该方法匹配到的文件默认是懒加载，通过动态导入实现，构建时会分离独立的 chunk，是异步导入，返回的是 Promise，需要做异步操作，使用方式如下：

• import.meta.globEager

该方法是直接导入所有模块，并且是同步导入，返回结果直接通过 for...in循环就可以操作，使用方式如下：

如果仅仅使用异步导入 Vue3 组件，也可以直接使用 Vue3 defineAsyncComponent API 来加载：

2. Vite 配置 alias 类型别名

文档地址：cn.vitejs.dev/config/#res…

当项目比较复杂的时候，经常需要配置 alias 路径别名来简化一些代码：

在 Vite 中配置也很简单，只需要在 vite.config.ts 的 resolve.alias中配置即可：

如果使用的是 TypeScript 时，编辑器会提示路径不存在的警告⚠️，这时候可以在 tsconfig.json中添加 compilerOptions.paths的配置：

3. Vite 配置全局 scss

文档地址：cn.vitejs.dev/config/#css…

当我们需要使用 scss 配置的主题变量（如 $primary）、mixin方法（如 @mixin lines）等时，如：

我们可以将 scss 主题配置文件，配置在 vite.config.ts 的 css.preprocessorOptions.scss.additionalData中：

如果不想使用 scss 配置文件，也可以直接写成 scss 代码：

三、VueRouter

1. script-setup 模式下获取路由参数

文档地址：router.vuejs.org/zh/guide/ad…

由于在 script-setup模式下，没有 this可以使用，就不能直接通过 this.$router或 this.$route来获取路由参数和跳转路由。当我们需要获取路由参数时，就可以使用 vue-router提供的 useRouteIn Vite können wir diese beiden Methoden verwenden, um Dateien dynamisch zu importieren:

• import.meta.glob

Diese Methode Die abgeglichene Datei ist standardmäßig auf „verzögertes Laden“ eingestellt, was durch „dynamischen Import“ implementiert wird. Beim Erstellen werden „unabhängige Blöcke“ getrennt, was einem „asynchronen Import“ entspricht . Die Verwendungsmethode ist wie folgt:

🎜

import.meta.globEager

🎜Diese Methode 🎜direktes Importieren aller Module🎜 und 🎜synchrones Importieren🎜, und das Rückgabeergebnis wird direkt durch die for.. .in-Schleife geleitet, die ausgeführt werden kann, und die Verwendungsmethode ist wie folgt: 🎜🎜🎜🎜Wenn Sie nur den asynchronen Import von Vue3-Komponenten verwenden, können Sie auch direkt die Vue3-DefineAsyncComponent verwenden API zum Laden: 🎜🎜🎜

🎜2. Vite-Konfigurationsaliastyp Alias ​​🎜🎜🎜🎜Dokumentadresse: cn.vitejs.dev/config/#res…🎜🎜🎜🎜Wenn das Projekt komplexer ist, ist häufig eine Konfiguration erforderlich Alias-Pfad-Aliase, um einige Codes zu vereinfachen: 🎜🎜🎜🎜Die Konfiguration in Vite ist ebenfalls sehr einfach, Sie müssen nur vite.config eingeben. Konfigurieren Sie es einfach in <code>resolve.alias von ts: 🎜🎜 🎜🎜Wenn ja Bei Verwendung von TypeScript gibt der Editor eine Warnung aus, dass der Pfad nicht existiert. Zu diesem Zeitpunkt können Sie tsconfig.json verwenden. Fügen Sie die Konfiguration von <code>compilerOptions.paths im Code> hinzu: 🎜🎜🎜

🎜3. Vite configure global scss🎜🎜🎜🎜Dokumentadresse: cn.vitejs.dev/config/#css…🎜🎜🎜🎜when Wenn wir scss-konfigurierte Designvariablen verwenden müssen (z. B. $primary ), Mixin-Methoden (wie @mixinlines) usw., wie zum Beispiel: 🎜🎜🎜🎜Wir können die SCSS-Theme-Konfigurationsdatei in vite.config.ts konfigurieren css.preprocessorOptions.scss.additionalData: 🎜🎜🎜🎜Wenn Sie die SCSS-Konfigurationsdatei nicht verwenden möchten, können Sie den SCSS-Code auch direkt schreiben: 🎜🎜🎜

🎜3. VueRouter 🎜🎜

🎜1. Routing-Parameter im Skript-Setup-Modus abrufen🎜🎜🎜🎜Dokumentadresse: router.vuejs.org/zh/guide/ad… 🎜 🎜🎜🎜Seit in script-setup

-Modus, kein this kann verwendet werden, Sie können this.$router oder this .$routenicht direkt übergeben > um Routing-Parameter und Sprungrouten zu erhalten. Wenn wir Routing-Parameter abrufen müssen, können wir die von vue-router bereitgestellte Methode useRoute verwenden, um diese wie folgt abzurufen: 🎜🎜🎜🎜

Wenn Sie zu einer Route springen möchten, können Sie zum Springen den Rückgabewert der Methode useRouter verwenden: useRouter方法的返回值去跳转：

四、Pinia

1. store 解构的变量修改后没有更新

文档地址：pinia.vuejs.org/core-concep…

当我们解构出 store 的变量后，再修改 store 上该变量的值，视图没有更新：

这时候点击按钮触发 changeName事件后，视图上的 name 并没有变化。这是因为 store 是个 reactive 对象，当进行解构后，会破坏它的响应性。所以我们不能直接进行解构。这种情况就可以使用 Pinia 提供 storeToRefs工具方法，使用起来也很简单，只需要将需要解构的对象通过 storeToRefs方法包裹，其他逻辑不变：

这样再修改其值，变更马上更新视图了。

2. Pinia 修改数据状态的方式

按照官网给的方案，目前有三种方式修改：

• 通过 store.属性名赋值修改单笔数据的状态；

这个方法就是前面一节使用的：

• 通过 $patch方法修改多笔数据的状态；

文档地址：pinia.vuejs.org/api/interfa…

当我们需要同时修改多笔数据的状态时，如果还是按照上面方法，可能要这么写：

上面这么写也没什么问题，但是 Pinia 官网已经说明，使用 $patch的效率会更高，性能更好，所以在修改多笔数据时，更推荐使用 $patch，使用方式也很简单：

• 通过 action方法修改多笔数据的状态；

也可以在 store 中定义 actions 的一个方法来更新：

使用时：

这三种方式都能更新 Pinia 中 store 的数据状态。

五、Element Plus

1. element-plus 打包时 @charset 警告

项目新安装的 element-plus 在开发阶段都是正常，没有提示任何警告，但是在打包过程中，控制台输出下面警告内容：

在官方 issues 中查阅很久：github.com/element-plu…

尝试在 vite.config.ts中配置 charset: false

4. Pinia

1. Destrukturierte Speichervariablen werden nach der Änderung nicht aktualisiert

Dokumentadresse: pinia.vuejs.org/core-concep…

Nachdem wir die Variablen des Stores dekonstruiert haben, ändern wir sie die Variablen im Store Der Wert der Variablen, die Ansicht wird nicht aktualisiert:

Zu diesem Zeitpunkt wird nach dem Klicken auf die Schaltfläche zum Auslösen des Ereignisses changeName der name in der Ansicht angezeigt nicht geändert. Dies liegt daran, dass der Speicher ein reaktives Objekt ist und bei einer Zerstörung seine Reaktionsfähigkeit zerstört wird. Wir können also nicht direkt dekonstruieren. In diesem Fall können Sie die von Pinia bereitgestellte Tool-Methode storeToRefs verwenden. Sie ist ebenfalls sehr einfach zu verwenden. Sie müssen nur das zu dekonstruierende Objekt mit storeToRefs umschließen. code>-Methode, und die andere Logik bleibt unverändert:

Gefällt mir noch einmal. Ändern Sie den Wert und die Ansicht wird sofort mit der Änderung aktualisiert.

2. Wie Pinia den Datenstatus ändert🎜🎜Laut dem auf der offiziellen Website angegebenen Plan gibt es derzeit drei Möglichkeiten, ihn zu ändern: 🎜

• 🎜Ändern Sie den Status einzelner Daten durch die Zuweisung von store.property name; 🎜

🎜Diese Methode wird in verwendet vorheriger Abschnitt: 🎜🎜 🎜

• 🎜Ändern Sie den Status mehrerer Daten mit der Methode $patch 🎜

🎜🎜 Dokumentadresse: pinia.vuejs.org/api/ interfa...🎜🎜🎜🎜Wenn wir den Status mehrerer Daten gleichzeitig ändern müssen und weiterhin der oben beschriebenen Methode folgen, müssen wir möglicherweise so schreiben:🎜 🎜🎜🎜Es gibt Es ist nichts Falsches daran, es so zu schreiben, aber auf der offiziellen Pinia-Website wurde angegeben, dass die Verwendung von $patch effizienter ist und eine bessere Leistung erbringt. Wenn Sie also mehrere Daten ändern, wird eher die Verwendung von $ empfohlen Patch. Die Verwendung ist auch sehr einfach: 🎜🎜🎜

• 🎜Ändern Sie den Status mehrerer Daten über die action-Methode; 🎜

🎜Sie können auch eine Aktionsmethode im Store definieren, die aktualisiert werden soll: 🎜🎜🎜🎜Bei Verwendung: 🎜🎜🎜🎜Diese drei Möglichkeiten Beide können den Datenstatus des Geschäfts in Pinia aktualisieren. 🎜

🎜5. Element Plus🎜

🎜1. @charset Warnung, wenn element-plus verpackt ist🎜🎜🎜 Projekt Das neu installierte Element-Plus ist während der Entwicklungsphase normal und löst keine Warnungen aus. Während des Verpackungsprozesses gibt die Konsole jedoch den folgenden Warninhalt aus: 🎜🎜🎜🎜Lesen Sie es schon lange in den offiziellen Ausgaben: github.com/element- plu…🎜🎜🎜Versuchen Sie charset: false ist in code>vite.config.ts konfiguriert und das Ergebnis ist ungültig: 🎜🎜🎜🎜🎜Endlich wurde die Lösung gefunden in die offiziellen Ausgaben: 🎜🎜🎜🎜🎜🎜2 . Konfiguration des chinesischen Sprachpakets 🎜🎜🎜🎜Dokumentadresse: 🎜element-plus.gitee.io/zh-CN/guide…🎜🎜🎜🎜Die Standardkomponente elemnt-plus ist in Englisch: 🎜🎜🎜🎜

Wir können auf Chinesisch umsteigen, indem wir das chinesische Sprachpaket einführen und zur ElementPlus-Konfiguration hinzufügen:

Zu diesem Zeitpunkt können Sie sehen, dass der Text der Komponenten in ElementPlus Chinesisch geworden ist.

Zusammenfassung

Das Obige ist meine aktuelle Zusammenfassung der Erfahrungen mit der Vermeidung von Fallstricken nach drei Projekten von den Anfängen bis zum eigentlichen Vue3-Familien-Bucket. Tatsächlich werden viele davon im Dokument vorgestellt, aber ich war damit nicht vertraut sie zunächst. Ich hoffe auch, dass jeder die Dokumentation mehr liest ~

Der Skript-Setup-Modus von Vue3 wird im Laufe des Schreibens tatsächlich immer beliebter.

Wenn Sie Fragen zum Inhalt dieses Artikels haben, können Sie diese gerne kommentieren und diskutieren.

【Empfohlene verwandte Video-Tutorials: vuejs-Einführungs-Tutorial, Erste Schritte mit dem Web-Frontend】