vue生命周期

vue的生命周期如图所示:

vue生命周期图例

它可以总共分为8个阶段:
beforeCreate(创建前),
created(创建后),
beforeMount(载入前),
mounted(载入后),
beforeUpdate(更新前),
updated(更新后),
beforeDestroy(销毁前),
destroyed(销毁后)

create 和 mounted 相关

beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载

应用场景

beforecreate : 举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestory: 你确认删除XX吗?
destoryed :当前组件已被删除,清空相关内容

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

推荐阅读更多精彩内容

  • vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。 生命周期探究 对于执...
    余生LHX阅读 704评论 0 3
  • vue生命周期简介 图片发自简书App 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。 ...
    F_imok阅读 569评论 0 1
  • 测试生命周期钩子函数代码: main.js const v= new Vue({ data: { hh:'数据',...
    luckySnail阅读 1,493评论 0 2
  • 参照翻译 Understanding Vue.js Lifecycle Hooks 理解组件的生命周期,有利于我们...
    bacbcc94613b阅读 5,086评论 0 6
  • Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,...
    鄙人才疏学浅阅读 597评论 0 1