天天看點

什麼是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

vue