1.创建前:beforeCreate
<div id="app">{{name}}</div>
<script>
let app = new Vue({
el:'#app',
data:{
name:31231312
},
beforeCreate(){
console.log('挂在前');
console.log(this.$data);
console.log(this.$el);
}
})
</script>
// beforeCreate()是在Vue挂载前,执行的函数,此时:data和el属性都还没有.故是undefined
2.创建成功:created
<div id="app">{{name}}</div>
<script>
let app = new Vue({
el:'#app',
data:{
name:31231312
},
created(){
console.log('创建成功');
console.log(this.$data);
console.log(this.$el);
}
})
</script>
// 此时,name数据生成,但dom并未渲染.故会有一个undefined
3.即将挂载:beforeMount
// 替换created
beforeMount(){
console.log('即将挂载');
console.log(this.$el);
}
// 此时dom渲染完毕,但name属性还未被渲染成3123312
4.挂载成功:mounted
// 替换beforeMount
mounted(){
console.log("挂载成功");
console.log(this.$el);
}
//