[vue]简述vue生命周期

102 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第 5 天,点击查看活动详情

生命周期与生命周期钩子

对于vue而言,就是vue实例从创建到销毁的过程。

在这个过程中,可以运行一些函数,这个函数就是生命周期钩子;通过这些函数可以让我们在开发中添加自己的代码

实例生命周期钩子

  • beforeCreate 执行时组件实例还未创建,通常用于插件开发中执行一些初始化任务

  • created 组件实例已创建;各种数据可以使用,常用于异步数据获取; 由于未挂载,所以dom元素还不存在

  • beforeMount 未执行渲染、更新,dom未创建

  • mounted 将虚拟dom转换成真实dom, 可以访问dom元素

  • beforeUpdate 更新前,可用于获取更新前各种状态

  • updated 更新后,所有状态已是最新

  • beforeDestroy 销毁前,可用于一些定时器或订阅的取消

  • destroyed 组件已销毁,作用同上

页面设置缓存会激发的钩子

  • activated 被 keep-alive 缓存的组件激活时调用。
  • deactivated 被 keep-alive 缓存的组件失活时调用。

2.5 新增钩子

  • errorCaptured 在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。