谈谈你对生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?
一、什么是生命周期?我理解的生命周期就是:从出生到死亡的过程二、生命周期有哪些?Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后生命周期描述beforCreate组件实例被创建之前Created组件梳理被创建完成beforMount组件被挂载之前Mounted组件挂载完成beforeUpdate组件数据更新之前Updated件数据更新之完成beforeDestroy
·
一、什么是生命周期?
我理解的生命周期就是:从出生到死亡的过程
二、生命周期有哪些?
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生命周期当中
ps:本文乃个人拙见,如有不当之处敬请各位看官提出宝贵意见,本人不胜感激
更多推荐
已为社区贡献1条内容
所有评论(0)