Vue之生命週期和生命週期鉤子

2021-10-08 07:01:54 字數 1282 閱讀 9900

生命週期:指的是vm例項建立、執行、銷毀期間的各種事件。

生命週期鉤子:生命週期事件、生命週期函式。

生命週期主要分為三類:

1.建立:這些函式均只在建立階段執行一次

beforecreate:此階段vm例項在內存在建立出來(只有預設的生命週期函式和一些預設的事件),但是data和method屬性沒有初始化好;

created:例項已經在記憶體中建立並且初始化好了data和method屬性,但是還沒有編譯,此生命週期函式可操作data和method屬性,一般在vm建立的時候從伺服器獲取資料並載入初始化資料;

beforemount:此時已經在記憶體中完成了編譯,但是沒有掛載(渲染)到dom中,模板編譯

mounted:vm例項已經編譯好了並且掛載到dom中顯示,模板掛載

var vm = new vue(,

methods:

},//data,methods未初始化

beforecreate(),

//data,methods已經初始化好了,但是模板沒有編譯

created(),

//模板編譯好了,但是沒有掛載到dom中

beforemount(),

//模板掛載到dom中了

mounted()

})

執行結果:

2.執行:每次資料的更新都會觸發此階段的鉤子函式,可多次執行

beforeupdate:資料被更新了,此時data中資料是新的,但是dom中顯示的是舊的,還沒有重新渲染dom節點;

updated:例項渲染更新完畢後呼叫此函式,此時data和dom節點的資料都是最新的。

3.銷毀:在vm例項銷毀時觸發,只執行一次

beforedestory:例項銷毀之前呼叫,這時例項仍然可用;

destoryed:例項銷毀後呼叫,這時例項已經不可用了。

vue 之 生命週期 鉤子

生命週期函式 是由vue框架提供的內建函式,會伴隨著元件的生命週期,自動按次序執行.vue元件的生命週期函式,可以分為三大類 第乙個階段 初始化階段 1 beforecreate vue例項初始化 2 created 初始化完成,傳送ajax 3 beforemount 模版和資料結合掛載頁面沒有渲...

vue生命週期鉤子

el 表示dom元素,data 表示資料 deforecreated el和data並未初始化 created 完成了data資料的初始化,el沒有 beforemount 完成了el和data初始化 mounted 完成掛載 el和data都初始化完成,並且掛載在頁面上了 注意 以下勾子只能在 k...

Vue 生命週期鉤子

從vue例項建立,執行,到銷毀期間,總是伴隨著各種各樣的事件,這些事件,稱為生命週期。建立 beforecreate 例項剛剛在記憶體中被建立出來,但data和methods還沒有進行初始化。created 例項已經在記憶體中建立,data和methods還沒有建立 beforemount 完成模板...