组件

1. 与vue2.x的区别

   1.1 注册全局组件

   // vue2.x
   import Vue from "vue";
   import demoCom from "@/***"
   Vue.component(demoCom)
   
   // vue3.x
   import { createApp } from "vue";
   import App from "./App.vue"
   import demoCom from "@/***"
   createApp(App).component("demoCom", demoCom)
   

   1.2 局部组件

   <template>
   	<demoCom />
   </template>
   <script>
   // vue2.x 
   import demoCom from "@/***"
   export default {
   	components: { demoCom }
   }
   </script>
   <script setup >
   // vue3.x 
   import demoCom from "@/***"
   </script>
   

生命周期

vue实例从创建到更新再到销毁这样的过程中，会触发的回调函数

选项式Api	组合式Api	含义
beforeCreate		setup语法糖模式没有该钩子
created		setup语法糖模式没有该钩子
beforeMount	onBeforeMount	在组件DOM实际渲染安装之前调用。在这一步中，根元素还不存在
mounted	onMounted	在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问
beforeUpdate	onBeforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated	onUpdated	DOM更新后，updated的方法即会调用
beforeUnmount	onBeforeUnmount	在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
unmounted	onUnmounted	卸载组件实例后调用。 调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载