一、什么是生命周期?
我理解的生命周期就是:从出生到死亡的过程
二、生命周期有哪些?
Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后
| 生命周期 | 描述 |
|---|---|
| beforCreate | 组件实例被创建之前 |
| Created | 组件实例被创建完成 |
| beforMount | 组件被挂载之前 |
| Mounted | 组件挂载完成 |
| beforeUpdate | 组件数据更新之前 |
| Updated | 件数据更新之完成 |
| beforeDestroy | 组件被销毁之前 |
| Destroyed | 组件被销毁完成 |
三、vue 生命周期的流程、理解与分析
- 流程图
生命周期的理解分析
new Vue():表示开始创建一个Vue实例对象_init() :表示刚开始初始化一个vue空的实例对象 ,此时对象身上只有默认的生命周期函数和事件,其他的东西都没创建beforCreate:注意:在beforCreate生命周期函数执行时,data,methods都未被初始化Create: 在Create中,data和methods都已经被初始化,之后才能调用,此时vm.$el,并没有被创建判断是否存在el?若不存在则停止编译,直到调用vm.$mount(el)才会继续编译,优先级:render > template > outerHTML,vm.el获取到的是挂载DOM的beforMount:在此阶段,可以获取到vm.el, 虽然已经完成Dom初始化,但并未挂载在el选项上mouted :vm.el已经完成DOM的挂载和渲染,此时打印vm.el,会发现之前的挂载点及其内容已经被替换成新的DOMbeforeUpdate:更新的数据必须是被渲染在模板上的,此时视图层还未更新,若在beforeUpdate中再次修改数据,不会再次触发更新方法update:完成视图层的更新 , 如若在update中再次修改数据,会再次触发更新方法(beforeUpdate、update)beforeDestroy :实例被销毁前调用,此时实例属性与方法仍可访问destroyed:完全销毁一个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器 并不能清除DOM,仅仅销毁实例
四、created和mounted这两个生命周期中请求数据的区别
created是在组件实例一旦创建完成的时候立刻调用,这时候页面dom节点并未生成mounted是在页面dom节点渲染完毕之后就立刻执行的触发时机上created是比mounted要更早的两者相同点:都能拿到实例对象的属性和方法讨论这个问题本质就是触发的时机,放在mounted请求有可能导致页面闪动(页面dom结构已经生成),但如果在页面加载前完成则不会出现此情况建议:放在create生命周期当中
本文乃个人拙见,如有不当之处敬请各位看官提出宝贵意见,本人在此不胜感激