Vue3生命周期钩子函数

Vue3生命周期钩子函数

此处展示的是选项式钩子函数，若为组合式，则直接再函数名前加on然后驼峰命名

1. beforeCreate:
   在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
   在这个阶段，实例已经初始化，但是数据和事件还未初始化。

2. created:
   在实例创建完成后被立即调用。
   在这个阶段，实例已经完成了数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
   但是，挂载阶段还没有开始，因此$el属性目前不可见。

3. beforeMount:
   在挂载开始之前被调用。
   在这个阶段，相关的 render 函数首次被调用，生成虚拟 DOM。

4. mounted:
   实例已经挂载到 DOM 上后调用。
   在这个阶段，实例已经被挂载到页面上，$el属性可以访问到组件的根 DOM 元素。

5. beforeUpdate:
   数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   在这个阶段，数据已经更新，但是尚未应用到 DOM 上。

6. updated:
   由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
   在这个阶段，数据已经应用到 DOM 上，组件已经更新。

7. beforeUnmount:
   在卸载之前调用。
   在这个阶段，组件仍然完全可用，可以执行一些清理操作。

8. unmounted:
   卸载后调用。
   在这个阶段，组件已经被销毁，不再可用。