官方的Vue生命周期图
具体的钩子函数
| 钩子函数 | 描述 |
|---|---|
| beforeCreate | 组件实例刚被创建，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 |
| created | 组件实例创建完成，在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见 |
| beforeMounted | 模版编译/挂载之前 |
| mounted | 模版编译/挂载之后(不保证组件已在document中) el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |
| beforeUpdate | 组件更新前； 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 |
| updated | 组件更新后； 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 |
| activated | for keep-alive，组件被激活时调用 |
| deactivated | for keep-alive，组件被移除时调用 |
| beforeDestory | 组件销毁前调用 |
| destoryed | 组件销毁后调用 |
1、beforeCrete: 此时,$el和data都为undefined,没有初始化
2、created: 创建后data初始化了,而$el没有
3、beforeMount: 挂在之前,$el和data都初始化了
4、mounted: Vue实例挂载完成了
5、data数据变化时只会触发update
6、执行完destroy操作后,data里的数据没有变化,但是Dom结构还存在,也就是Vue实例不再受控制了,完成了解耦
生命周期简化图
常用生命周期钩子函数使用
- beforecreate : 举个栗子：可以在这加个loading事件
- created ：在这结束loading，还做一些初始化，实现函数自执行
- mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
- beforeDestory： 你确认删除XX吗？
- destoryed ：当前组件已被删除，清空相关内容
参考文章
https://segmentfault.com/a/1190000009677699#articleHeader4
http://www.jianshu.com/p/e9f884b6ba6c
网友评论