15 个 Vue3 全家桶开发的避坑经验 _Vue3

来自公众号：前端自习课
链接：https://juejin.cn/post/7084536432731095048/

文章插图
最近入门 Vue3 并完成 3 个项目，遇到问题蛮多的，今天就花点时间整理一下，和大家分享 15 个比较常见的问题，基本都贴出对应文档地址，还请多看文档~ 已经完成的 3 个项目基本都是使用 Vue3 (setup- 模式)全家桶开发，因此主要分几个方面总结：

Vue3
Vite
VueRouter
Pinia
ElementPlus

一、Vue3 1. Vue2.x 和 Vue3.x 生命周期方法的变化

文档地址：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

Vue2.x 和 Vue3.x 生命周期方法的变化蛮大的，先看看：
2.x 生命周期3.x 生命周期执行时间说明beforeCreatesetup组件创建前执行createdsetup组件创建后执行beforeMountonBeforeMount组件挂载到节点上之前执行mountedonMounted组件挂载完成后执行beforeUpdateonBeforeUpdate组件更新之前执行updatedonUpdated组件更新完成之后执行beforeDestroyonBeforeUnmount组件卸载之前执行destroyedonUnmounted组件卸载完成后执行errorCapturedCaptured当捕获一个来自子孙组件的异常时激活钩子函数目前 Vue3.x 依然支持 Vue2.x 的生命周期，但不建议混搭使用，前期可以先使用 2.x 的生命周期，后面尽量使用 3.x 的生命周期开发。
由于我使用都是 -srtup模式，所以都是直接使用 Vue3.x 的生命周期函数：
// A.vue
< setup lang="ts">
import { ref, onMounted } from "vue";
let count = ref<number>(0);
onMounted( => {
count.value = https://www.isolves.com/it/cxkf/qd/2022-08-16/1;
})
</>
每个钩子的执行时机点，也可以看看文档：https://v3.cn.vuejs.org/guide/instance.html#生命周期图示
2. -setup 模式中父组件获取子组件的数据

文档地址：https://v3.cn.vuejs.org/api/sfc--setup.html#defineexpose

这里主要介绍父组件如何去获取子组件内部定义的变量，关于父子组件通信，可以看文档介绍比较详细：https://v3.cn.vuejs.org/guide/component-basics.html
我们可以使用全局编译器宏的 defineExpose宏，将子组件中需要暴露给父组件获取的参数，通过 {key: vlaue}方式作为参数即可，父组件通过模版 ref 方式获取子组件实例，就能获取到对应值：
// 子组件
< setup>
let name = ref("pingan8787")
defineExpose({ name }); // 显式暴露的数据，父组件才可以获取
</>
// 父组件
<Chlid ref="child"></Chlid>
< setup>
let child = ref(null)
child.value.name //获取子组件中 name 的值为 pingan8787
</>
注意：

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

3. 为 props 提供默认值

definedProps 文档：https://v3.cn.vuejs.org/api/sfc--setup.html#defineprops-%E5%92%8C-defineemitswithDefaults 文档：https://v3.cn.vuejs.org/api/sfc--setup.html#%E4%BB%85%E9%99%90-type-%E7%9A%84%E5%8A%9F%E8%83%BD

前面介绍 -setup 模式提供的 4 个全局编译器宏，还没有详细介绍，这一节介绍 defineProps和 withDefaults 。使用 defineProps宏可以用来定义组件的入参，使用如下：
< setup lang="ts">
let props = defineProps<{
schema: AttrsValueObject;
modelValue: any;
}>;
</>
这里只定义props属性中的 schema和 modelValue两个属性的类型， defineProps的这种声明的不足之处在于，它没有提供设置 props 默认值的方式。
其实我们可以通过 withDefaults 这个宏来实现：
< setup lang="ts">
let props = withDefaults(
defineProps<{
schema: AttrsValueObject;
modelValue: any;
}>,
{
schema: [],
modelValue: ''
}
);
</>