Vuejs Life Cycle Understanding

<template> <div style= "background:red" id= ' app ' >  {{number}}  <input type= ' text ' v-model= ' Number ' > </div>   </template><script> export default{  el: ' #app ',  data () {    return{      number:1    }    },  beforecreate () {    console.log (this.number);//undefined  },  Created () {///completes initialization of data    Console.log (this. $data);//object    alert (this.number);//1  },  Beforemount () {    Console.log (this. $data);    Console.log (this. $el);//The View component template has been loaded {{number}} is replaced by 1  },  mounted () {    alert (this.number);    Show Red background    //Complete View/Component Mount  },  beforeUpdate () {//Data update before    alert (' Update number: ' +this.number);  },  Updated () {    alert (' Updated number: ' +this.number);  },  beforedestory () {    alert (' Pre-destroy ');  } , the  destroyed () {///component is executed after it is destroyed (for example: the route jumps to execute, the close page does not execute    alert (' destroyed ');}  } </script><style>    </style>

　　

Vuejs life Cycle Understanding