淺談vue的生命周期
1.什么是生命周期?有什么作用?
每一個(gè)vue實(shí)例在創(chuàng)建時(shí)都要經(jīng)歷一系列的初始化過程-----例如需要設(shè)置監(jiān)聽,編譯模板,將實(shí)例掛載到dom并在數(shù)據(jù)發(fā)生變化時(shí)更新dom等等.同時(shí)這個(gè)時(shí)候也會(huì)運(yùn)行一些生命周期鉤子的函數(shù),這些函數(shù),給用戶在不同階段添加代碼的機(jī)會(huì).例如:如果需要某些插件操作dom節(jié)點(diǎn),如果想在頁面渲染之后彈出廣告,那我們們最早可以再mounted中進(jìn)行.
2.第一次加載頁面會(huì)觸發(fā)哪幾個(gè)鉤子?
beforeCreate created beforeMount mounted
3.簡述每個(gè)周期應(yīng)用于哪個(gè)場景?
beforeCreate
:在new一個(gè)實(shí)例后,只有一些默認(rèn)的生命鉤子和默認(rèn)事件,其他的東西還沒有創(chuàng)建,在beforeCreate生命周期執(zhí)行時(shí),data和methods中的數(shù)據(jù)還沒有初始化,不能在這個(gè)階段使用data中的數(shù)據(jù)和methods的方法.
created
:data和methods中的數(shù)據(jù)都已經(jīng)初始化好了,如果調(diào)用methods中的方法和操作data中的數(shù)據(jù)最早在這個(gè)階段進(jìn)行.
beforeMount
:執(zhí)行這個(gè)鉤子事,內(nèi)存中已經(jīng)編譯好了模板,但是還沒有掛載到頁面中,此時(shí)的頁面還是舊的
mounted:
執(zhí)行到這個(gè)鉤子時(shí),說明vue實(shí)例已經(jīng)初始化完成,此時(shí)組件脫離了創(chuàng)建階段進(jìn)入到了運(yùn)行階段,如果需要某些插件操作dom節(jié)點(diǎn),那我們們最早可以再mounted中進(jìn)行
beforeUpdate
:當(dāng)執(zhí)行這個(gè)鉤子時(shí),頁面還是舊的,data中的數(shù)據(jù)是更新后的,但是頁面的數(shù)據(jù)和data中的數(shù)據(jù)還沒有同步.
updated:
頁面和data中的數(shù)據(jù)保持同步,頁面是新的了.
beforeDestory
:vue實(shí)例開始從運(yùn)行階段進(jìn)入銷毀階段,這時(shí),data和methods,指令,過濾器.......都是可用的,還沒有真正銷毀.
destoryed
:這時(shí),data和methods,指令,過濾器.......都是不可用的,組件已經(jīng)被銷毀了.
4.created和mounted的區(qū)別
created
在模板渲染成html前調(diào)用,即通常初始化某些屬性值,然后在渲染成視圖.
mounted
在模板渲染成html后調(diào)用,通常是頁面初始化之后,再對dom節(jié)點(diǎn)進(jìn)行操作時(shí).
5.vue在哪個(gè)生命周期獲取數(shù)據(jù)?
一般created
/beforeMount
/mounted
都可以
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫,它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。下面這篇文章主要給大家介紹了關(guān)于利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析
這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04Vue項(xiàng)目組件化工程開發(fā)實(shí)踐方案
這篇文章主要介紹了Vue項(xiàng)目組件化工程開發(fā)實(shí)踐方案,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01vue 項(xiàng)目@change多個(gè)參數(shù)傳值多個(gè)事件的操作
這篇文章主要介紹了vue 項(xiàng)目@change多個(gè)參數(shù)傳值多個(gè)事件的操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01Vue mockjs編寫假數(shù)據(jù)并請求獲取實(shí)現(xiàn)流程
這篇文章主要介紹了Vue mockjs編寫假數(shù)據(jù)并請求獲取實(shí)現(xiàn)流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12vue webpack build資源相對路徑的問題及解決方法
這篇文章主要介紹了vue webpack build資源相對路徑的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06