Vue 生命週期有哪些?作用是什麼?

什麼是vue的生命週期

Vue 實例從開始創建、初始化數據、編譯模板、掛載Dom和渲染、更新和渲染、卸載等一系列過程,這是 Vue 的生命週期

vue的生命週期的八個鉤子函數

  • beforeCreat() 創建前 在new一個vue實例後,只有一些默認的生命週期鉤子和默認事件,其他的東西都還沒創建。在此生命週期執行的時候,data和methods中的數據都還沒有初始化。不能在這個階段使用data中的數據和methods中的方法
  • created()被創建 data 和 methods都已經被初始化好了,可以調用了
  • beforeMount() 掛載前 在內存中已經編譯好了模板了,但是還沒有掛載到頁面中,此時,頁面還是舊的
  • mounted()已掛載 Vue實例已經初始化完成了。此時組件脫離了創建階段,進入到了運行階段。 如果我們想要通過插件操作頁面上的DOM節點,最早可以在和這個階段中進行
  • beforeupdate()更新前 頁面中的顯示的數據還是舊的,data中的數據是更新後的, 頁面還沒有和最新的數據保持同步
  • updated()更新 頁面顯示的數據和data中的數據已經保持同步了,都是最新的
  • beforeDestroy() 銷燬前 Vue實例從運行階段進入到了銷燬階段,這個時候上所有的 data 和 methods , 指令, 過濾器 ……都是處於可用狀態。還沒有真正被銷燬
  • destroyed()被銷燬 這個時候上所有的 data 和 methods , 指令, 過濾器 ……都是處於不可用狀態。組件已經被銷燬了。

vue生命週期的作用是什麼

它的生命週期中有多個事件鉤子,讓我們在控制整個Vue實例的過程時更容易形成好的邏輯

第一次頁面加載會觸發哪幾個鉤子

第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

DOM渲染在哪個週期中已經完成

mounted

簡述每個週期具體適合哪些場景

beforecreate : 可以在這加個loading事件,在加載實例時觸發
created : 初始化完成時的事件寫在這裏,如在這結束loading事件,異步請求也適宜在這裏調用
mounted : 掛載元素,獲取到DOM節點
updated : 如果對數據統一處理,在這裏寫上相應函數
beforeDestroy : 可以做一個確認停止事件的確認框
nextTick : 更新數據後立即操作dom

created和mounted的區別

created:在模板渲染成html前調用,即通常初始化某些屬性值,然後再渲染成視圖。
mounted:在模板渲染成html後調用,通常是初始化頁面完成後,再對html的dom節點進行一些需要的操作。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章