生命周期

1. 回顾一下 Vue2 的生命周期

创建前,创建完毕

挂载前,挂载完毕

更新前,更新完毕

销毁前,销毁完毕

2. Vue3 中的生命周期

提示

最常用的是 onMounted、onUpdated 和 onUnmounted。

vue3 取消了创建前和创建后生命周期,这一时刻由 setup 函数执行

生命周期钩子	描述
onBeforeMount()	当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
onMounted()	其所有同步子组件都已经被挂载或其自身的 DOM 树已经创建完成并插入了父容器中。
onBeforeUpdate()	这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
onUpdated()[1]	这个钩子会在组件的任意 DOM 更新后被调用, 父组件的更新钩子将在其子组件的更新钩子之后调用。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。
onBeforeUnmount()	在组件实例被卸载之前调用。 当这个钩子被调用时，组件实例依然还保有全部的功能。
onUnmounted()	其所有子组件都已经被卸载。所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接

更多的生命周期信息参考官网:https://cn.vuejs.org/api/composition-api-lifecycle.html

可以打开控制台后刷新网页,观察控制台输出

---

1. 不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！ 👈🏻