beforeCreate:function(){}
//组件实例化之前执行的函数
created:function(){}
//组件实例化完毕,但是页面没有显示
beforeMount:function(){}
//组件挂载前,页面还没有展示,但是虚拟的DOM已经配置
mounted:function(){}
//组件挂载后,这个方法执行后,页面显示
beforeUpdate:function(){}
//当页面操作后,组件更新前,页面没有显示,此时虚拟DOM已经挂载
updated:function(){}
//组件更新完毕,页面已经显示
beforeDestroy:function(){}
//组件销毁之前
destroyed:function(){}
//组件销毁之后
  1. beforeCreate:在实例初始化之后,**数据观测(data observer) ** 和 event/watcher事件配置 之前被调用,注意是 之前,此时data、watcher、methods统统滴没有。
    这个时候的vue实例还什么都没有,但是$route对象是存在的,可以根据路由信息进行重定向之类的操作。

  2. created:在实例已经创建完成之后被调用。在这一步,实例已完成以下配置:数据观测(data observer)属性和方法的运算watch/event 事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
    此时 this.$data 可以访问,watcher、events、methods也出现了,若根据后台接口动态改变data和methods的场景下,可以使用。

  3. beforeMount:在挂载开始之前被调用,相关的 render 函数 首次被调用。但是render正在执行中,此时DOM还是无法操作的。我打印了此时的vue实例对象,相比于created生命周期,此时只是多了一个$el的属性,然而其值为undefined。
    使用场景我上文已经提到了,页面渲染时所需要的数据,应尽量在这之前完成赋值。

  4. mounted:在挂载之后被调用。在这一步 创建vm.$el并替换el,并挂载到实例上。(官方文档中的 “如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内” 这句话存疑)
    此时元素已经渲染完成了,依赖于DOM的代码就放在这里吧~比如监听DOM事件。

  5. beforeUpdate:$vm.data更新之后,虚拟DOM重新渲染 和打补丁之前被调用。
    你可以在这个钩子中进一步地修改$vm.data,这不会触发附加的重渲染过程。

  6. updated:虚拟DOM重新渲染 和打补丁之后被调用。
    当这个钩子被调用时,组件DOM的data已经更新,所以你现在可以执行依赖于DOM的操作。但是不要在此时修改data,否则会继续触发beforeUpdate、updated这两个生命周期,进入死循环!

  7. beforeDestroy:实例被销毁之前调用。在这一步,实例仍然完全可用。
    实例要被销毁了,赶在被销毁之前搞点事情吧哈哈~

  8. destroyed:Vue实例销毁后调用。此时,Vue实例指示的所有东西已经解绑定,所有的事件监听器都已经被移除,所有的子实例也已经被销毁。
    这时候能做的事情已经不多了,只能加点儿提示toast之类的东西吧。

:beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几个钩子函数,在服务器端渲染期间不被调用。

最新文章

  1. Netty实现高性能RPC服务器优化篇之消息序列化
  2. Java实现归并排序
  3. JAVAC 命令详解(转)
  4. html基础总结版
  5. git的安装以及遇到的问题
  6. 【半平面交】bzoj2618 [Cqoi2006]凸多边形
  7. 常用的API接口,返回JSON格式的服务API接口
  8. Html.DropDownList的用法
  9. overload的一点思考
  10. R语言初涉
  11. Xcode调试之查看变量
  12. js左右大小变化
  13. PHP6天基础知识部分
  14. Elasticsearch集群
  15. 【转】iframe页面跳转时,导致父页面滚动!该怎么解决?
  16. [daily][samba] smbclient使用
  17. [转]web.xml中<url-pattern>详解
  18. final与abstract关键字
  19. MapServer和GeoServer对比
  20. 【计算机网络基础】TCP/IP、HTTP、Socket的概念

热门文章

  1. com.alibaba.druid.pool.DruidPooledConnection cannot be cast to oracle.jdbc.OracleConnection 异常解决办法
  2. Vintage_坏客户定义
  3. Java基础 awt Graphics2D 生成矩形图片并向内写入字符串
  4. [转]TrueType字体结构
  5. iOS - 使用SDWebImage缓存图片,MJPhotoBrowser展示图片的问题
  6. 【设计】Facebook的语调设计-做的珍惜
  7. SpringBoot小技巧:统一异常处理
  8. pdf转换成jpg不清晰怎么办
  9. CentOS升级kernel
  10. zabbix 后台数据库清除数据