vuejs生命周期理解

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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