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);
}
// 

参考
https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654443&idx=1&sn=0da7f6dbd34f4dc5c609137730db154d&chksm=872c4314b05bca02b30e0ea9e9430118e5022a5f18d6e3ee66469e3ad1cbc2f31fdb2c724b0a&scene=21#wechat_redirect