15 problèmes courants dans le développement du bucket de la famille Vue3 (pour vous aider à éviter rapidement les pièges)

Cet article partagera avec vous quelques problèmes courants dans le développement du bucket familial Vue3, afin que vous puissiez éviter les pièges et les champs de mines. J'espère qu'il pourra vous aider !

J'ai récemment commencé à utiliser Vue3 et réalisé 3 projets. J'ai rencontré beaucoup de problèmes Aujourd'hui, je vais prendre le temps de les trier et de partager 15 problèmes courants avec vous. En gros, l'adresse du document correspondant est publiée. donnez-moi plus Regardez le document ~ Les trois projets terminés sont essentiellement développés en utilisant Vue3 (mode setup-script), ils sont donc principalement résumés sous plusieurs aspects :

• Vue3
• Vite
• VueRouter
• Pinia
• ElementPlus

(Partage vidéo d'apprentissage : tutoriel vidéo vue)

1 Vue3

1. Modifications dans les méthodes de cycle de vie de Vue2.x et Vue3.x

Adresse du document : https://. v3.cn .vuejs.org/guide/composition-api-lifecycle-hooks.html

Les méthodes de cycle de vie de Vue2.x et Vue3.x ont beaucoup changé, jetons d'abord un coup d'œil :

Vue3.x est toujours pris en charge dans le cycle de vie actuel de Vue2.x, mais il n'est pas recommandé de mélanger et d'assortir. Vous pouvez utiliser le cycle de vie 2.x au début et essayer d'utiliser le cycle de vie 3.x plus tard. .

Depuis que j'utilise le mode script-srtup, j'utilise directement la fonction de cycle de vie de Vue3.x : script-srtup模式，所以都是直接使用 Vue3.x 的生命周期函数：

// A.vue\
<script>\
import { ref, onMounted } from "vue";\
let count = ref<number>(0);\
\
onMounted(() => {\
count.value = 1;\
})\
</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>\
let name = ref("pingan8787")\
defineExpose({ name }); // 显式暴露的数据，父组件才可以获取\
</script>\
\
// 父组件\
<chlid></chlid>\
<script>\
let child = ref(null)\
child.value.name //获取子组件中 name 的值为 pingan8787\
</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>\
let props = defineProps<{\
schema: AttrsValueObject;\
modelValue: any;\
}>();\
</script>

这里只定义props属性中的 schema和 modelValue两个属性的类型， defineProps

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

Pour le timing d'exécution de chaque hook, vous pouvez également consulter la documentation : v3.cn.vuejs.org/guide/insta…

2. En mode de configuration de script, le composant parent obtient les données du composant enfant

Adresse du document : v3.cn.vuejs.org/api/sfc-scr…

Ici, nous présentons principalement comment le composant parent obtient les variables définies au sein du composant enfant. Concernant la communication entre les composants parent et enfant, vous pouvez lire le document pour plus de détails : v3.cn.vuejs.org/guide/compo…

Nous pouvons utiliser la

macro du compilateur global🎜defineExpose, les paramètres du composant enfant qui doivent être exposés au composant parent peuvent être utilisés comme paramètres via le {key: vlaue} . Le composant parent obtient le composant enfant via la méthode template ref. Exemple, vous pouvez obtenir la valeur correspondante : 🎜

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

🎜🎜Remarque🎜 : 🎜🎜🎜🎜Les macros du compilateur global ne peuvent être utilisées que dans la configuration du script. mode ; 🎜🎜🎜mode de configuration de script, aucun n'est requis lors de l'utilisation de l'importation de macros peut être utilisé directement ; 🎜🎜le mode de configuration de script fournit un total de 4 macros, dont : définirProps, définirEmits, définirExpose, et avec les valeurs par défaut. 🎜🎜

🎜3. Fournissez des valeurs par défaut pour les accessoires 🎜🎜🎜🎜documentation définiProps : v3.cn.vuejs.org /api /sfc-scr…🎜 Documentation : v3.cn.vuejs .org /api/sfc-scr…🎜🎜🎜🎜Les 4 🎜macros globales du compilateur🎜 fournies par le mode de configuration de script ont été introduites plus tôt. Elles n'ont pas encore été présentées en détail. Cette section présente defineProps. et withDefaults . La macro defineProps peut être utilisée pour définir les paramètres d'entrée du composant. L'utilisation est la suivante : 🎜rrreee🎜Ici, nous définissons uniquement le schéma et le dans le fichier. Attribut <code>props. >modelValueDeux types d'attribut, defineProps L'inconvénient de cette déclaration est qu'elle ne fournit pas de moyen de définir la valeur par défaut des accessoires. 🎜🎜En fait, nous pouvons y parvenir grâce à la macro withDefaults : 🎜rrreee🎜🎜withDefaults La fonction d'assistance fournit une vérification de type pour les valeurs par défaut et garantit que le type des accessoires renvoyés supprime l'indicateur facultatif de la propriété qui a déclaré un valeur par défaut. 🎜🎜🎜🎜4. Configurer les paramètres personnalisés globaux 🎜🎜🎜🎜Adresse du document : 🎜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的格式发生变化了：

更加清晰直观了。

J'ai découvert cette méthode dans "Vue.js Design and Implementation", mais je n'ai trouvé aucune introduction pertinente dans le document. Si des amis la trouvent, faites-le moi savoir ~

2. 1. Problèmes liés à l'utilisation de l'importation dynamique Vite

Adresse du document :

cn.vitejs.dev/guide/featu…

Les étudiants qui utilisent Webpack doivent savoir que dans Webpack, vous pouvez transmettre require.contextFichier d'importation dynamique :

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提供的 useRouteDans Vite, nous pouvons utiliser ces deux méthodes pour importer dynamiquement des fichiers :

• import.meta.glob

Cette méthode Le fichier correspondant est par défaut chargement paresseux

, qui est implémenté via 🎜importation dynamique🎜 Lors de la construction, il 🎜morceaux indépendants séparés🎜, ce qui est une 🎜importation asynchrone🎜. Ce qui est renvoyé est une promesse, qui doit être exploitée de manière asynchrone. . La méthode d'utilisation est la suivante : 🎜🎜 🎜

import.meta.globEager

🎜Cette méthode 🎜importe directement tous les modules🎜, et 🎜importe de manière synchrone🎜, et le résultat de retour est directement transmis via la boucle for.. .in qui peut être utilisée, et la méthode d'utilisation est la suivante : 🎜🎜🎜🎜Si vous utilisez uniquement l'importation asynchrone de composants Vue3, vous pouvez également utiliser directement le définirAsyncComponent de Vue3 API à charger : 🎜🎜🎜

🎜2. Vite configurer l'alias de type d'alias 🎜🎜🎜🎜Adresse du document : cn.vitejs.dev/config/#res…🎜🎜🎜🎜Lorsque le projet est plus complexe, il est souvent nécessaire de configurer Alias ​​de chemin d'alias pour simplifier certains codes : 🎜🎜🎜🎜La configuration dans Vite est également très simple, il vous suffit d'aller dans vite.config. Il suffit de le configurer dans <code>resolve.alias de ts : 🎜 🎜🎜🎜Si vous Si vous utilisez TypeScript, l'éditeur vous avertira que le chemin n'existe pas⚠️ À ce stade, vous pouvez utiliser tsconfig.json Ajouter la configuration de <code>compilerOptions.paths dans le code>. : 🎜🎜🎜🎜3. Vite configurer le scss global🎜🎜🎜🎜Adresse du document : cn.vitejs.dev/config/#css…🎜🎜🎜🎜when Lorsque nous devons utiliser des variables de thème configurées par scss (telles que $ primaire), les méthodes de mixage (telles que les @mixin lignes), etc., telles que : 🎜🎜🎜🎜Nous pouvons configurer le fichier de configuration du thème scss dans vite.config.ts dans css.preprocessorOptions.scss.additionalData : 🎜🎜🎜🎜Si vous ne souhaitez pas utiliser le fichier de configuration scss, vous pouvez également écrire directement le code scss : 🎜🎜🎜

🎜3. VueRouter🎜🎜

🎜1. Obtenez les paramètres de routage en mode de configuration de script🎜🎜🎜🎜Adresse du document : router.vuejs.org/zh/guide/ad…🎜 🎜🎜🎜Depuis dans Mode script-setup, aucun this ne peut être utilisé, vous ne pouvez pas passer directement this.$router ou this .$route code> pour obtenir les paramètres de routage et les itinéraires de saut. Lorsque nous avons besoin d'obtenir des paramètres de routage, nous pouvons utiliser la méthode <code>useRoute fournie par vue-router pour les obtenir, comme suit : 🎜🎜🎜🎜

Si vous souhaitez accéder à un itinéraire, vous pouvez utiliser la valeur de retour de la méthode useRouter pour sauter : 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

IV. Pinia

1. Les variables déstructurées du magasin ne sont pas mises à jour après modification

Adresse du document : pinia.vuejs.org/core-concep…

Après avoir déconstruit les variables du magasin, puis modifié les variables sur le store La valeur de la variable, la vue n'est pas mise à jour :

À ce moment, après avoir cliqué sur le bouton pour déclencher l'événement changeName, le nom sur la vue a pas changé. En effet, le magasin est un objet réactif et, une fois déstructuré, sa réactivité sera détruite. On ne peut donc pas déconstruire directement. Dans ce cas, vous pouvez utiliser la méthode outil storeToRefs fournie par Pinia. Elle est également très simple à utiliser. Il vous suffit d'encapsuler l'objet qui doit être déconstruit via storeToRefscode>, et l'autre logique reste inchangée :

Comme encore Modifiez sa valeur et la vue sera mise à jour immédiatement avec le changement.

2. Comment Pinia modifie le statut des données🎜🎜Selon le plan donné par le site officiel, il existe actuellement trois façons de le modifier : 🎜

• 🎜Modifier l'état d'une seule donnée via l'affectation store.property name ; 🎜

🎜Cette méthode est utilisée dans le section précédente : 🎜🎜 🎜

• 🎜Modifiez l'état de plusieurs données via la méthode $patch 🎜

🎜🎜 ; Adresse du document : pinia.vuejs.org/api/ interfa...🎜🎜🎜🎜Lorsque nous devons modifier l'état de plusieurs données en même temps, si nous suivons toujours la méthode ci-dessus, nous devrons peut-être écrire comme ceci :🎜 🎜🎜🎜Il y a rien de mal à l'écrire comme ça, mais le site officiel de Pinia a déclaré que l'utilisation de $patch sera plus efficace et fonctionnera mieux, donc lors de la modification de plusieurs données, il est plus recommandé d'utiliser $ patch L'utilisation est également très simple : 🎜🎜🎜

• 🎜Modifier l'état de plusieurs données via la méthode action ; 🎜

🎜Vous pouvez également définir une méthode d'actions dans la boutique à mettre à jour : 🎜🎜🎜🎜Lorsqu'il est utilisé : 🎜🎜🎜🎜Ces trois manières Les deux peuvent mettre à jour l'état des données du magasin dans Pinia. 🎜

🎜5. Element Plus🎜

🎜1 @charset avertissement lorsque element-plus est emballé🎜🎜🎜. project L'élément-plus nouvellement installé est normal pendant la phase de développement et ne provoque aucun avertissement. Cependant, pendant le processus d'empaquetage, la console affiche le contenu d'avertissement suivant : 🎜🎜🎜🎜Lisez-le longtemps dans les numéros officiels : github.com/element- plu…🎜🎜🎜Essayez charset: false

est configuré dans code>vite.config.ts , et le résultat n'est pas valide : 🎜🎜🎜🎜🎜Enfin, la solution a été trouvée dans les numéros officiels : 🎜🎜🎜🎜🎜🎜2 . Configuration du pack de langue chinoise 🎜🎜🎜🎜Adresse du document : 🎜element-plus.gitee.io/zh-CN/guide…🎜🎜🎜🎜Le composant elemnt-plus par défaut est dans Anglais : 🎜🎜🎜🎜

Nous pouvons passer au chinois en introduisant le pack de langue chinoise et en l'ajoutant à la configuration ElementPlus :

À ce stade, vous pouvez voir que le texte des composants dans ElementPlus est devenu chinois.

Résumé

Ce qui précède est mon récent résumé de mon expérience en matière d'évitement des pièges après trois projets, depuis le début jusqu'au compartiment de la famille Vue3. En fait, beaucoup d'entre eux sont présentés dans le document, mais je n'étais pas familier avec. eux au début. J'espère également que tout le monde lira davantage la documentation ~

Le mode de configuration du script Vue3 devient en effet de plus en plus populaire au fur et à mesure de son écriture.

Si vous avez des questions sur le contenu de cet article, n'hésitez pas à commenter et à discuter.

【Tutoriels vidéo associés recommandés : Tutoriel d'introduction à Vuejs, Démarrer avec le front-end Web】