Vue生命周期：组件化流程详解

2023-10-15 13:20:57

Vue.js 的生命周期是组件创建、更新和销毁过程中一系列钩子函数的集合。这些钩子函数允许我们响应组件状态的变化，并执行必要的操作。

Vue.js 的生命周期阶段

Vue.js 的生命周期包含以下阶段：

beforeCreate： 在实例初始化之前调用，此时还未创建实例。
created： 在实例创建之后立即调用，但尚未挂载到 DOM 上。
beforeMount： 在组件挂载到 DOM 之前调用。
mounted： 在组件挂载到 DOM 之后立即调用，这时组件已经可以与用户交互了。
beforeUpdate： 在组件更新之前调用，props 或 data 发生变化时触发。
updated： 在组件更新之后立即调用，此时 DOM 已经更新。
beforeDestroy： 在组件销毁之前调用，此时组件已经与 DOM 解除绑定。
destroyed： 在组件销毁之后立即调用，此时组件已经不存在了。

生命周期函数的执行顺序

生命周期函数的执行顺序如下：

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

源码剖析

让我们深入 Vue.js 源码，看看生命周期函数是如何实现的：

// Vue.js 源码中生命周期函数的实现

Vue.prototype._init = function () {
  ...
  this._create()
  this._mount()
  this._update()
  ...
}

Vue.prototype._create = function () {
  this._initState()
  this._initProps()
  ...
}

Vue.prototype._mount = function () {
  this._render()
  this._update()
  ...
}

Vue.prototype._update = function () {
  this._render()
  this._patch()
  ...
}