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