Vue的生命周期图解
Vue生命周期的钩子函数（vue1.0 - vue2.0）
| vue 1.0 + | vue 2.0 | Description |
|---|---|---|
| init | beforeCreate | 组件实例刚被创建，组件属性计算之前，如 data 属性等 |
| created | created | 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在 |
| beforeCompile | beforeMount | 模板编译 / 挂载之前 |
| compiled | mounted | 模板编译 / 挂载之后 |
| ready | mounted | 模板编译 / 挂载之后（不能保证组件已在document中） |
| - | beforeUpdate | 组件更新之后 |
| - | update | 组件更新之后 |
| - | activated | for keep-alive，组件被**时调用 |
| - | deactivated | for keep-alive，组件被移除时调用 |
| attached | - | 将 vm.el 附加到dom时调用，直接操纵 vm.$el 不会触发这个钩子 |
| datached | - | 从dom中移除 vm.el 不会触发这个钩子 |
| beforeDestory | beforeDestory | 组件销毁前调用 |
| destoryed | destoryed | 组件销毁后调用 |
Vue的生命周期简单来说就是 Vue实例从创建到销毁的过程。
一个完整的生命周期，总共分为三个阶段：挂载阶段 (进入页面阶段)、更新阶段、销毁阶段(卸载阶段)。
1. beforeCreate
- 说明 : 在实例初始化之前,数据观测 和 event/watcher 事件配置之前被调用
- 组件实例刚被创建,组件属性计算之前, 例如 data 属性 methods 属性
- 注意 : 此时,无法获取 data 中的数据 和 methoids 中的方法
- 场景 : 几乎不用
2. created
- 说明 : 组件实例创建完成,属性已绑定, 可以调用 methods 中的方法、可以获取 data 值
- 注意 : 在这里更改数据不会触发updated函数
- 场景 : 一般可以在这里做初始数据的获取
Has ‘el’ option ?
- YES => 就是正常的 el 边界
- NO => 可以注释,但是必须要手动添加 vm.$mount(el) 去指定边界
Has template option?
- No => 将 el 的 outerHtml 作为模板进行编译 ( outerHTML = 自身 + innerHTML )
- YES => vue 就会将 template 的内容进行编译,编译后,替换页面中 vue 管理的边界
3. beforeMounted
- 说明 : 在挂载开始之前被调用 (挂载:可以理解DOM 渲染)
- 注意 : 在这里更改数据不会触发updated函数
- 场景 : 一般可以在这里做初始数据的获取
4. mounted
- 说明 : 组件已经出现在页面中，数据、真实dom都已经处理好了，事件都已经挂载好
- 注意 : 在这里更改数据不会触发updated函数
- 场景 : 发送 ajax 或者 操作 DOM
5. beforeUpdate
- 说明 : vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染
- 注意 : 此处获取的数据是更新后的数据，但是获取页面中的 DOM 元素是更新之前的
- 场景 : 一般不做操作
6. updated
- 说明 : 数据已经更改完成，dom也重新渲染完成， 可以操作更新后的虚拟dom
7. beforeDestroy
- 说明：实例销毁之前调用。在这一步，实例仍然完全可用
- 场景：实例销毁之前，执行清理任务，比如：清除定时器等
8. destroyed
- 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。