vuejs生命周期理解

<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>