1、生命周期是什么?
Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
2、生命周期都有哪些
生命周期 | 描述 |
beforeCreate(创建前) | 组件实例被创建之前 |
created(创建后) | 组件实例完全创建 |
beforeMount(载入前) | 组件挂载之前 |
mounted(载入后) | 组件挂载到实例上去之后 |
beforeUpdate(更新前) | 组件数据发生变化,更新之前 |
updated(更新后) | 数据数据更新之后 |
beforeDestroy(销毁前) | 组件实例销毁之前 |
destroyed(销毁后) | 组件实例销毁之后 |
3、生命周期图表
4、具体分析
1.beforeCreate
此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。
2.created
在这个阶段vue实例已经创建,仍然不能获取DOM元素。
3.beforeMount
在这一阶段,我们虽然依然得不到具体的DOM元素,但vue挂载的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行;beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。
4.mounted
mounted是平时我们使用最多的函数了,一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已被渲染出来。
5.beforeUpdate
在这一阶段,vue遵循数据驱动DOM的原则;beforeUpdate函数在数据更新后虽然没立即更新数据,但是DOM中的数据会改变,这是Vue双向数据绑定的作用。
6.update
在这一阶段DOM会和更改过的内容同步。
7.beforeDestroy
在上一阶段vue已经成功的通过数据驱动DOM更新,当我们不在需要vue操纵DOM时,就需要销毁Vue,也就是清除vue实例与DOM的关联,调用destroy方法可以销毁当前组件。在销毁前,会触发beforeDestroy钩子函数。
8.destroyed
在销毁后,会触发destroyed钩子函数。