学习vue生命周期心得

# 前言

这是我个人学习vue生命周期的理解与感悟，欢迎大家的评论，有错误的地方也希望大家能开金口指正

## 1.生命周期是什么

Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程，这个过程可以被细分为一系列的钩子（hooks），每个钩子在不同的阶段被调用。开发者可以在这些钩子中执行代码，以实现特定的功能，常用的vue2的生命周期可分为八个阶段：

1.  beforeCreate() - 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2. *created() - 在实例创建之后被立即调用，此时数据观测 (data observer) 和 event/watcher 事件配置已经完成。

3.  beforeMount() - 在挂载开始之前被调用：相关的 render 函数首次被调用。

4.  mounted() - 挂载结束时被调用，此时 el 被新创建的 vm.$el 替换。

5.  beforeUpdate() - 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

6.  updated() - 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

7.  beforeDestroy() - 实例销毁之前调用，此时实例仍然完全可用。

8.  destroyed() - 实例销毁后调用，调用后，Vue 实例的所有指令被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。我们可以参考一下黑马程序员的解释：

或许·我们可以更通俗地来理解这些生命周期：

1.  **创建阶段（beforeCreate, created）** ：就像你计划建造一座房子，已经准备好了设计图纸和材料，但房子还没有开始建造。这个阶段，组件的实例被创建，数据观测和事件/侦听器还未设置。

2.  **挂载阶段（beforeMount, mounted）** ：房子开始建造，框架搭起来了，但内部装修还没开始。在前端中，这相当于组件的模板已经被编译成虚拟 DOM，但还没有渲染到页面上。

3.  **更新阶段（beforeUpdate, updated）** ：随着时间的推移，可能需要对房子进行一些小的改动，比如重新粉刷或更换家具。在组件中，这相当于响应数据变化，更新组件的视图。

4.  **销毁阶段（beforeDestroy, destroyed）** ：最终，房子需要被拆除。在前端组件的生命周期中，`beforeDestroy` 和 `destroyed` 钩子用于执行清理工作，比如移除事件监听器、取消网络请求、清理定时器等，确保组件销毁时不会留下任何“烂摊子”。

另外还有几个不常用的钩子：

1.  **activated()** - 被 keep-alive 缓存的组件在激活时调用。

2.  **deactivated()** - 被 keep-alive 缓存的组件在停用时调用。

3.  **errorCaptured(err, vm, info)** - 捕获一个来自子孙组件的错误时被调用。

因为不常用在这里就不多赘述

## 2.生命周期从何而来

前端框架的生命周期概念源自于软件开发中的生命周期（Lifecycle）概念，这是软件工程中的一个基本原则。在软件开发中，生命周期指的是软件从开始创建到最终退役的整个过程，这个过程通常包括需求分析、设计、实现、测试、部署、维护等阶段。

前端框架引入生命周期的概念，是为了更好地管理前端应用的状态和行为，尤其是在动态和交互式的应用中。以下是前端框架生命周期的几个关键来源和原因：

1.  **组件化**：前端框架通常采用组件化的开发模式，每个组件都有自己的状态和行为。组件的生命周期管理确保了组件在创建、更新和销毁时能够执行必要的操作。

2.  **数据绑定**：现代前端框架如 Vue.js、React 等，都采用数据绑定技术。数据的变化需要触发视图的更新，生命周期钩子允许开发者在数据变化前后执行特定的逻辑。

3.  **DOM 操作**：前端开发中经常需要对 DOM 进行操作。生命周期钩子提供了在 DOM 被创建、更新或销毁时执行代码的时机。

4.  **资源管理**：在前端应用中，合理管理资源（如事件监听器、定时器、网络请求等）是非常重要的。生命周期钩子帮助开发者在组件销毁时进行资源清理。

5.  **性能优化**：通过在生命周期的不同阶段执行代码，开发者可以优化应用的性能，例如在组件即将被销毁时停止不必要的计算或数据请求。

6.  **跨浏览器兼容性**：不同的浏览器可能对 DOM 操作和事件处理有不同的实现。生命周期钩子可以帮助开发者编写兼容代码。

7.  **用户体验**：通过在生命周期的适当时机展示或隐藏加载指示器、执行动画等，可以提升用户的交互体验。

8.  **框架设计哲学**：不同的前端框架有不同的设计理念，生命周期钩子的设计也反映了这些框架的设计哲学，如 React 的声明式编程、Vue 的响应式编程等。

生命周期的概念使得前端框架能够提供一种结构化和可预测的方式来构建和管理前端应用，同时也为开发者提供了强大的工具来控制应用的行为。

## 3.生命周期出现是为了解决什么问题

生命周期钩子提供了一种机制，使得开发者可以在组件的创建、挂载、更新、销毁等不同阶段插入代码，从而解决上述问题。这使得前端应用的开发更加模块化、可预测和易于管理。

# 总结

Vue 生命周期是 Vue 实例从创建到销毁的完整过程，它通过一系列钩子函数允许开发者在不同阶段插入自定义代码