Vue生命周期

  • beforecreate :
    完成实例初始化,初始化非响应式变量
    this指向创建的实例;
    可以在这加个loading事件;
    data computed watch methods上的方法和数据均不能访问
  • created
    实例创建完成
    完成数据(data props computed)的初始化 导入依赖项。
    可访问data computed watch methods上的方法和数据
    未挂载DOM,不能访问$el,$ref为空数组
    可在这结束loading,还做一些初始化,实现函数自执行,
    可以对data数据进行操作,可进行一些请求,请求不易过多,避免白屏时间太长。
    若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中
  • berofeMount
    有了el,编译了template|/outerHTML
    能找到对应的template,并编译成render函数
  • mounted
    完成创建vm.$el,和双向绑定,
    完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作
    即有了DOM 且完成了双向绑定 可访问DOM节点,$ref
    可在这发起后端请求,拿回数据,配合路由钩子做一些事情;
  • beforeUpdate
    数据更新之前
    可在更新前访问现有的DOM,如手动移除添加的事件监听器;
  • updated :
    完成虚拟DOM的重新渲染和打补丁;
    组件DOM 已完成更新;
    可执行依赖的dom 操作
    注意:不要在此函数中操作数据,会陷入死循环的。
  • activated:
    在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了,
    如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发
  • deactivated
    for keep-alive 组件被移除时使用
  • beforeDestroy:
    在执行app.$destroy()之前
    可做一些删除提示,如:你确认删除XX吗?
    可用于销毁定时器,解绑全局时间 销毁插件对象
  • destroyed :
    当前组件已被删除,销毁监听事件 组件 事件 子实例也被销毁
    这时组件已经没有了,你无法操作里面的任何东西了。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 13,265评论 1 52
  • 前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
    心_c2a2阅读 6,729评论 1 8
  • Vue知识点的总结 Vue中的指令及其基本语法: 第一步:从官网上下载vue开发版本的js文件 引入js文件 ...
    往前走莫回头_2cd6阅读 5,310评论 0 1
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,008评论 0 25
  • 今天去菜场买菜时下起大雨,感恩现在的网络购物的便捷,设计的婴儿车雨衣太好用了,又透气又防水,视野也好,宝宝坐在里面...
    顺路99阅读 1,196评论 0 2