Vue 2 生命周期与 Vue 3 生命周期：介绍与差别对比

目录

引言：

一、Vue 2 生命周期介绍：

二、Vue 3 生命周期介绍：

注册周期钩子​

生命周期图示

生命周期 

三、Vue 2 生命周期与 Vue 3 生命周期的差别对比：

---

引言：

 Vue.js 是一款流行的 JavaScript 框架，被广泛用于构建现代化的用户界面。Vue 2 是 Vue.js 的旧版本，而 Vue 3 是最新的版本。本文将介绍 Vue 2 生命周期和 Vue 3 生命周期，并对两个版本进行对比，以帮助开发者更好地理解和使用 Vue.js。

一、Vue 2 生命周期介绍：

 Vue 2 生命周期由一系列钩子函数组成，这些钩子函数允许开发者在组件的不同生命周期阶段执行特定的操作。Vue 2 生命周期包括以下阶段：

beforeCreate：在实例初始化之后，数据观测 (data observation) 和事件配置 (event/watcher setup) 之前调用。

created：在实例创建完成后被调用，此时实例已完成数据观测，但尚未挂载到 DOM 上。

在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

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

mounted：实例被挂载后调用，此时组件已经在 DOM 中渲染完成。

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

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

updated：组件更新完成后调用，此时虚拟 DOM 已重新渲染并应用补丁。

在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多