Vue的生命週期是學習vue的基礎，因此熟悉生命週期十分重要。

下面先上一張生命週期的圖，對於初學者來說有圖的情況下會更加好理解。

1

var vm = new Vue({
        el:'#app',
        data: {
            msg:'測試'
        },
        methods: {
            test(){
                console.log('test')
            }
        },
        // 此時資料data和事件方法methods還未繫結到vm物件上
        beforeCreate(){
            console.log(
 
'beforecreate')
            
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforemount')
        },
        mounted(){
            console.log('mounted')
        },

     })

執行結果：

可以看見執行順序和圖中一致。

2接下來我們分析一下各個階段

首先是beforeCreate

在控制檯輸出data和methods中的屬性和方法，

beforeCreate(){
            console.log('beforecreate')
            console.log(this)
            console.log(this.msg)
            console.log(this.test)
        }

執行結果：

結論： vue例項已經建立，可是data和methods還沒有繫結到vue例項物件上。

接下來是created

 created(){
            console.log(
 
'created')
            console.log(this)
            console.log(this.msg)
            console.log(this.test)
        }

執行結果:

結論： vue例項已經建立，同時data和methods已經繫結到vue例項物件上。

接下來是beforeMount