vue3生命周期（组合式api）
setup：组件实例未被创建，所以无法调用this，用于设置响应式数据、方法等
onBeforeCreate：和setup功能重叠，也是初始化响应式数据和方法
onCreated：组件已经被实例化，方法，变量均可以被调用拿到，此时已经完成了组件的实例化，即模块被编译完成了，已经存在了render函数（render函数的生成在组件实例化后生成，即组件实例化过程完成了模块的编译和解析），有了render函数即已经生成了虚拟dom树，因为render函数返回值就是虚拟dom树
onBeforeMount：组件被挂载到指定的DOM元素之前。此时组有了虚拟DOM树，但Vue还尚未根据虚拟DOM树创建对应的真实DOM树，因此无法访问真实的DOM元素。
//注释：
①挂载：当虚拟DOM树被构建并准备好后，vue会根据虚拟DOM树构建真实DOM树，vue会将真实DOM树挂载到某个指定的DOM元素上，这个过程通常称为“挂载”（生成真实DOM树再挂载到指定的DOM元素上）
②渲染函数：Vue首先会将其组件模板（可以是HTML字符串或内联模板）编译成一个渲染函数。这个渲染函数是一个纯JavaScript函数，它接收组件的数据作为输入，并返回一个虚拟DOM树（即返回虚拟DOM），即渲染函数的返回值即是虚拟dom树。
onMounted：在组件挂载到某个指定的DOM元素之后调用，此时组件的真实DOM树已经生成，并将真实DOM树挂载到指定的DOM元素上，可以进行DOM操作，浏览器DOM树和渲染树的依次开始构建，。
onBeforeUpdate：在组件更新之前调用，此时组件模版中的数据已经发生变化，变化后的组件模板已经被重新编译成渲染函数（返回了新的虚拟DOM树，生成了新的虚拟DOM树之后立刻执行diff算法，找出新虚拟DOM树和旧虚拟DOM树的差异信息，把这些差异信息存储到一个patch（补丁）对象），但尚未解析patch对象以更新真实DOM树中。在这个阶段，可以访问到组件模版中的最新的组件数据，但真实DOM树还未更新 特变注意：在onBeforeUpdate钩子中的数据已经是最新数据即更新后的数据了，因为要用这些更新后的数据来更新渲染函数生产新的虚拟dom树，但是这时候还未挂载到真实dom树上，所以如果用getElement等方法获取dom元素还是未更新的dom
onUpdated：在组件更新之后调用，此时patch对象已经解析为若干具体的DOM操作来更新真实DOM树，组件的数据已经重新渲染到真实DOM树上。在这个阶段，可以对更新后的DOM进行操作。
onBeforeUnmount：在组件卸载之前调用。此时组件仍然是活跃的，可以进行清理操作，如清除定时器、取消事件监听等。
unmounted：在组件卸载并移除DOM后调用。此时组件已经被销毁，无法再访问组件的属性和方法。在这个阶段，可以进行一些清理工作，如释放资源等。
补充nextTick钩子
使用的这一钩子的原因：因为vue3是异步、批量更新dom的，以避免频繁触发重排和重绘加重浏览器性能负担，其原理是异步渲染队列机制。所以，为了防止拿到的dom节点可能是异步更新之前的旧dom，引入了nextTick钩子，以确保dom操作是异步批量更新之后的新的dom元素
