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>