Vue2生命周期+八个钩子函数解析

一.vue生命周期的几个基本概念和常见问题

1.什么是vue的生命周期?

答案：一个vue实例从创建到销毁的过程。

2.vue生命周期有哪几个阶段?

答案：生命周期有四个阶段

分为以下四个阶段（有的可能叫法不一样）

1. 创建
2. 挂载
3. 更新
4. 销毁

**3.什么时候发送初始化渲染请求? **

在 Vue 中，初始化渲染请求是指在应用启动时，Vue 框架向服务器发送的请求，以获取初始数据并渲染页面，Vue是以数据驱动视图，所以初始化渲染请求越早越好，但注意，应在响应式数据创建之后，否则请求的数据无法储存起来。

4.什么时候可以操作Dom?

当 Vue 完成了组件的挂载（即组件已经被添加到 DOM 中）之后，你可以在这个阶段操作 DOM。这是操作 DOM 的最常见时机，因为此时组件已经渲染到页面上，简单来说就是，Dom已经渲染出来了，然后再操作Dom。

二.生命周期四个阶段的详解

1.创建阶段

这个阶段主要是为后面准备响应式数据，这个阶段主要是为了创建响应式数据，为后续渲染页面做准备。

2.挂载阶段

在这个阶段，Vue 开始解析模板，并将其编译为虚拟 DOM。这个阶段还没有开始挂载到 DOM 上，因此你无法访问到 DOM 元素，主要将一些例如插值表达式的模板语法进行渲染。

3.更新阶段

这个阶段会监听数据的修改，同时更新视图，另外，到更新阶段会进入一个数据修改和视图更新的循环，不会马上进入到销毁阶段，因为数据可能会修改多次，试图也会更新多次，只有当你不使用时，比如当你关闭浏览器，这是会进入销毁阶段。

4.销毁阶段

• 解除组件与其他实例的依赖关系，比如取消订阅事件、定时器等。
• 执行一些自定义的清理逻辑，例如关闭可能正在进行的异步请求。
• 组件的所有指令都被解绑，所有的事件监听器都被移除。
• 子组件也会被全部销毁。

作用：通过这两个阶段的处理，能够有效地释放组件占用的资源，避免内存泄漏等问题。

三.生命周期的八大钩子函数解析

钩子函数：在vue生命周期运行过程中，会自动运行一些函数，这些函数被称为钩子函数，作用是让开发者可以在特定阶段运行自己的代码。

1.beforeCreate钩子函数

**在

beforeCreate

阶段，Vue 实例刚刚被创建，此时组件的选项对象（如

data

、

computed

、

methods

等）还没有被初始化，也无法访问到这些选项中的数据和方法。**

这个钩子函数通常用于在组件实例创建的最初阶段执行一些初始化的设置，但由于无法访问到组件的大部分数据和方法，所以其使用场景相对较少。

总结：此阶段响应式数据未准备好，大部分操作都干不了，不经常用，了解即可。

2.created钩子函数（重点）

此阶段响应式数据已准备完毕，可以进行一些简单的操作

**

created

钩子函数通常用于以下场景：**

• 执行异步操作，如从服务器获取数据，是发送初始化渲染器请求最好时机。
• 对数据进行预处理或者初始化操作。
• 设置定时器或者启动一些不需要立即执行的逻辑。

总结：此阶段一般配合ajax向服务器发送数据请求。

3.beforeMount钩子函数

它在组件的模板被渲染到 DOM 之前被调用

beforeMount

钩子函数通常用于以下场景：

• 初始化一些依赖于 DOM 的操作，例如设置样式、监听事件等。
• 执行一些需要在 DOM 渲染之前完成的操作。

总结：执行一些需要在 DOM 渲染之前完成的操作，比如设置样式，监听事件等在

beforeMount

钩子函数中访问的 DOM 元素不会存在，因为 DOM 挂载是在

mounted

钩子函数中完成的。

4.mounted钩子函数（重点）

它在组件的模板被渲染并挂载到 DOM 上之后被调用

mounted

钩子函数的一些特点：

1. DOM 可用：在这个阶段，组件已经被渲染到 DOM 上，因此你可以访问和**操作 **DOM 元素。
2. 事件监听器已设置：所有的事件监听器都已经设置好了，你可以开始使用它们。
3. 数据已处理：组件的响应式数据已经被处理，并且已经渲染到视图上。

mounted

钩子函数通常用于以下场景：

• 获取外部资源：例如，从服务器获取数据，使用 axios 或 fetch API（推荐在created时从服务器请求数据）。
• 执行依赖于 DOM 的操作：例如，使用原生 JavaScript 方法操作 DOM。
• 添加事件监听器：在这个阶段添加的事件监听器将在组件的生命周期内持续存在。

注意：尽管

mounted

钩子函数保证了 DOM 已经挂载，但它不保证所有的子组件都已经挂载（比如实现一进网页文本框自动聚焦时会有这个问题）。如果需要确保所有子组件也已经被挂载，可以使用

nextTick

方法。

5.beforeUpdate钩子函数

它在组件更新之前被调用。这个钩子会在数据发生变化，但还没有开始重新渲染 DOM 时触发.

