vue中的ajax請(qǐng)求一般放在“created”周期中,好處:1、能更快獲取到服務(wù)端數(shù)據(jù),減少頁(yè)面loading時(shí)間;2、有助于一致性,因?yàn)閟sr不支持beforeMount、mounted鉤子函數(shù)。
本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。
Vue生命周期
-
beforeCreate(創(chuàng)建前): 在數(shù)據(jù)觀測(cè)和初始化事件還未開(kāi)始,data、watcher、methods都還不存在,但是$route已存在,可以根據(jù)路由信息進(jìn)行重定向等操作。
-
created(創(chuàng)建后):在實(shí)例創(chuàng)建之后被調(diào)用,該階段可以訪問(wèn)data,使用watcher、events、methods,也就是說(shuō) 數(shù)據(jù)觀測(cè)(data observer) 和event/watcher 事件配置 已完成。但是此時(shí)dom還沒(méi)有被掛載。該階段允許執(zhí)行http請(qǐng)求操作。
-
beforeMount (掛載前):將HTML解析生成AST節(jié)點(diǎn),再根據(jù)AST節(jié)點(diǎn)動(dòng)態(tài)生成渲染函數(shù)。相關(guān)render函數(shù)首次被調(diào)用(劃重點(diǎn))。
-
mounted (掛載后):在掛載完成之后被調(diào)用,執(zhí)行render函數(shù)生成虛擬dom,創(chuàng)建真實(shí)dom替換虛擬dom,并掛載到實(shí)例。可以操作dom,比如事件監(jiān)聽(tīng)
-
beforeUpdate:vm.data更新之后,虛擬dom重新渲染之前被調(diào)用。在這個(gè)鉤子可以修改vm.data更新之后,虛擬dom重新渲染之前被調(diào)用。在這個(gè)鉤子可以修改vm.data更新之后,虛擬dom重新渲染之前被調(diào)用。在這個(gè)鉤子可以修改vm.data,并不會(huì)觸發(fā)附加的沖渲染過(guò)程。
-
updated:虛擬dom重新渲染后調(diào)用,若再次修改$vm.data,會(huì)再次觸發(fā)beforeUpdate、updated,進(jìn)入死循環(huán)。
-
beforeDestroy:實(shí)例被銷(xiāo)毀前調(diào)用,也就是說(shuō)在這個(gè)階段還是可以調(diào)用實(shí)例的。
-
destroyed:實(shí)例被銷(xiāo)毀后調(diào)用,所有的事件監(jiān)聽(tīng)器已被移除,子實(shí)例被銷(xiāo)毀
ajax放在vue的哪個(gè) 生命周期 中?
一般在,created,mounted 中都可以發(fā)送數(shù)據(jù)請(qǐng)求,但是,大部分時(shí)候,會(huì)在created發(fā)送請(qǐng)求。
Created的使用場(chǎng)景:如果頁(yè)面首次渲染的就來(lái)自后端數(shù)據(jù)。因?yàn)椋藭r(shí)data已經(jīng)掛載到vue實(shí)例了。
在 created(如果希望首次選的數(shù)據(jù)來(lái)自于后端,就在此處發(fā)請(qǐng)求)(只發(fā)了異步請(qǐng)求,渲染是在后端響應(yīng)之后才進(jìn)行的)、beforeMount、mounted(在mounted中發(fā)請(qǐng)求會(huì)進(jìn)行二次渲染) 這三個(gè)鉤子函數(shù)中進(jìn)行調(diào)用。
因?yàn)樵谶@三個(gè)鉤子函數(shù)中,data 已經(jīng)創(chuàng)建,可以將服務(wù)端端返回的數(shù)據(jù)進(jìn)行賦值。但是最常用的是在 created 鉤子函數(shù)中調(diào)用異步請(qǐng)求,因?yàn)樵?created 鉤子函數(shù)中調(diào)用異步請(qǐng)求
好處:
第一點(diǎn):能更快獲取到服務(wù)端數(shù)據(jù),減少頁(yè)面 loading 時(shí)間;
第二點(diǎn):放在 created 中有助于一致性,因?yàn)閟sr 不支持 beforeMount 、mounted 鉤子函數(shù)。
【