Vue生命周期，你是否也对这些问题似懂非懂？

标签：Vue 实例 DOM 钩子 似懂非懂 生命周期 组件

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

Vue 有哪些生命周期钩子？每个阶段可以执行什么操作？销毁阶段还能访问组件的 this 吗？父组件可以监听子组件的生命周期吗？父子组件的生命周期的执行顺序是怎样的？Vue组件一般在哪个生命周期请求异步数据？mixins 有几个生命周期？

如果你对以上这些问题有疑问，或者似懂非懂，那么就跟我一起看看吧！

说说你对Vue生命周期的理解？

Vue 的生命周期是指 Vue 实例从创建到销毁所经历的一系列过程。在这个过程中，Vue 提供了一系列的钩子函数（也称为生命周期钩子），允许开发者在 Vue 实例的不同阶段添加代码，从而执行特定的操作。这些钩子函数按照特定的顺序被调用，帮助开发者在不同阶段执行相应的逻辑。

Vue的生命周期共有哪些阶段？

Vue 的生命周期描述了 Vue 实例从创建、挂载、更新到销毁的整个过程，在 Vue 的各个版本中有所不同。

Vue2：

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

Vue3 （选项式）：

beforeDestroy 改为了 beforeUnmount，destroyed 改为了 unmounted，其他与 Vue2 相同。

Vue3 （组合式）：

onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted

注意：setup 函数虽然可以在组件实例创建之前，创建响应式数据、计算属性、事件监听器等，但它并不属于 Vue3 组合式 API 的生命周期钩子！

介绍下Vue生命周期的各个阶段？

1. beforeCreate（实例创建前）：

在实例初始化之后，数据观测（data observer）和事件/侦听器的配置之前被调用。此时组件的属性和方法都不可访问，通常在这个阶段不进行任何操作，因为无法访问到数据和DOM。

2. created（实例创建后） ：

实例已经被创建，组件的data、methods、computed、watch等选项已经初始化完成，但 DOM 还未挂载。此时可以访问到组件的数据，进行数据的初始化操作，如从服务器获取数据等，但无法访问到 DOM 元素（ e l 和 el和 el和refs都不起作用）。

3. beforeMount（实例挂载前）：

在挂载开始之前被调用，此时模板编译完成，但尚未渲染成DOM节点。在这个阶段，可以更改数据，但这些更改不会触发组件的重新渲染。同 created 不能访问 DOM 元素。

4. mounted（实例挂载后）：

实例已经被挂载到页面上，完成编译的模板已经渲染到页面中，此时可以访问到 DOM 元素，进行 DOM 操作（ e l 和 el和 el和refs生效），如绑定事件监听器、初始化插件等。

5. beforeUpdate（实例更新前）：

在数据更新之后（访问数据是更新后的值），DOM 树更新之前被调用，此时虚拟 DOM 已经重新渲染完成，但尚未应用到实际的 DOM 上。在这个阶段可以访问到更新前的 DOM 状态，但通常不进行DOM操作。

6. updated（实例更新后） ：

数据已经更新完成，虚拟 DOM 也已重新渲染成实际的 DOM。在这个阶段可以进行依赖于 DOM 的操作，但要注意避免在此期间更改状态，因为这可能导致更新无限循环。

7. beforeDestroy（实例销毁前）：

在实例销毁之前被调用，此时实例仍然可用，仍然可以访问 this，该阶段多进行清理工作，如清除定时器、解绑事件监听器等。

8. destroyed（实例销毁后）：

实例销毁后调用，所有指令解绑，所有数据观察器（watch/computed）移除，所有子实例也已经被销毁。此时组件的所有东西都会被解绑和移除。此时还能访问 this，访问和修改 data 数据，可以调用 methods 中的方法，但没卵用！不过，改变全局状态的话，依然生效！！

注意：Vue3 选项式组件的生命周期钩子也是同样理解，只是部分钩子名称不同！

Vue在destroyed生命周期中能访问到this吗？

可以访问到 this，也可以访问组件的数据，调用组件的方法。但需要注意的是，此时组件的 DOM 已经被销毁，并且组件实例的所有指令都已解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

注意：同样适用于 Vue3 选项式组件，只是钩子名称不同！

Vue的父组件可以监听到子组件的生命周期吗？

Vue 的父组件可以监听到子组件的生命周期。有以下几种方式：

1. 使用 $emit 和 v-on
   • 在子组件的生命周期中调用 $emit 向父组件传递事件，父组件对子组件抛出的事件进行监听。
2. 使用 @hook 语法
   • 父组件可也以直接通过@hook:生命周期钩子名="处理方法"的形式来监听子组件的生命周期。例如，父组件可以通过<child-component @hook:mounted="handleMounted"></child-component>来监听子组件的mounted钩子。
3. 使用provide/inject
   • 父组件可以向子组件 provide 一个方法，子组件 inject 父组件提供的方法，并在生命周期钩子中进行调用。
4. 使用全局状态管理
   • 使用全局状态管理，如Vuex，子组件在生命周期钩子中更新状态，父组件对状态进行监听。

注意：除了第2条，其他同样适用于 Vue3 选项式组件！

Vue父子组件生命周期的执行顺序是怎样的？

加载时：

1. 父 beforeCreate
2. 父 created
3. 父 beforeMount
4. 子 beforeCreate
5. 子 created
6. 子 beforeMount
7. 子 mounted
8. 父 mounted

更新时：

1. 父 beforeUpdate
2. 子 beforeUpdate
3. 子 updated
4. 父 updated

销毁时：

1. 父 beforeDestroy
2. 子 beforeDestroy
3. 子 destroyed
4. 父 destoryed

提示：以上是 Vue2 父子组件生命周期的执行顺序，Vue3 与之相同，只是部分钩子名称不同。

Vue组件一般在哪个生命周期请求异步数据？

在 Vue 组件中，通常在 created 或 mounted 生命周期钩子中发起异步数据请求。created 是在组件实例被创建之后同步处理的，而 mounted 是在组件被挂载到 DOM 上之后处理的。created 能更快获取到服务端数据，减少页面加载时间。但如果你的组件请求完异步数据后，依赖 DOM 或进行 DOM 操作的话，最好在 mounted 钩子中进行。

keep-alive包裹的组件有哪些生命周期？

keep-alive 是 Vue 提供的一个内置组件，用来缓存组件状态，防止重复渲染 DOM。一般用于动态组件和路由组件。

如果为一个组件被 keep-alive 包裹了，那么它会比普通组件多出两个生命周期：deactivated、activated。组件失活时触发 deactivated 钩子，组件被激活时触发 activated 钩子。

mixins有几个生命周期阶段？

mixins 的生命周期同普通组件，对于"同名"生命周期钩子，混入对象的钩子先执行，组件的钩子后执行。
好了，分享结束，谢谢点赞，下期再见。

标签：Vue,实例,DOM,钩子,似懂非懂,生命周期,组件
From： https://blog.csdn.net/m0_37943716/article/details/142183093