持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情
组件
在Vue中，每一个.vue文件都视为一个组件。
以往我们一个应用一个html文件梭哈到底，所有逻辑都写在一起，导致文件臃肿，代码复用率低，维护难度高。
而在Vue中，我们通常把一个应用以一棵嵌套的组件树的形式来组织，每个组件有其自己的逻辑，这样出问题了或者说改变需求了，我们只需要改变对应的组件就可以了，降低维护的难度和提高代码的复用率。
生命周期
在Vue2中的生命周期有以下几点（按执行顺序先后）
- beforeCreate
- created
- beforeMounted
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed
而在Vue3中，新增了一个setup生命周期，这个生命周期在beforeCreate之前，并且在它里面是获取不到this的。同时为了命名的统一，将beforeDestroy改名为beforeUnmount，destroyed改名为unmounted。
- beforeCreate -> setup()
- created -> setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
在Vue3中使用生命周期钩子需要我们手动导入，像下面这样：
<script setup>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from "vue";
</script>
因为在setup里面是没有this的，所以我们想要在setup里面使用VueX或者Vue-Router这些，就需要导入 useStore、useRouter、useRoute 这些方法，将这些方法的执行结果赋值给一个变量，然后再像在Vue2中那样使用。
在onBeforeMounted中，根元素还不存在，因此不可以进行DOM的访问；
在onMounted中，元素已经渲染了，允许直接进行DOM访问；
数据更新的时候，会在虚拟DOM打补丁前调用onBeforeUpdate钩子，然后再DOM更新后，onUpdated钩子就会立即调用；
在卸载组件实例前会调用onBeforeUnmount，这个时候实例还是完全正常的，就像古代砍头前，人还是活着的，然后再看完头之后，调用onUnmounted钩子，这时候，组件实例的所有子组件实例全部被卸载，所有事件侦听器全部被移除，所有指令全部解除绑定。
