首先,1.x和2.x的生命周期钩子对比:

钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
  6. </head>
  7. <body>
  8.  
  9. <div id="app">
  10. <p>{{ message }}</p>
  11. </div>
  12.  
  13. <script type="text/javascript">
  14.  
  15. var app = new Vue({
  16. el: '#app',
  17. data: {
  18. message : "xuxiao is boy"
  19. },
    //该阶段组件实例刚创建,组件属性计算之前(可理解为组件属性还未初始化,未绑定,未挂载元素el),
    //比如:el,data,methods等,如果你试图在beforeCreated钩子中获取这些属性值,会得到undefine的结果,
    //但是可以获取到this对象,因为此时组件刚被创建好,所以this已经引用了该组件对象 el和data 并未初始化 
  20. beforeCreate: function () {
  21. console.group('beforeCreate 创建前状态===============》');
  22. console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
  23. console.log("%c%s", "color:red","data : " + this.$data); //undefined
  24. console.log("%c%s", "color:red","message: " + this.message)
  25. },
          //该阶段组件实例创建完成,组件属性绑定完成,但DOM还未生成,el属性还不存在 完成了 data数据的初始化,el没有
  26. created: function () {
  27. console.group('created 创建完毕状态===============》');
  28. console.log("%c%s", "color:red","el : " + this.$el); //undefined
  29. console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
  30. console.log("%c%s", "color:red","message: " + this.message); //已被初始化
  31. },
           //该阶段组件实例已经创建完成,但是el还未挂载具体元素 完成了 eldata 初始化 
            应用 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
  32. beforeMount: function () {
  33. console.group('beforeMount 挂载前状态===============》');
  34. console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
  35. console.log(this.$el);
  36. console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
  37. console.log("%c%s", "color:red","message: " + this.message); //已被初始化
  38. },
           //该阶段组件实例已经创建完成,但是el已挂载具体元素,此时的el属性不为undefine
  39. mounted: function () {
  40. console.group('mounted 挂载结束状态===============》');
  41. console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
  42. console.log(this.$el);
  43. console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
  44. console.log("%c%s", "color:red","message: " + this.message); //已被初始化
  45. },
            // data中的值被修改了之后,将触发update的操作
  46. beforeUpdate: function () {
  47. console.group('beforeUpdate 更新前状态===============》');
  48. console.log("%c%s", "color:red","el : " + this.$el);
  49. console.log(this.$el);
  50. console.log("%c%s", "color:red","data : " + this.$data);
  51. console.log("%c%s", "color:red","message: " + this.message);
  52. },
  53. updated: function () {
  54. console.group('updated 更新完成状态===============》');
  55. console.log("%c%s", "color:red","el : " + this.$el);
  56. console.log(this.$el);
  57. console.log("%c%s", "color:red","data : " + this.$data);
  58. console.log("%c%s", "color:red","message: " + this.message);
  59. },
            //我们在console里执行下命令对 vue实例进行销毁。销毁完成后,我们再重新改变message的值,vue不再对此动作进行响应了。
              但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。 app.$destroy()
  60. beforeDestroy: function () {
  61. console.group('beforeDestroy 销毁前状态===============》');
  62. console.log("%c%s", "color:red","el : " + this.$el);
  63. console.log(this.$el);
  64. console.log("%c%s", "color:red","data : " + this.$data);
  65. console.log("%c%s", "color:red","message: " + this.message);
  66. },
  67. destroyed: function () {
  68. console.group('destroyed 销毁完成状态===============》');
  69. console.log("%c%s", "color:red","el : " + this.$el);
  70. console.log(this.$el);
  71. console.log("%c%s", "color:red","data : " + this.$data);
  72. console.log("%c%s", "color:red","message: " + this.message)
  73. }
  74. })
  75. </script>
  76. </body>
  77. </html>

使用:

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

原文指路:https://blog.csdn.net/sexy_squirrel/article/details/60764504

vue生命周期 钩子函数的更多相关文章

  1. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  2. 关于 vue 生命周期 钩子函数 事件

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...

  3. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  4. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  5. VueRouter和Vue生命周期(钩子函数)

    一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

  6. vue生命周期钩子函数详解

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...

  7. Vue生命周期钩子函数加载顺序的理解

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  8. vue生命周期钩子函数

    <template> <div> <h2>this is from C.vue</h2> </div> </template> ...

  9. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

随机推荐

  1. Linux电源管理(五)thermal【转】

    本文转载自:https://blog.csdn.net/zhouhuacai/article/details/78172267 版权声明:本文为博主原创文章,未经博主允许不得转载.    https: ...

  2. 关于linux下自定义的 alias文件和自定义函数库的通用写法(只适合自己的)

    使用alias和自定义的function的必要性和重要性就不说了 , 自己的通用做法是: 可以创建: ~/bin/my.alias 文件 作为自定义的 alias专门文件 创建: ~/libsh/my ...

  3. 编译caffe的Python借口,提示:ImportError: dynamic module does not define module export function (PyInit__caffe)

    >>> import caffeTraceback (most recent call last): File "<stdin>", line 1, ...

  4. [HDU 1976] Software Version

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1976 #include<iostream> #include<cstdio> ...

  5. elastic-job的原理简介和使用

    转载:http://blog.csdn.net/fanfan_v5/article/details/61310045 elastic-job是当当开源的一款非常好用的作业框架,在这之前,我们开发定时任 ...

  6. 实现一个简单的flux

    前言 众所周知,React跟Flux是一对好基友. 其中,市场流行的Flux有Redux,Mobx,Reflux. 其中,用法最简单的是Reflux. 其数据流思路如下: +---------+ +- ...

  7. Oracle Initialzation error instantclient_11_2 32位客户端问题

    本地安装完oracle 用PLSql 连接是一堆的问题,折腾一上午终于解决了 下载一个 instantclient_11_2 32位的oracle客户端.放在oracle安装目录product下,在把 ...

  8. 总结react native 事件机制

    React 事件机制 一个组件的所有事件会使用统一的事件监听器,绑定到组件的最外层,那么如何使用? bind方法,绑定并且可以传递参数 <TouchableOpacity onPress={th ...

  9. Redux基础使用

    Redux基础使用: 简介:这里是从需求来响应的执行操作redux,所以理解起来更加的容易铭记在心的三点:action/reducer/store 除此之外就是react/react native的基 ...

  10. rm

    rm [选项]... 目录... 删除指定的<文件>(即解除链接). -d      --directory    删除可能仍有数据的目录 (只限超级用户)-f      --force  ...