vue2生命周期
在进行组件化项目开发的时候都会存在一个组件的生命周期概念,像Vue、React、小程序等等,无一例外,而通常情况组件的生命周期主要分成三个阶段,包括:创建、更新以及销毁阶段。
Vue的生命周期钩子函数主要包括:
- beforeCreate(): 在实例初始化之后调用, data和methods都还没有初始化完成, 通过this不能访问
- created(): 此时data和methods都已初始化完成, 可以通过this去操作, 可以在此发ajax请求
- beforeMount(): 模板已经在内存中编译, 但还没有挂载到页面上, 不能通过ref找到对应的标签对象
- mounted(): 页面已经初始显示, 可以通过ref找到对应的标签, 也可以选择此时发ajax请求
- beforeUpdate(): 在数据更新之后, 界面更新前调用, 只能访问到原有的界面
- updated(): 在界面更新之后调用, 此时可以访问最新的界面
- beforeDestroy(): 实例销毁之前调用, 此时实例仍然可以正常工作
- destroyed(): Vue 实例销毁后调用, 实例已经无法正常工作了
- deactivated():组件失活, 但没有死亡
- activated(): 组件激活, 被复用
- 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
到这里也就结束了,希望对您有所帮助。