vue2生命周期

简介: vue2生命周期

vue2生命周期

在进行组件化项目开发的时候都会存在一个组件的生命周期概念,像Vue、React、小程序等等,无一例外,而通常情况组件的生命周期主要分成三个阶段,包括:创建、更新以及销毁阶段。

Vue的生命周期钩子函数主要包括:

  1. beforeCreate(): 在实例初始化之后调用, data和methods都还没有初始化完成, 通过this不能访问
  2. created(): 此时data和methods都已初始化完成, 可以通过this去操作, 可以在此发ajax请求
  3. beforeMount(): 模板已经在内存中编译, 但还没有挂载到页面上, 不能通过ref找到对应的标签对象
  4. mounted(): 页面已经初始显示, 可以通过ref找到对应的标签, 也可以选择此时发ajax请求
  5. beforeUpdate(): 在数据更新之后, 界面更新前调用, 只能访问到原有的界面
  6. updated(): 在界面更新之后调用, 此时可以访问最新的界面
  7. beforeDestroy(): 实例销毁之前调用, 此时实例仍然可以正常工作
  8. destroyed(): Vue 实例销毁后调用, 实例已经无法正常工作了
  9. deactivated():组件失活, 但没有死亡
  10. activated(): 组件激活, 被复用
  11. errorCaptured(): 用于捕获子组件的错误,return false可以阻止错误向上冒泡(传递)

我们通常在created()/mounted()进行发送ajax请求,启动定时器等异步任务,而在beforeDestory()做收尾工作,如: 清除定时器操作。

不过需要注意的是mounted生命周期钩子中并不代表界面已经渲染成功,因为 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick。

Vue的生命周期钩子函数又分为了:单个组件生命周期、父子组件的生命周期、带缓存的路由组件生命周期等不同的状态,在不同的状态下所拥有的生命周期内容是不相同的。

  • 单个组件生命周期 初始化:
  • beforeCreate
  • created
  • beforeMount
  • mounted
  • 更新:
  • beforeUpdate
  • updated
  • 销毁:
  • beforeDestroy
  • destroyed
  • 父子组件的生命周期 初始化:
  • beforeCreate
  • created
  • beforeMount
  • –child beforeCreate
  • –child created
  • –child beforeMount
  • –child mounted
  • mounted
  • 更新:
  • beforeUpdate
  • –child beforeUpdate
  • –child updated
  • updated
  • 销毁:
  • beforeDestroy
  • – child beforeDestroy
  • – child destroyed
  • destroyed
  • 带缓存的路由组件生命周期 初始化:

  • mounted
  • –Child activated
  • activated
  • 路由离开
  • –Child deactivated
  • deactivated
  • 路由回来
  • –Child activated
  • activated
  • 捕获子组件错误的勾子 子组件执行抛出错误
  • errorCaptured

到这里也就结束了,希望对您有所帮助。

相关文章
|
3月前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
23天前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
26天前
|
JavaScript
|
26天前
|
JavaScript
vue3 生命周期
【10月更文挑战第14天】vue3 生命周期
|
5月前
|
JavaScript
vue的生命周期
vue的生命周期
30 3
|
5月前
|
JavaScript 前端开发
vue的生命周期
vue的生命周期
33 2
|
1月前
|
开发者
vue3生命周期钩子变化
【10月更文挑战第4天】
|
25天前
|
JavaScript 前端开发 API
深入探索挖掘vue3 生命周期
【10月更文挑战第10天】
30 0
|
2月前
|
JavaScript 前端开发 API
Vue3基础(十yi)___常用生命周期函数___setup___onMounted___onUpdated
本文介绍了Vue 3中的常用生命周期函数,包括`setup`、`onBeforeMount`、`onMounted`、`onBeforeUpdate`、`onUpdated`、`onBeforeUnmount`和`onUnmounted`,并解释了它们与Vue 2生命周期钩子的对应关系。文章通过代码示例展示了这些生命周期钩子在组件中的使用时机和场景。
42 0
|
3月前
|
JavaScript 前端开发 程序员
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)
这篇文章详细介绍了Vue的生命周期和各个阶段的钩子函数,包括`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy`和`destroyed`。文章通过图解、方法说明、代码实例和测试效果,阐述了每个钩子函数的作用和使用场景,帮助读者深入理解Vue实例从创建到销毁的整个过程。
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)