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