一、vue1.x与vue2.x生命周期的变化区别及含义表(图表摘自网络)

  

 

二、vue2.x生命周期图和各阶段具体含义

  

  

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

示例:

  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. },
  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. },
  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. },
  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. },
  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. },
  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. },
  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

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

  • created

   实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

  • beforeMount

   在挂载开始之前被调用:相关的 render 函数首次被调用。

  • mounted

     el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

  • beforeUpdate

   数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

  • updated

   由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

   当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

   该钩子在服务器端渲染期间不被调用。

  • beforeDestroy

   实例销毁之前调用。在这一步,实例仍然完全可用。

  • destroyed

   Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

注:结合之前的MVVM_ada  https://github.com/136shine/MVVM_ada ,理解了vue 的MVVM原理,能更好地理解生命周期

 

vue2.0 之 生命周期的更多相关文章

  1. Vue2.0 探索之路——生命周期和钩子函数的一些理解

    前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

  2. vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  3. Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿

    在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...

  4. Vue2.0关于生命周期和钩子函数

    Vue生命周期简介:   Vue1.0+和Vue2.0在生命周期钩子上的区别还是很大的,如下:   代码验证: <!DOCTYPE html> <html> <head& ...

  5. vue2.0组件生命周期探讨

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. vue2.0的生命周期

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

  7. Vue2.0 探索之路——生命周期和钩子函数

    beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...

  8. 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  9. 你还不知道Vue的生命周期吗?带你从Vue源码了解Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

随机推荐

  1. POST上传多张图片配合Django接受多张图片

    POST上传多张图片配合Django接受多张图片 本地:POST发送文件,使用的是files参数,将本地的图片以二进制的方式发送给服务器. 在这里 files=[("img",op ...

  2. @清晰掉 Sizeof与字符串

    Sizeof与字符串 1.以字符串形式出现的,编译器都会为该字符串自动添加一个0作为结束符 如在代码中写  "abc",那么编译器帮你存储的是"abc/0" 2 ...

  3. JPagination分页插件的使用(ASP.NET中使用)

    前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.asp ...

  4. node服务通过Jenkins上线流程

    构建流程 构建服务器: 拉取指定分支代码 构建服务器: 安装依赖 构建服务器: 执行构建 构建服务器: 如果上线流程,则在 git 上创建 tag,供回滚使用 构建服务器:打包 node 服务代码,和 ...

  5. 转]@SuppressWarnings 详解

    转自:http://gladto.iteye.com/blog/728634 背景知识:        从JDK5开始提供名为Annotation(注释)的功能,它被定义为JSR-175规范.注释是以 ...

  6. REST API (四)之Generic views

    通用的视图 Django’s generic views... were developed as a shortcut for common usage patterns... 它们采取一些常见的习 ...

  7. 远程桌面 虚拟打印 到本地打印机(虚拟化 终端 远程接入 RemoteApp)

    使用远程桌面或remoteapp进行打印时,若需使用本地的打印机,需要通过重定向方式,但本地打印机如果五花八门比较杂,那给服务器安装打印机驱动很麻烦. 其实可以借助虚拟打印机简化操作,省去给服务器安装 ...

  8. 【Linux 源码】Linux源码比较重要的目录

    (1)arch arch是architecture的缩写.内核所支持的每一种CPU体系,该目录下都有对应的子目录. 每个CPU的子目录,又进一步分解为boot.mm.kernel等子目录,分别包含控制 ...

  9. 如何查看SQL Server某个存储过程的执行历史【转】

    db_name(d.database_id) as DBName, s.name as 存储名称, s.type_desc as 存储类型, d.cached_time as SP添加到缓存的时间, ...

  10. 【SSL2325】最小转弯问题

    题面: \[\Large\text{最小转弯问题}\] \[Time~Limit:1000MS~~Memory~Limit:65536K\] Description 给出一张地图,这张地图被分为 n× ...