vue2生命周期
说明
- 每个vue实例在被创建都要经历一系列初始化的过程
- 在这个过程中会运行一些叫做生命周期钩子的函数
- 使用户可以在页面中不同的阶段执行代码
beforeCreate
- 在实例初始化之后,执行
beforeCreate
- 此时
data,methods
等配置项都还未创建
created
- 实例此时创建完成,DOM还未挂载
- 此时可以访问到
data
中的数据,methods
的方法 - 但是由于
DOM
节点还未挂载,所以现在无法执行DOM操作 - 一般在
created
函数中发送ajax
请求
beforeMount
- 现在
vue
的虚拟DOM
已经生成, - 但是对
DOM
的操作不会生效 - 等
before
Mount`过后,虚拟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()钩子执行业务的效果