Vue實例生命周期鉤子函數(shù)與React非常相似,最明顯的區(qū)別在于蹋砚,它多了一個實例創(chuàng)建階段摄杂。
Vue實例和Vue組件有著同樣的生命周期函數(shù)。
參考官網(wǎng)圖:
vue lifecycle.png
下面介紹Vue生命周期的每個階段都做了些什么?
- beforeCreate: 創(chuàng)建了Vue組件實例氮昧,但是組件屬性還未初始化。比如咪辱,data, elt等為undefined椎组。
- created: 初始化數(shù)據(jù)對象和事件,例如:可以訪問屬性this.$data专筷。這時最適合做ajax請求蒸苇,初始化需要渲染的數(shù)據(jù)。
- beforeMount: 進(jìn)行模板編譯味咳,但是,模板內(nèi)容還未插入頁面DOM中责嚷。
- mouted: 將生成好的的模板掛載在DOM樹上掂铐,并且,組件屬性this.$el被賦值聂受。
- beforeUpdate: 組件更新之前
- updated: 組件更新之后
- beforeDestory: 組件銷毀之前烤镐,這時炮叶,已經(jīng)調(diào)用this.$destory()。
- destoryed: 組件銷毀完畢镜悉。這時,組件上的watcher旧困,子組件和事件監(jiān)聽都會被銷毀稼锅。
下一節(jié):Vue入門系列(四)Vue模板和指令