Vue生命周期中的八個鉤子函數(shù)相機(jī)
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ù)中的內(nèi)容。此時,無法通過Vm訪問到data中的數(shù)據(jù)、methods中的方法
(2)created():在初始化數(shù)據(jù)監(jiān)測、數(shù)據(jù)代理之后執(zhí)行beforeCreate函數(shù)中的內(nèi)容。此時可以通過vm訪問到data中的數(shù)據(jù)、methods中配置的方法
在數(shù)據(jù)掛載之前還有一個步驟,那就是Vue解析模板的過程(生成虛擬DOM),頁面還不能顯示解析好的內(nèi)容。
2、beforeMount和mounted函數(shù)
(3)beforeMount():在Vue完成虛擬DOM的生成之后,在將虛擬DOM轉(zhuǎn)換為真實DOM之前執(zhí)行。此時,頁面呈現(xiàn)的是未經(jīng)Vue編譯的DOM結(jié)構(gòu),所有對DOM的操作,最終都不奏效。
(4)mounted():在將虛擬DOM轉(zhuǎn)換為真實DOM之后執(zhí)行。此時,頁面中呈現(xiàn)的是經(jīng)過Vue編譯的DOM,對DOM的操作均有效(盡可能避免)。至此初始化過程結(jié)束,一般在此進(jìn)行:開啟定時器、發(fā)送網(wǎng)絡(luò)請求、訂閱消息、綁定自定義事件等初始化操作
3、beforeUpdate和updated函數(shù)
(5)beforeUpdate():在數(shù)據(jù)發(fā)生變化時,生成新的虛擬DOM,隨后與舊的虛擬DOM進(jìn)行比較,最終完成頁面更新(Model-》View)的過程之前執(zhí)行。此時,數(shù)據(jù)是新的,但頁面是舊的,即,頁面尚未和數(shù)據(jù)保持同步
(6)updated():在數(shù)據(jù)發(fā)生變化時,生成新的虛擬DOM,隨后與舊的虛擬DOM進(jìn)行比較,最終完成頁面更新(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í)行銷毀過程,一般在此階段:關(guān)閉定時器、取消訂閱消息、解綁自定義事件等收尾操作。此時所有東西都可訪問到,但是執(zhí)行操作,頁面上的內(nèi)容不會發(fā)生改變
(8)destroyed():在移除數(shù)據(jù)監(jiān)視、子級元素、事件監(jiān)聽之后執(zhí)行。解除與頁面上data、methods、指令等的綁定。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)的問題,本文通過實例結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05
詳解vue服務(wù)端渲染瀏覽器端緩存(keep-alive)
在使用服務(wù)器端渲染時,除了服務(wù)端的接口緩存、頁面緩存、組建緩存等,瀏覽器端也避免不了要使用緩存,減少頁面的重繪。這篇文章主要介紹了詳解vue服務(wù)端渲染瀏覽器端緩存(keep-alive),感興趣的小伙伴們可以參考一下2018-10-10
詳解使用Vue Router導(dǎo)航鉤子與Vuex來實現(xiàn)后退狀態(tài)保存
本篇文章主要介紹了詳解使用Vue Router導(dǎo)航鉤子與Vuex來實現(xiàn)后退狀態(tài)保存,具有一定的參考價值,有興趣的可以了解一下2017-09-09

