1、beforeCreate和created函數(shù)

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

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

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

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

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

2、beforeMount和mounted函數(shù)

(3)beforeMount()：在Vue完成虛擬DOM的生成之后，在將虛擬DOM轉換為真實DOM之前執(zhí)行。此時，頁面呈現(xiàn)的是未經Vue編譯的DOM結構，所有對DOM的操作，最終都不奏效。

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

3、beforeUpdate和updated函數(shù)

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

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

4、beforeDestroy和destroyed函數(shù)

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

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

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!

最新評論