beforeCreate是Vue.js中一個非常重要的生命周期鉤子函數(shù)，在Vue實例被創(chuàng)建之前會調(diào)用該函數(shù)?？梢詫⒃赽eforeCreate中執(zhí)行的操作視為該Vue實例的初始化。同時，beforeCreate是一個無法訪問組件實例和其data、computed、methods等組件內(nèi)部屬性的時期。

beforeCreate () {   
console.log('beforeCreate')
}

在beforeCreate之前，Vue對象沒有實例化，數(shù)據(jù)也沒有初始化。之所以beforeCreate觸發(fā)在實例化之前，是因為它是要在組件配置之后和數(shù)據(jù)觀測之前被調(diào)用的。也就是說，在beforeCreate期間，Vue對象還處于未實例化的狀態(tài)。

beforeCreate的作用主要有兩個：

1. 創(chuàng)建Vue實例之前的操作：在該生命周期下，組件實例已經(jīng)初始化了，但它的$el還沒有生成，因此在該生命周期內(nèi)不能獲取到任何的DOM元素，也不能訪問到組件生命周期內(nèi)的data、computed和methods等組件內(nèi)部屬性。因此，beforeCreate通常適用于插件注入，全局變量初始化和其它前期待處理的工作。

beforeCreate () { 
console.log('beforeCreate ->', this.$el) // undefined
}

2. 偵聽組件屬性的變化是無效的。所以，在beforeCreate時，無法通過watch或computed來監(jiān)聽、計算屬性值以及偵聽DOM和數(shù)據(jù)變化等。

beforeCreate () { 
this.$watch('msg', () =>{
console.log('msg changed!') // 無輸出
}) 
}

在beforeCreate生命周期中，組件的屬性只有props和methods可以訪問。因此，如果要在beforeCreate中獲取組件的props，需要通過組件選項參數(shù)propsData進行傳遞。

Vue.component('my-component', {
props: ['msg'],
beforeCreate () { 
console.log(this.msg) // 1
},
template: '
{{msg}}
'
})
new Vue({
el: '#app',
propsData: {
msg: 1
}
})

總之，在beforeCreate鉤子函數(shù)中，我們可以去做一些插件注入、全局變量、全局鉤子、路由守衛(wèi)等一些圖片的操作。如果要完成一系列的初始化操作，常見的一種做法是通過$nextTick()方法來完成初始化。

beforeCreate () { 
this.$nextTick(() =>{
// do something
}) 
}