beforeCreate是Vue.js中一個非常重要的生命周期鉤子函數,在Vue實例被創建之前會調用該函數。可以將在beforeCreate中執行的操作視為該Vue實例的初始化。同時,beforeCreate是一個無法訪問組件實例和其data、computed、methods等組件內部屬性的時期。
beforeCreate () { console.log('beforeCreate') }
在beforeCreate之前,Vue對象沒有實例化,數據也沒有初始化。之所以beforeCreate觸發在實例化之前,是因為它是要在組件配置之后和數據觀測之前被調用的。也就是說,在beforeCreate期間,Vue對象還處于未實例化的狀態。
beforeCreate的作用主要有兩個:
1. 創建Vue實例之前的操作:在該生命周期下,組件實例已經初始化了,但它的$el還沒有生成,因此在該生命周期內不能獲取到任何的DOM元素,也不能訪問到組件生命周期內的data、computed和methods等組件內部屬性。因此,beforeCreate通常適用于插件注入,全局變量初始化和其它前期待處理的工作。
beforeCreate () { console.log('beforeCreate ->', this.$el) // undefined }
2. 偵聽組件屬性的變化是無效的。所以,在beforeCreate時,無法通過watch或computed來監聽、計算屬性值以及偵聽DOM和數據變化等。
beforeCreate () { this.$watch('msg', () =>{ console.log('msg changed!') // 無輸出 }) }
在beforeCreate生命周期中,組件的屬性只有props和methods可以訪問。因此,如果要在beforeCreate中獲取組件的props,需要通過組件選項參數propsData進行傳遞。
Vue.component('my-component', { props: ['msg'], beforeCreate () { console.log(this.msg) // 1 }, template: '{{msg}}' }) new Vue({ el: '#app', propsData: { msg: 1 } })
總之,在beforeCreate鉤子函數中,我們可以去做一些插件注入、全局變量、全局鉤子、路由守衛等一些圖片的操作。如果要完成一系列的初始化操作,常見的一種做法是通過$nextTick()方法來完成初始化。
beforeCreate () { this.$nextTick(() =>{ // do something }) }