vue生命周期

vue生命周期

是从new vue()(开始创建)、created(初始化数据)、编译模板、挂载DOM(beforeMount)、渲染(mounted)、更新(updated)、销毁(destroyed)等一系列过程。

beforeCreate

在实例创建之后,数据未初始化,此时数据和实例都不可访问

created

数据初始化完成,此时数据可以访问而实例不行

beforeMount

数据和实例都已初始化,此时相关的 render 函数首次被激活,实例为虚拟DOM节点,数据并没有插入DOM。

mounted

mounted 挂载完成,数据实例都可访问,实例为真实DOM节点,数据已插入DOM中。

beforeUpdate

数据更新时调用,实例发生在虚拟DOM的重新渲染

updated

数据更改,此时虚拟DOM也重新渲染完成,并替换成真实DOM

beforeDestroy

实例销毁前调用

destroyed

实例销毁后调用,调用后会将所有数据监听方法、关联的子组件 解绑

vm.$nextTick

修改数据后使用$nextTick,获取更新后的 DOM,即立即执行

生命周期使用

beforecreate : 可以在这加个loading事件 
created :在这结束loading,还做一些初始化,实现函数自执行 
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestroy: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 生命周期的阶段: beforeCreate: 在实例初始化之后,数据观测(data observer) 和 eve...
    枸杞辣条阅读 4,557评论 0 4
  • Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,...
    鄙人才疏学浅阅读 608评论 0 1
  • 先上图 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽、...
    任无名F阅读 41,791评论 10 50
  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM ...
    刘圣凯阅读 953评论 0 1
  • 什么是生命周期? Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→...
    travelClark阅读 2,616评论 0 36