vue生命周期

VUE生命周期详解

何为生命周期

与其说是Vue的生命周期，我觉得不如说是其内组件的生命周期。 简单来说，它的生命周期就是用来描述一个组件从引入到退出的全过程。 那复杂来说呢？就是一个组件从创建开始经历了数据初始化，挂载，更新等步骤后，最后被销毁。

总接下来就是有三个阶段：挂载阶段、更新阶段、销毁阶段

生命周期执行的顺序

挂载阶段

在挂载阶段，依次执行的生命周期如下：

beforeCreate

• 实例初始化:Vue开始创建一个新的组件实例，会对一些基础属性进行初始化和方法初始化
• 数据观测之前的准备：这个钩子在数据观测（Data Observer） 之前开始被调用。因此这个阶段的data和methods都还没有进行初始化，还不能进行访问。
• 编译阶段（Vue 2）：在ue2中，如果使用了构建步骤（例如使用了单文件组件ue文件），那么在 beforeCreate钩子被调用之前，模板会进行解析和编译，生成渲染函数。这个过程包括将模板转换为虚拟 DOM、解析指令和表达式等，并生成具有响应式能力的render函数。
• 事件和生命周期钩子初始化：虽然无法访问data和methods，但vue已经开始初始化一些生命周期钩子和事件、这说明beforeCreate是第一个被调用的声明周期钩子。
• 无DOM访问：此时组件没有挂载、因此无法访问组件DOM元素

created

• 实例创建完成:钩子被调用的时候，Vue实例已经创建完毕。这时候数据观测和事件/侦听器已经完成配置

• 数据和方法可用：这个周期里面，因为data和methods初始化完毕，可以访问到数据，因此可以在这个阶段进行访问和修改数据。

• DOM尚未挂载

beforeMount

• 模板编译与挂载准备：beforeMount钩子在组件的模板编译完成，但尚未挂载到DOM之前被调用。这意味着Vue实例已经根据模板生成了虚拟DOM，但尚未将其转换为实际的DOM元素并插入到页面中。

• 访问数据和方法：在这个阶段，组件的data和methods已经初始化完成，并且可以在beforeMount钩子中访问。但由于组件尚未挂载到DOM，所以无法直接操作DOM元素。

• 渲染函数或模板的调用：如果组件使用了渲染函数（render function）或者模板（template），在beforeMount钩子被调用时，这些函数或模板将被执行或解析，以准备虚拟DOM树。

• 不执行DOM操作：由于此时组件尚未挂载到实际的DOM中，因此在beforeMount钩子中不应该进行任何依赖于DOM的操作。任何试图访问或修改DOM元素的代码都应该放在mounted钩子中执行。

• 用于渲染前的逻辑：beforeMount钩子通常用于执行一些在组件渲染到DOM之前的逻辑，例如最后的准备工作、性能优化或者条件渲染前的检查等。

mounted

• 组件挂载：mounted钩子在Vue实例被挂载到DOM后立即调用。此时组件的模板已经被渲染成实际的DOM元素，并且插入到页面中。
• DOM访问和操作：由于组件已经挂载到DOM上，因此在mounted钩子中，你可以安全地访问和操作组件的DOM元素。这通常用于执行一些依赖于DOM的操作，比如设置焦点、绑定事件监听器或者进行直接的DOM操作。
• 数据变化可触发视图更新：在mounted钩子中，如果组件的数据发生变化，将会触发视图的更新。这是因为组件已经挂载完成，并且与DOM建立了绑定关系，所以任何数据的改变都会反映到视图上。
• 适合发起网络请求：由于组件已经挂载到页面上，并且用户可以看到组件的初始状态，因此在mounted钩子中发起网络请求是一个常见的做法。你可以在请求返回后更新组件的数据，从而触发视图的更新，展示从服务器获取的数据。

数据更新阶段

beforeUpdate

