来自官方的生命周期图
image.png
关于生命周期钩子
| vue2.0 | 描述 |
|---|---|
| beforeCreate | 组件实例未创建完成，在查看属性前，如data属性等 |
| created | 组件实例刚被创建完成，属性和事件已被绑定，但dom还未生成$el属性不存在 |
| beforeMount | 模板编/译挂载前 |
| mounted | 模板编译/挂载后， vue的虚拟dom已经替换了真实dom |
| beforeUpdate | 组件更新前，此钩子在数据发生改变后而vue的虚拟dom重新渲染前生效 |
| updated | 组件更新后 |
| beforeDestory | 组件销毁前，当vm.$destroy()被调用后组件开始销毁，此钩子在此函数调用后组件销毁前生效 |
| destoryed | 组件已被销毁 |
由此可知：
- beforeCreate： data、event都未加载
- created：data、event已经加载， 但$el(vue的虚拟dom节点)未生成为undefined
- beforeMount: $el生成，但是未将真实的dom替换成$el
- mounted: $el替换了真实的dom节点并插入到dom树中，所以触发mounted()时，可以获取到$el为真实的dom元素
image.png
网上收集的用法建议：
- beforeCreate: 可以加loading事件，在加载实例时触发
- created: 当组件创建完成（data和event已经绑定）需要的事件写这里,如: loading事件、异步请求也适合。
- mounted: 组件已挂载（vue的虚拟dom已取代真实的dom），可以加一些需要监听的事件。
- beforeDestroy： 可以加一些组件销毁的确认事件
- destroyed： 通知后台组件被销毁（用户离开该组件）的事件。
- nextTick : 更新数据后立即操作dom
