<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(){//完成對data中數據的初始化
    console.log(this.$data);//object
    alert(this.number);//1
  },
  beforeMount(){
    console.log(this.$data);
    console.log(this.$el);//視圖組件模板已被加載 {{number}}被1替代
  },
  mounted(){
    alert(this.number);
    //顯示紅色背景
    //完成對視圖/組件掛載
  },
  beforeUpdate(){//數據更新前
    alert(‘更新前number:‘+this.number);
  },
  updated(){
    alert(‘更新後number:‘+this.number);
  },
  beforeDestory(){
    alert(‘銷毀前‘);
  },
  destroyed(){//組件銷毀後執行（例如情況：路由跳轉了會執行，關閉頁面不會執行
    alert(‘銷毀了‘);
  }

}
</script>
<style>

    
</style>
 

vuejs生命周期理解