首頁  >  文章  >  web前端  >  vue的生命週期有哪些階段

vue的生命週期有哪些階段

WBOY
WBOY原創
2022-03-17 11:43:393917瀏覽

vue的宣告週期共有八個階段,分別是:1、實例建立前;2、實例建立後;3、實例載入前;4、實例載入後;5、實例更新前; 6、實例更新後;7、實例銷毀前;8、實例銷毀後。

vue的生命週期有哪些階段

本文操作環境:windows10系統、Vue2.9.6版,DELL G3電腦。

vue的生命週期有哪些階段

每個Vue實例在創建時都會經過一系列的初始化過程,vue的生命週期鉤子,就是說在達到某一階段或條件時去觸發的函數,目的就是為了完成一些動作或事件

  • create階段:vue實例被建立

beforeCreate: 建立前,此時data和methods中的資料都還沒有初始化

created: 建立完畢,data中有值,未掛載

  • mount階段: vue實例被掛載到真實DOM節點

beforeMount:可以發起服務端請求,去資料

mounted: 此時可以操作DOM

  • update階段:當vue實例裡面的data資料變更時,觸發元件的重新渲染

beforeUpdate :更新前

updated:更新後

  • destroy階段:vue實例被銷毀

#beforeDestroy:實例被銷毀前,此時可以手動銷毀一些方法

destroyed:銷毀後

#元件生命週期

生命週期(父子元件) 父元件beforeCreate --> 父元件created --> 父元件beforeMount --> 子元件beforeCreate --> 子元件created --> mounted -->父元件beforeUpdate -->子元件beforeDestroy--> 子元件destroyed --> 父元件updatedated

載入渲染->子beforeCreate->子created->子beforeMount->子mounted->父mounted

掛載階段 父created->子created->子mounted->父父mounted

父元件更​​新階段 父beforeUpdate->父updated

子元件更新階段 父beforeUpdate->子beforeUpdate->子updated->父親#銷毀階段 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

【相關推薦:《

vue.js教學

》】

以上是vue的生命週期有哪些階段的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn