Vue-组件实例的生命周期

组件实例的生命周期

1. 创建组件实例：当使用new Vue()或通过模板解析创建一个组件时，Vue首先会创建一个组件的实例。

2. 初始化阶段

   Vue3中setup()取代了beforeCreate和created

   1. 初始化事件和生命周期：在组件实例创建之后，Vue会初始化事件和生命周期相关的属性。
   2. beforeCreate 钩子：这是组件生命周期中的第一个钩子函数，在这个阶段，组件实例刚刚被创建，数据观测和事件/侦听器的配置尚未开始。
   3. created 钩子：在这个阶段，组件实例已经完成数据观测、属性和方法的运算，data、computed、watch、methods 等已经设置好了，但是DOM结构还未生成。
   4. 模板编译：Vue会编译模板（template）或渲染函数（render function），生成虚拟节点（VNode）树，即虚拟DOM。这个过程在created钩子之后发生，但在挂载之前。

3. 挂载阶段

   1. onBeforeMount 钩子：在挂载开始之前被调用，此时模板已经编译完成，但是还没有将数据渲染到页面上，因此此时访问DOM结构会得到原始的模板字符串。
   2. 挂载（Mounting）：这是组件的挂载阶段的核心，Vue将虚拟DOM转换为真实DOM，并将其插入到页面中。这个过程中，Vue会根据数据的变化来更新DOM。
   3. onMounted 钩子：在组件挂载之后调用，此时组件已经完全渲染到页面上，可以访问到DOM元素，是进行DOM操作、数据请求等操作的好时机。

4. 更新阶段

   当组件的数据发生变化时，会触发更新过程。

   1. onBeforeUpdate 钩子：数据更新之前调用，此时虚拟DOM还未更新。
   2. 更新过程：Vue会根据数据的变化重新渲染虚拟DOM，并与旧的虚拟DOM进行比较，以确定需要对真实DOM进行的更改。
   3. onUpdated 钩子：在由于数据变更导致的虚拟DOM重新渲染和打补丁之后调用。

5. 销毁阶段

   1. onBeforeUnmount 钩子：在组件实例被销毁之前调用，此时实例仍然完全可用。
   2. 卸载过程：组件实例从DOM中移除，所有的事件监听器被移除，所有的子组件也都会被销毁。
   3. onUnmounted 钩子：在组件实例被销毁之后调用，调用此钩子时，组件实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。