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

總結

以上是生活随笔為你收集整理的vue --- vue中的几个钩子属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。