Vue生命周期过程
Vue 1.0+ | Vue 2.0 | Description |
init | beforeCreated | 组件实例刚刚被创建,组件属性计算之前,如data属性等 |
created | created | 组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在 |
beforeCompile | beforeMount | 模板编译/挂载之前 |
compiled | mounted | 模板编译/挂载之后 |
ready | mounted | 模板编译/挂载之后(不保证组件已在document中) |
- | beforeUpdate | 组件更新之前 |
- | updated | 组件更新之后 |
- | activated | for keep-alive,组件被激活时使用 |
- | deactivated | for keep-alive,组件被移除时使用 |
attached | - | 已废弃 |
detached | - | 已废弃 |
beforeDestory | beforeDestory | 组件销毁前调用 |
destoryed | destoryed | 组件销毁后调用 |
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素
<keep-alive>
<loading></loading>
</keep-laive>
当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行
被包裹在keep-alive中的组件的状态将会被保留,例如我们将某个列表类组件内容滑动到第100条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第100条列表处
参考文献 https://segmentfault.com/a/1190000008010666?utm_source=tag-newest
什么时候使用这些功能?
beforecreate
:可以在这加个loading事件 created
:在这结束loading,还做一些初始化,实现函数自执行 mounted
: 在这发起后端请求,拿回数据,配合路由钩子做一些事情 beforeDestroy
: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容