vue--生命周期（在【options API】和【composition API】）

在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。

在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。

主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)：

  • 创建 ---- 在组建创建时执行
  • 挂载 ---- DOM被挂载时执行
  • 更新 ---- 当响应数据被修改时执行
  • 销毁 ---- 在元素被销毁之前立即执行

beforecreate和created被setup方法本身所替代，我们在在setup中将会访问到9个生命周期：

onBeforeMount：在挂载之前被调用，渲染函数render首次被调用

onMounted：组件挂载时调用

onBeforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。

onUpdated：因数据更改导致的虚拟DOM重新渲染和打补丁时调用

onBeforeUnmount：在卸载组件实例之前调用，此阶段的实例依旧是正常的。

onActivated：被keep-alive缓存的组件激活时调用

onDeactivated：被keep-alive缓存的组件停用时调用

onErrorCaptured：当捕获一个来自子孙组件的错误时被调用，有三个参数：错误对象、发生错误的组件实例、一个包含错误来源信息的字符串；此钩子会返回false来阻止改错误继续向上传播
  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured


关于vue

相关

关于vue+vant的使用心得

关于vuerouter配置的一些问题

标签