定义
从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。
八大生命周期(单页面生命周期过程)
- beforeCreate(创建前):vue实例初始化之前调用
此阶段为实例初始化完成,props 解析之后、data()
和 computed
等选项处理之前立即调用,此时的数据观察和事件配置都还没有准备好,实例中的data和el还是underfined状态,不可用的,dom元素也未加载,。
- created(创建后):vue实例初始化之后调用
beforeCreate之后紧接着的钩子就是创建完毕created,此时我们能读取到data的值,响应式数据、计算属性、方法和侦听器,但是DOM还没有生成,所以属性$el还是不存在的,dom元素也未加载。
- beforeMount(载入前):挂载到DOM树之前调用
此时的$el成功关联到我们指定的DOM节点,但是此时的DOM元素还未加载,如果此时在DOM元素中绑定数据使用{{name}}后里边的name不能成功地渲染出我们data中的数据
- mounted(载入后):挂载到DOM树之后调用
挂载完毕阶段,到了这个阶段数据就会被成功渲染出来。DOM元素也加载出来了,html片段代码我们加上ref属性,可以获取DOM元素。
- beforeUpdate(更新前):数据更新之前调用
当修改Vue实例的data时,Vue就会自动帮我们更新渲染视图,在这个过程中,Vue提供了beforeUpdate的钩子给我们,在检测到我们要修改数据的时候,更新渲染视图之前就会触发钩子beforeUpdate。html片段代码我们加上ref属性,用于获取DOM元素。Dom元素上的数据还没改变。
- updated(更新后):数据更新之后调用
此阶段为更新渲染视图之后,此时再读取视图上的内容,已经是最新的内容。 此时加载的DOM元素上的数据更新了。
- beforeDestroy(销毁前):vue实例销毁之前调用
调用实例的destroy()方法可以销毁当前的组件,在销毁之前,会触发beforeDestroy钩子。
- destroyed(销毁后):vue实例销毁之后调用
成功销毁之后,会触发destroyed钩子,此时该实例与其他实例的关联已经被清除,它与视图之间也被解绑,此时再修改name的值,试图不在更新,说明实例成功被销毁了。
父子组件的生命周期
父子组件的加载顺序
- 数据加载渲染阶段
父beforeCreate —— 父created —— 父beforeMount——
子beforeCreate ——子created——子beforeMount——子mounted
——父mounted
- data数据发生变化,更新阶段
父beforeUpdate——子beforeUpdate——子updated——父updated
- 销毁阶段
父beforeDestroy——子beforeDestroy——子destroyed——父destroyed
父子组件的内容发生变化时执行的生命周期
- 当父子组件修改父组件内容执行生命周期
父beforeUpdate —— 父updated
- 当父子组件修改子组件内容执行生命周期
子beforeUpdate——子updated
- 父子组件通信过程中执行的生命周期
父beforeUpdate——子beforeUpdate——子updated——父updated