vue2生命周期

vue2生命周期

---

说明

• 每个vue实例在被创建都要经历一系列初始化的过程
• 在这个过程中会运行一些叫做生命周期钩子的函数
• 使用户可以在页面中不同的阶段执行代码

beforeCreate

• 在实例初始化之后,执行beforeCreate
• 此时data,methods等配置项都还未创建

created

• 实例此时创建完成,DOM还未挂载
• 此时可以访问到data中的数据,methods的方法
• 但是由于DOM节点还未挂载,所以现在无法执行DOM操作
• 一般在created函数中发送ajax请求

beforeMount

• 现在vue的虚拟DOM已经生成,
• 但是对DOM的操作不会生效
• 等beforeMount`过后,虚拟DOM会被挂载到真实的DOM树

mounted

• DOM树生成,页面渲染成功,此时可以执行DOM操作
• 也可以执行进行发送ajax请求
• 注意mounted不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在mounted 内部使用 nextTick

beforeUpdate

• 在数据发生改变后,DOM 被更新之前被调用。
• 现在vue会根据新的数据,生成新的虚拟DOM
• 随后通过diff与旧的DOM进行比较,最终完成页面更新
• 即完成看Model > View的更新

updated

• 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
• 当updated被调用时，组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
• 大多数情况下，应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
• 注意:updated不会保证所有的子组件也都被重新渲染完毕。如果希望整个视图都渲染完毕，可以在 updated 里使用nextTick

beforeDestroy

• 实例销毁之前调用.在这一步,实例仍然完全可用。
• 现在实例中的data,methods,指令等都可以继续使用
• 一般在此时执行 关闭定时器,解绑自定义事件等

destroyed

• 实例销毁后调用。该钩子被调用后,实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

deactivated和actived

• 当被keep-alive包裹的组件进行路由切换时,组件从显示到隐藏会执行deactivated
• 当被keep-alive包裹的组件进行路由切换时,组件从隐藏到显示会执行actived
• 被keep-alive包裹的组件不会被销毁和重复创建,这两个钩子可以做到代替mounted()和destoryed()钩子执行业务的效果

附上vue 官方生命周期图示