快捷導(dǎo)航

Vue生命周期中的八個(gè)鉤子函數(shù)相機(jī)

更新時(shí)間：2021年12月14日 16:15:44 作者：cleannnnn

這篇文章主要為大家介紹了Vue生命周期中的八個(gè)鉤子函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1、beforeCreate和created函數(shù)

beforeCreate和created以初始化：數(shù)據(jù)監(jiān)測(cè)、數(shù)據(jù)代理為分界線。

在執(zhí)行beforeCreate()之前，將初始化生命周期、時(shí)間，但數(shù)據(jù)代理還沒有開始。

(1)beforeCreate()：在初始化數(shù)據(jù)監(jiān)測(cè)、數(shù)據(jù)代理之前執(zhí)行beforeCreate函數(shù)中的內(nèi)容。此時(shí)，無法通過Vm訪問到data中的數(shù)據(jù)、methods中的方法

(2)created()：在初始化數(shù)據(jù)監(jiān)測(cè)、數(shù)據(jù)代理之后執(zhí)行beforeCreate函數(shù)中的內(nèi)容。此時(shí)可以通過vm訪問到data中的數(shù)據(jù)、methods中配置的方法

在數(shù)據(jù)掛載之前還有一個(gè)步驟，那就是Vue解析模板的過程（生成虛擬DOM），頁(yè)面還不能顯示解析好的內(nèi)容。

2、beforeMount和mounted函數(shù)

(3)beforeMount()：在Vue完成虛擬DOM的生成之后，在將虛擬DOM轉(zhuǎn)換為真實(shí)DOM之前執(zhí)行。此時(shí)，頁(yè)面呈現(xiàn)的是未經(jīng)Vue編譯的DOM結(jié)構(gòu)，所有對(duì)DOM的操作，最終都不奏效。

(4)mounted()：在將虛擬DOM轉(zhuǎn)換為真實(shí)DOM之后執(zhí)行。此時(shí)，頁(yè)面中呈現(xiàn)的是經(jīng)過Vue編譯的DOM，對(duì)DOM的操作均有效（盡可能避免）。至此初始化過程結(jié)束，一般在此進(jìn)行：開啟定時(shí)器、發(fā)送網(wǎng)絡(luò)請(qǐng)求、訂閱消息、綁定自定義事件等初始化操作

3、beforeUpdate和updated函數(shù)

(5)beforeUpdate()：在數(shù)據(jù)發(fā)生變化時(shí)，生成新的虛擬DOM，隨后與舊的虛擬DOM進(jìn)行比較，最終完成頁(yè)面更新（Model-》View）的過程之前執(zhí)行。此時(shí)，數(shù)據(jù)是新的，但頁(yè)面是舊的，即，頁(yè)面尚未和數(shù)據(jù)保持同步

(6)updated()：在數(shù)據(jù)發(fā)生變化時(shí)，生成新的虛擬DOM，隨后與舊的虛擬DOM進(jìn)行比較，最終完成頁(yè)面更新（Model-》View）的過程之后執(zhí)行。此時(shí)，數(shù)據(jù)是新的，頁(yè)面也是新的，即，頁(yè)面和數(shù)據(jù)保持同步

4、beforeDestroy和destroyed函數(shù)

(7)beforeDestroy()：在移除數(shù)據(jù)監(jiān)視、子級(jí)元素、事件監(jiān)聽之前執(zhí)行。此時(shí)，vm中所有的data、methods、指令等都處于可用狀態(tài)，馬上要執(zhí)行銷毀過程，一般在此階段：關(guān)閉定時(shí)器、取消訂閱消息、解綁自定義事件等收尾操作。此時(shí)所有東西都可訪問到，但是執(zhí)行操作，頁(yè)面上的內(nèi)容不會(huì)發(fā)生改變

(8)destroyed()：在移除數(shù)據(jù)監(jiān)視、子級(jí)元素、事件監(jiān)聽之后執(zhí)行。解除與頁(yè)面上data、methods、指令等的綁定。