Vue3的生命周期（组合式API）

1.setup

替代了 beforeCreate 和 created 选项

2.onBeforeMount

注册一个钩子，在组件被挂载之前被调用。

当这个钩子被调用时，模板编译/渲染函数已经准备好了，但是还没有挂载到页面上。

组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。

在此阶段，Vue实例已经生成了一个虚拟DOM，并且将要被渲染到实际的DOM元素上。在beforeMount中可以进行一些DOM相关的操作，例如获取DOM节点、计算样式等。

3.onMounted

注册一个回调函数，在组件挂载完成后执行。

此时组件已经渲染完成并挂载到了页面上，可以在这个生命周期中操作组件的 DOM 。

4.onBoforeUpdate

注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

5.onUpdated

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

父组件的更新钩子在其子组件的更新钩子之后调用。

这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的，因为多个状态变更可以在同一个渲染周期中批量执行（考虑到性能因素）。如果你需要在某个特定的状态更改后访问更新后的 DOM，可以使用 nextTick() 作为替代。

注意，不要在 updated 钩子中更改组件的状态，因为这会导致无限的更新循环。

6.onBeforeUnmount

注册一个钩子，在组件实例被卸载之前调用。

7.onUnmounted

注册一个回调函数，在组件实例被卸载之后调用。可以在这个钩子中手动清理一些副作用，比如：取消全局事件绑定，销毁定时器等。从而防止浏览器内存泄漏。