【技术积累】Vue中的核心概念【四】

Vue的生命周期

Vue中的生命周期是指组件从创建到销毁的整个过程中，会触发一系列的钩子函数

Vue2中的生命周期

Vue2中的生命周期钩子函数是在组件的不同阶段执行的特定函数。这些钩子函数允许开发者在组件的不同生命周期阶段执行自定义的逻辑。

Vue2中的生命周期钩子函数可以分为8个阶段，按照执行顺序依次是：

1. beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。在这个阶段，组件的数据和方法还未初始化，无法访问到组件实例的属性和方法。

2. created：在实例创建完成后被调用。在这个阶段，组件的数据和方法已经初始化完成，可以访问到组件实例的属性和方法。但是此时组件还未挂载到DOM上。

3. beforeMount：在组件挂载到DOM之前被调用。在这个阶段，组件已经完成了模板的编译，但是还未将组件的模板渲染到真实的DOM中。

4. mounted：在组件挂载到DOM之后被调用。在这个阶段，组件的模板已经被渲染到真实的DOM中，可以进行DOM操作和访问DOM元素。

5. beforeUpdate：在组件更新之前被调用。在这个阶段，组件的数据发生了变化，但是DOM尚未更新。可以在这个阶段进行数据的修改和操作。

6. updated：在组件更新之后被调用。在这个阶段，组件的数据已经更新完成，DOM也已经更新。可以进行DOM操作和访问DOM元素。

7. beforeDestroy：在组件销毁之前被调用。在这个阶段，组件实例仍然可用，可以进行一些清理工作，如清除定时器、取消订阅等。

8. destroyed：在组件销毁之后被调用。在这个阶段，组件实例已经被销毁，无法再访问到组件实例的属性和方法。

除了这些常用的生命周期钩子函数外，Vue2还提供了一些其他的钩子函数，如activated和deactivated，用于处理组件在keep-alive组件中的缓存和激活状态的切换。

通过在这些生命周期钩子函数中编写逻辑，开发者可以在组件的不同阶段执行自定义的操作，如初始化数据、发送请求、订阅事件、操作DOM等。这些生命周期钩子函数的使用可以帮助开发者更好地控制组件的行为和交互。

Vue3中的生命周期

Vue 3的生命周期相对于Vue 2有所改变，主要是为了更好地支持Composition API。以下是Vue 3的生命周期：

1. setup：在组件实例化之前被调用。在这个阶段，可以进行组件的初始化工作，包括响应式数据的设置、计算属性的定义、方法的定义等。

2. beforeCreate：在组件实例创建之前被调用。在这个阶段，可以进行一些初始化工作，但是无法访问到响应式数据和组件实例。

3. created：在组件实例创建完成后被立即调用。在这个阶段，可以访问到响应式数据和组件实例，可以进行一些数据的初始化操作。

4. beforeMount：在组件挂载开始之前被调用。在这个阶段，模板已经编译完成，但是还未挂载到页面上。

5. mounted：在组件挂载完成后被调用。在这个阶段，组件已经被挂载到页面上，可以进行DOM操作。

6. beforeUpdate：在组件更新之前被调用。在这个阶段，可以进行一些数据的修改操作。

7. updated：在组件更新之后被调用。在这个阶段，可以执行依赖于DOM的操作。

8. beforeUnmount：在组件卸载之前被调用。在这个阶段，组件仍然可用，可以进行一些清理工作。

9. unmounted：在组件卸载之后被调用。在这个阶段，组件的指令和事件监听器已经被移除，组件实例被销毁。

通过这些生命周期钩子函数，我们可以在不同的阶段执行相应的操作，比如在setup阶段进行组件的初始化，mounted阶段进行DOM操作，beforeUnmount阶段进行资源清理等。同时，Vue 3还引入了更灵活的Composition API，可以更好地组织和复用组件逻辑。