1. 程式人生 > >淺談對vue生命週期函式的理解

淺談對vue生命週期函式的理解

1.什麼是vue生命週期?有什麼作用?

每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如,需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做 生命週期鉤子 的函式,這給了使用者在不同階段新增自己的程式碼的機會。(ps:生命週期鉤子就是生命週期函式)例如,如果要通過某些外掛操作DOM節點,如想在頁面渲染完後彈出廣告窗, 那我們最早可在mounted 中進行

2.vue生命週期的8個階段?
  • beforeCreate:在new一個vue例項後,只有一些預設的生命週期鉤子和預設事件,其他的東西都還沒建立。在beforeCreate生命週期執行的時候,data和methods中的資料都還沒有初始化。不能在這個階段使用data中的資料和methods中的方法
  • create:data 和 methods都已經被初始化好了,如果要呼叫 methods 中的方法,或者操作 data 中的資料,最早可以在這個階段中操作
  • beforeMount:執行到這個鉤子的時候,在記憶體中已經編譯好了模板了,但是還沒有掛載到頁面中,此時,頁面還是舊的
  • mounted:執行到這個鉤子的時候,就表示Vue例項已經初始化完成了。此時元件脫離了建立階段,進入到了執行階段。 如果我們想要通過外掛操作頁面上的DOM節點,最早可以在和這個階段中進行
  • beforeUpdate: 當執行這個鉤子時,頁面中的顯示的資料還是舊的,data中的資料是更新後的, 頁面還沒有和最新的資料保持同步
  • updated:頁面顯示的資料和data中的資料已經保持同步了,都是最新的
  • beforeDestory:Vue例項從執行階段進入到了銷燬階段,這個時候上所有的 data 和 methods , 指令, 過濾器 ……都是處於可用狀態。還沒有真正被銷燬
  • destroyed: 這個時候上所有的 data 和 methods , 指令, 過濾器 ……都是處於不可用狀態。元件已經被銷燬了。
3.第一次載入頁面會觸發哪些鉤子?

beforeCreate, created, beforeMount, mounted