• 数据变化检测：beforeUpdate钩子在组件的数据发生变化，并在更新DOM之前被调用。Vue会检测组件的响应式数据是否发生了变化，并准备根据这些变化来更新组件的视图。
• 虚拟DOM重新渲染：当组件的数据发生变化时，Vue会重新渲染组件的虚拟DOM。在beforeUpdate钩子中，这个过程已经开始，但实际的DOM更新还未发生。
• 避免直接操作DOM：由于此时组件的DOM还未根据最新的数据更新，因此在beforeUpdate钩子中直接操作DOM是不安全且不必要的。任何试图访问或修改DOM元素的代码都应该避免在这个阶段执行。
• 用于执行更新前的逻辑：beforeUpdate钩子通常用于执行一些在组件视图更新之前的逻辑，例如访问当前的状态、准备更新所需的资源或执行一些需要在更新前完成的副作用操作。

updated

• DOM更新完成：Vue已经根据组件的最新数据重新渲染了虚拟DOM，并将其与实际的DOM进行了同步。此时，用户在页面上看到的组件状态已经与组件的数据保持一致。

• 钩子函数调用：一旦DOM更新完成，Vue会自动调用组件实例上的updated钩子函数。可以在周期执行依赖于更新后DOM的操作。

• 在updated钩子中，你可以执行一些操作，例如：

  • 重新计算元素的尺寸或位置。
  • 绑定或解绑事件监听器。
  • 执行依赖于DOM元素状态的动画或过渡效果。
  • 刷新页面数据或重新请求数据。

  由于Vue的异步更新队列机制，updated钩子可能不会立即反映所有子组件的更新。如果你需要等待整个视图都重绘完毕，可以在updated里使用vm.$nextTick

卸载阶段

beforeUnmount（替代了 Vue 2 的 beforeDestroy）

• 组件即将被卸载：此时，组件仍然挂载在DOM上，但即将被移除。Vue实例已经确定该组件不再需要，并准备开始卸载过程。
• 执行清理工作：可在这个周期去取消定时器、解绑全局事件监听器、销毁子组件实例、解除与DOM元素的关联等。
• 保存状态：如果需要，你可以在这个钩子中保存组件的状态或数据，以便将来可能的恢复或重新创建。
• 确保资源释放：确保所有在组件生命周期中创建和使用的资源（如DOM元素、Web API连接、第三方库实例等）在组件卸载前都被正确释放，避免内存泄漏。
• 组件状态仍可用：在beforeUnmount钩子中，组件实例仍然可用，因此你可以访问其数据、属性和方法。但需要注意的是，一旦组件被卸载，这些数据和方法将不再可用。
• 准备卸载：在beforeUnmount钩子执行完毕后，Vue将开始实际的卸载过程，包括从DOM中移除组件元素，并销毁组件实例及其所有子组件实例。

unmounted（替代了 Vue 2 的 destroyed）

• 组件已经从DOM中移除：当unmounted钩子被调用时，组件已经从DOM中完全卸载，用户在页面上看不到该组件的任何痕迹。这意味着所有与该组件相关的DOM元素都已经被清理和销毁。
• 组件实例被销毁：随着组件从DOM中移除，Vue实例也会被销毁。这包括组件的数据、方法、计算属性、侦听器等都将不再存在。此时，尝试访问这些属性或方法将会导致错误。
• 最终清理工作：虽然大部分清理工作应该在beforeUnmount钩子中完成，但unmounted钩子仍然提供了一个机会进行任何剩余的清理或善后工作。由于此时组件已经从DOM中移除并且实例已经被销毁，因此这里的清理工作更多的是确保没有遗漏或需要后续处理的资源。
• 事件监听器和子组件的清理：如果在beforeUnmount钩子中没有完全清理事件监听器或子组件，那么在unmounted钩子中仍然有机会进行这些操作。但请注意，由于组件实例已经被销毁，这里应该只执行与DOM无关的清理工作。
• 确保无内存泄漏：unmounted钩子是确保组件完全卸载并释放所有相关资源的最后机会。通过在这个钩子中执行必要的清理工作，你可以帮助防止内存泄漏，并确保应用程序的稳定性和性能。

确保无内存泄漏：unmounted钩子是确保组件完全卸载并释放所有相关资源的最后机会。通过在这个钩子中执行必要的清理工作，你可以帮助防止内存泄漏，并确保应用程序的稳定性和性能。