vue生命周期详解

1、什么是生命周期?

vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。

2、vue生命周期的作用是什么?

vue生命周期包括四个阶段,8个钩子函数,作用在某个阶段给你一个做某些处理的机会。

3、第一次页面加载会触发那几个钩子函数?

beforeCreate、created、beforeMount,mounted

4、简述每个周期具体适合那些场景?

beforecreate:可以在这加个loading事件,在加载实例的时候触发;
created:初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用;
mounted:挂在元素,获取到DOM节点;
updated:如果对数据统一处理,在这里写上相应函数;
beforeDestory:可以做一个确认停止事件的确认框nextTick,更新数据后立即操作dom;

5、created和mounted的区别?

created不能操作DOM节点,mounted可以操作DOM节点;

6、vue获取数据在哪个周期函数?

created/beforeMount/mounted

7、请详细说下你对vue生命周期的理解?

创建前/后:在beforeCreated阶段,vue实例的挂载完el还没有。
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会在触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。

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

推荐阅读更多精彩内容

  • 每个vue实例从创建到销毁的过程都是一个生命周期,也会运行对应的钩子函数,下图为Vue生命周期示意图: 1.bef...
    Starkchen阅读 1,239评论 0 0
  • 什么是Vue的生命周期 先看一看官方文档对Vue生命周期的说明: 每个 Vue 实例在被创建时都要经过一系列的初始...
    salt_fash阅读 461评论 1 3
  • 每个vue实例从创建到销毁的过程都是一个生命周期,也会运行对应的钩子函数,下图为Vue生命周期示意图: 1.bef...
    yun_154192阅读 12,665评论 1 7
  • 1.vue基本生命周期 vue源码中最终执行生命周期函数都是调用callHook方法,callHook函数的逻辑很...
    WHU_GIS_LJ阅读 19,653评论 0 13
  • 生命周期的定义 生命周期:就是一个组件从实例化创建并添加到DOM开始,一直到组件被销毁的整个过程。 生命周期函数(...
    听书先生阅读 1,219评论 0 4