谈谈你对生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?

一、什么是生命周期?

我理解的生命周期就是:从出生到死亡的过程

二、生命周期有哪些?

Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后

生命周期描述
beforCreate组件实例被创建之前
Created组件梳理被创建完成
beforMount组件被挂载之前
Mounted组件挂载完成
beforeUpdate组件数据更新之前
Updated件数据更新之完成
beforeDestroy组件被销毁之前
Destroyed组件被销毁完成

三、vue 生命周期的流程、理解与分析

  • 流程图

在这里插入图片描述

生命周期的理解分析

  1. new Vue() :表示开始创建一个Vue实例对象
  2. init() : 表示刚开始初始化一个vue空的实例对象 ,此时对象身上只有默认的生命周期函数和事件,其他的东西都没创建
  3. beforCreate:注意:在beforCreate生命周期函数执行时,data,methods都未被初始化
  4. Create: 在Create 中,data和methods都已经被初始化,之后才能调用,此时vm.$el,并没有被创建
  5. 判断是否存在el?若不存在则停止编译,直到调用vm.$mount(el)才会继续编译,优先级:render > template > outerHTML,vm.el获取到的是挂载DOM的
  6. beforMount: 在此阶段,可以获取到vm.el, 虽然已经完成Dom初始化,但并未挂载在el选项上
  7. mouted :vm.el已经完成DOM的挂载和渲染,此时打印vm.el,会发现之前的挂载点几内容已经被替换成新的DOM
  8. beforeUpdate:更新的数据必须是被渲染在模板上的实例被销毁前调用,此时实例属性与方法仍可访问,此时视图层还未更新,若在beforeUpdate中再次修改数据,不会再次触发更新方法
  9. update:完成视图层的更新 , 如若在update中再次修改数据,会再次触发更新方法(beforeUpdate、update)
  10. beforeDestroy :实例被销毁前调用,此时实例属性与方法仍可访问
  11. destroyed:完全销毁一个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器
    并不能清除DOM,仅仅销毁实例

四、created和mounted这两个生命周期中请求数据的区别

created是在组件实例一旦创建完成的时候立刻调用,这时候页面dom节点并未生成mounted是在页面dom节点渲染完毕之后就立刻执行的触发时机上created是比mounted要更早的两者相同点:都能拿到实例对象的属性和方法讨论这个问题本质就是触发的时机,放在mounted请求有可能导致页面闪动(页面dom结构已经生成),但如果在页面加载前完成则不会出现此情况建议:放在create生命周期当中

ps:本文乃个人拙见,如有不当之处敬请各位看官提出宝贵意见,本人不胜感激

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值