以下是

beforeUpdate

钩子函数的一些特点：

1. 数据已更改：此时组件的数据已经更新，但 DOM 结构还没有被更新。
2. 虚拟 DOM 已创建：Vue 已经创建了新的虚拟 DOM 树，但还没有将其应用到实际的 DOM 上。
3. 可用于优化：如果你需要在更新之前访问或修改数据，或者执行某些优化操作，这个钩子是一个合适的地方。

beforeUpdate

钩子函数通常用于以下场景：

• 执行数据更新前的检查：例如，确认数据是否满足某些条件。
• 记录日志：记录数据变化前组件的状态。
• 取消不必要的更新：在某些情况下，你可能决定取消这次更新。

注意：**

beforeUpdate

钩子函数中不能直接操作 DOM，因为此时实际的 DOM 更新还没有发生。如果你需要操作 DOM，应该使用

mounted

或

updated

钩子。此外，由于 Vue 3 引入了 Composition API，一些生命周期钩子有了变化（有兴趣可以了解一下）。**

总结：主要用于更新前数据的修改或访问，一些优化操作，一般不会用到，

6.updated钩子函数

它在组件的 VDOM（虚拟DOM）更新之后被调用。当组件的数据发生变化时，Vue 会重新渲染组件，

updated

钩子会在 DOM 更新完成后触发。

以下是

updated

钩子函数的一些特点：

1. DOM 已更新：此时，Vue 已经将新的虚拟 DOM 树渲染到了实际的 DOM 中。
2. 可用于访问更新后的 DOM：如果你需要在 DOM 更新后立即访问或操作 DOM 元素，这个钩子会非常有用。
3. 不推荐直接操作 DOM：尽管可以在这个钩子中操作 DOM，但通常不推荐这样做，因为这可能会与 Vue 的响应式系统产生冲突。

updated

钩子函数通常用于以下场景：

• 操作更新后的 DOM：例如，你可能需要基于新的 DOM 状态来调整某些样式或类。
• 执行依赖于 DOM 的操作：比如，你可能需要获取某个 DOM 元素的尺寸或位置。

*注意：***由于 Vue 的异步更新队列，

updated

钩子可能会在 DOM 更新完成后的下一个事件循环中调用。因此，如果你需要基于 DOM 更新执行某些操作，确保这些操作不会影响 Vue 的响应式系统，并且不会导致额外的 DOM 更新。**

总结：此时Dom已经更新完毕，可以访问更新后的Dom节点，进行访问或修改。

7.beforeDestroy钩子函数

它在组件实例被销毁之前被调用。这个钩子提供了一种机会，可以在组件被销毁之前进行一些清理工作，如取消事件监听器、定时器、解绑自定义事件等，以避免内存泄漏。

**

beforeDestroy

钩子函数的一些特点：**

1. 在销毁之前调用：当组件被销毁之前，即在它从 DOM 中移除之前，这个钩子会被调用。
2. 清理工作：这是进行清理工作的最后机会，比如移除事件监听器、定时器清理、解绑全局事件、销毁子组件实例等。
3. 组件实例仍然可用：在 beforeDestroy 钩子函数被调用时，组件实例仍然完全可用，这意味着你还可以访问数据、方法、 computed 属性等。

*注意：***Vue 实例销毁时，其子实例也会被销毁。因此，如果你有子组件，它的

beforeDestroy

钩子也会被调用，在实际应用中，如果你在组件内部使用了如

window.addEventListener

或

document.addEventListener

这样的全局监听器，你也应该在

beforeDestroy

钩子中将它们移除，以防止在组件销毁后仍然保持监听状态，从而造成内存泄漏。**

总结：主要用于销毁一些事件监听器、定时器、解绑自定义事件等，节省资源。

8.destroyed钩子函数

**它发生在组件实例被完全销毁之后。在

destroyed

钩子函数中，组件实例已经从 DOM 中移除，所有的数据绑定和事件监听器都已经解绑，因此，这个钩子函数通常用于进行一些清理工作，确保组件不会在销毁后留下任何副作用**。

**

destroyed

钩子函数的一些特点：**

1. 组件已销毁：在 destroyed 钩子函数被调用时，组件实例已经被销毁，并且从 DOM 中移除。
2. 无实例访问：由于组件实例已经被销毁，因此在 destroyed 钩子函数中不能访问组件的数据、方法、计算属性等。
3. 清理工作：这是进行清理工作的一个合适时机，比如移除全局事件监听器、清理定时器、销毁子组件等。

*注意：***Vue 的生命周期钩子是按照特定的顺序调用的，

destroyed

钩子是在

beforeDestroy

钩子之后调用的，确保了组件在完全销毁后进行清理。****在

destroyed

钩子中，由于组件实例已经销毁，所以无法访问组件的数据和方法。**

总结：**

destroyed

钩子函数是进行彻底清理的最后机会，因此，如果你需要在组件销毁后进行额外的清理工作，比如移除全局事件监听器，确保不会对其他组件或应用造成影响，那么这是一个合适的地方。**

以上就是vue2中生命周期的解释和钩子函数的解析，可能有遗漏或者错误的地方，新手望见谅。