vue 生命周期详解

1,了解生命周期

为方便了解,实例初始值如图:


实例如图

create:创建


create代码


浏览器控制台打印

如果可以看到创建 created 的方法里,实例对象data 值都加载完成,但是Dom节点并未加载完,所以如果初始获取接口赋值给data的情况下,建议在这个函数里处理。

mount:挂载


mounte代码


浏览器控制台打印

如果是Dom元素进行调用,建议放到 mounted 函数的 $nextTick 里

update:更新


update代码


初始浏览器控制台打印
value变量修改之后会触发

value变量更新渲染页面之后触发

destroy:销毁

destroy代码


浏览器控制台打印

关闭页面,离开当前路由情况下执行,如果页面有定时器,建议在次进行销毁定时器,否则离开路由情况并未关闭页面的情况下,定时器依旧执行,浪费进程。

2,父组件生命周期顺序如下:

父组件生命周期代码如下:


父组件代码

table-data 子组件生命周期如下:


子组件代码

浏览器打印顺序如下:


浏览器控制台打印顺序

有次可见,生命周期顺序为:

父组件 created --> 子组件 created --> 子组件 mounted --> 父组件 mounted

会发现调用顺序不是父组件都调用完成之后再调用子组件,父组件向子组件传值时,如果值返回是异步情况下,有时会导致子组件并未接收到值立马渲染到页面上,此时建议用 watch、computed 来监听值变化。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • react和vue都是比较热门的前端框架,对于一些初始数据的加载,应该放在那个生命周期中调用比较合适?给出结论前,...
    lemonzoey阅读 3,779评论 0 0
  • 什么是Vue的生命周期 先看一看官方文档对Vue生命周期的说明: 每个 Vue 实例在被创建时都要经过一系列的初始...
    salt_fash阅读 467评论 1 3
  • 每个vue实例从创建到销毁的过程都是一个生命周期,也会运行对应的钩子函数,下图为Vue生命周期示意图: 1.bef...
    Starkchen阅读 1,254评论 0 0
  • 每个vue实例从创建到销毁的过程都是一个生命周期,也会运行对应的钩子函数,下图为Vue生命周期示意图: 1.bef...
    yun_154192阅读 12,676评论 1 7
  • 生命周期的定义 生命周期:就是一个组件从实例化创建并添加到DOM开始,一直到组件被销毁的整个过程。 生命周期函数(...
    听书先生阅读 1,237评论 0 4