Vue的生命週期

<div id="app">
    {{count}}
    <p><button @click="add">ADD</button></p>
</div>

<p><button onclick="app.$destroy()">銷燬</button></p>

var app = new Vue({
      el: '#app',
      data: {
          count: 1
      },
      methods: {
          add: function(){
              this.count++;
          }
      },
      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 銷燬之後');
      }
  })