Vue: Life Cycle

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{title}}</h1>
    <button @click="title = 'changed'">Update title</button>
    <button @click="destory">Destory</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        title: 'Vuejs instance'
      },
      methods: {
        destory: function() {
          this.$destory();
        }
      },
      //Initialization of calls, the calling sequence is: beforeCreate-> created-> beforeMount -> Mounted 
      beforeCreate: function () { 
        the console.log ( 'Created before Called' ); 
      }, 
      Created: function () { 
        the console.log ( 'Created Called ' ); 
      }, 
      beforeMount: function () { 
        the console.log ( ' beforeMount Called ' ); 
      }, 
      Mounted: function () { 
        the console.log ( ' Mounted Called ' ); 
      }, 
      // beforeUpdate / updated Data update when invoked, if the data is not updated, not called
      beforeUpdate: function () { 
        the console.log ( 'beforUpdate Called' ); 
      }, 
      Updated: function () { 
        the console.log ( 'Updated Called' ); 
      }, 
      // after destory called, all the data is no longer controlled vuejs , meaning that after destory All methods are no longer useful, remove all logic js 
      beforeDestory: function () { 
        the console.log ( 'befor destory Called' ); 
      }, 
      destoryed: function () { 
        the console.log ( ' Called destoryed ' ); 
      } 
    });
   </ Script> 
</ body>

</html>
Guess you like
