一、含义
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。生命周期又称为生命周期回调函数,生命周期函数,生命周期钩子。
二、生命周期函数
生命周期函数 | 执行时机 | 所属阶段 | 执行次数 | 应用场景 |
---|---|---|---|---|
beforeCreate | 在内存中开始创建组件之前 | 创建阶段 | 唯一一次 | - |
created | 在内存中创建组件完毕后 | 创建阶段 | 唯一一次 | 发送ajax请求 |
beforeMounted | 在把组件初次渲染到页面之前 | 创建阶段 | 唯一一次 | |
mounted | 组件初次渲染到页面之后 | 创建阶段 | 唯一一次 | 操作DOM |
beforeUpdate | 在组件被重新渲染之前 | 运行阶段 | 0次或多次 | |
updated | 在组件被重新渲染之后 | 运行阶段 | 0次或多次 | |
beforeUnmount | 在组件被销毁之前 | 销毁阶段 | 唯一一次 | |
unmounted | 在组件被销毁之后(页面和内存) | 销毁阶段 | 唯一一次 |
注意:
1.created
钩子是最常见的生命周期函数,因为它是在组件真正被挂载到页面之前,可以访问到所有组件的数据和方法。
2.在 beforeUpdate
和 updated
钩子中修改 data
是不安全的,因为这将导致 Vue 无限循环地重新渲染组件。
三、流程图示
四、官网链接
更多详细信息请移步官方网站:https://cn.vuejs.org/guide/essentials/lifecycle.html