Vue2.0生命周期

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

其实在Vue的官网有一张图已经很好的诠释了生命周期，我在这里就不再多讲了，直接贴图，然后上程序代码。

 

我们直接来看一段代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

< ! DOCTYPE html > < html lang = "en" > < head >      < meta charset = "UTF-8" >      <script type = "text/javascript" src = "../assets/js/vue.js" > </script>      < title >构造器的声明周期 < / title > < / head > < body >      < h1 >构造器的声明周期 < / h1 >      < hr >      < div id = "app" >          { { message } }          < p > < button @ click = "jia" >加分 < / button > < / p >      < / div >          < button onclick = "app.$destroy()" >销毁 < / button >        <script type = "text/javascript" >          var app = new Vue ( {              el : '#app' ,              data : {                  message : 1              } ,              methods : {                  jia : function ( ) {                      this . message ++ ;                  }              } ,              beforeCreate : function ( ) {                  console . log ( '1-beforeCreate 初始化之后' ) ;              } ,              created : function ( ) {                  console . log ( '2-created 创建完成' ) ;              } ,              beforeMount : function ( ) {                  console . log ( '3-beforeMount 挂载之前' ) ;              } ,              mounted : function ( ) {                  console . log ( '4-mounted 被创建' ) ;              } ,              beforeUpdate : function ( ) {                  console . log ( '5-beforeUpdate 数据更新前' ) ;              } ,              updated : function ( ) {                  console . log ( '6-updated 被更新后' ) ;              } ,              activated : function ( ) {                  console . log ( '7-activated' ) ;              } ,              deactivated : function ( ) {                  console . log ( '8-deactivated' ) ;              } ,              beforeDestroy : function ( ) {                  console . log ( '9-beforeDestroy 销毁之前' ) ;              } ,              destroyed : function ( ) {                  console . log ( '10-destroyed 销毁之后' )              }            } )      </script> < / body > < / html >