Vue2生命周期的这些细节你都知道吗？

什么是 vue 生命周期？

Vue的生命周期是指Vue实例从创建到销毁的整个过程，这个过程可以分为四个阶段：创建（Creation）、挂载（Mounting）、更新（Updating）和销毁（Destruction）。每个阶段又包含了不同的生命周期钩子函数，通过这些钩子函数，我们可以在Vue实例的不同阶段添加自己的代码，实现特定的功能。

vue生命周期的各个阶段对应哪些钩子函数？

1. 创建阶段（Creation Hooks）

• beforeCreate：在实例初始化之后，数据观测（data observer）、事件（event）和watcher 设置之前被调用。

• created：在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算，watch和event 回调已设置，但是挂载阶段尚未开始，$el 属性目前不可见。

2. 挂载阶段（Mounting Hooks）

• beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。

• mounted：在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

3. 更新阶段（Updating Hooks）

• beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。适用于在现有DOM应用更改之前访问它。

• updated：在由于数据变更导致的虚拟DOM重新渲染和打补丁之后调用。当这个钩子被调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。

4. 销毁阶段（Destruction Hooks）

• beforeDestroy：在实例销毁之前调用。实例仍然完全可用，这是你解绑订阅、监听器和取消Vue实例之间的事件通信的好时机。

• destroyed：在实例销毁之后调用。调用此钩子时，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

这些生命周期钩子为在组件的不同阶段添加自己的代码提供了便利，例如在 created 钩子中进行数据请求，在 mounted 钩子中访问到DOM元素，在 beforeDestroy 钩子中进行清理操作等。理解和合理运用生命周期钩子是高效开发Vue应用的关键。

vue生命周期的各个阶段适合进行哪些操作？

1. 创建阶段（Creation Hooks）

• beforeCreate：可以用于加载一些不需要响应式处理的逻辑或数据。

• created：可以访问this，进行数据初始化，比如从服务端获取数据。

2. 挂载阶段（Mounting Hooks）

• beforeMount：可以用于执行一些预操作，比如取消之前的请求或者清理状态。

• mounted：通常用于发送请求获取数据、绑定非响应式的DOM事件监听器等。

3. 更新阶段（Updating Hooks）

• beforeUpdate：可以在这个钩子中访问现有的DOM，比如手动移除已添加的事件监听器。

• updated：可以执行依赖于DOM更新的操作，比如手动强制更新子组件。

4. 销毁阶段（Destruction Hooks）

• beforeDestroy：可以用于清理定时器、取消未完成的请求等。

• destroyed：可以执行一些最终的清理任务，确保没有残留的资源占用。

第一次页面加载会触发哪几个钩子？

会触发 beforeCreate, created, beforeMount, mounted 。

DOM 渲染在哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了。

Vue的父组件和子组件生命周期钩子执行顺序是什么？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父组件更新过程：父 beforeUpdate -> 父 updated

• 销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

本文由 mdnice 多平台发布