vue 有8個聲明周期,如果在vue實例創(chuàng)建之前需要獲取頁面初始數(shù)據(jù)。
此時要進行ajax請求念脯,應(yīng)該是同步還是異步好?
beforeCreate:function(){
// getInitData ajax請求獲取數(shù)據(jù)
}
我想著應(yīng)該異步阅懦,那么如果異步請求和二,頁面會在還沒有返回數(shù)據(jù)的時候進行渲染。
此時可以使用loading動畫遮蓋耳胎。
但是返回的數(shù)據(jù)該如何寫入到已有的數(shù)據(jù)中惯吕?
比如:
替換了整個對象,會不會對數(shù)據(jù)渲染造成影響怕午?
vm 還沒有實例化废登,能不能在vm實例化之前訪問vm
function getInitData(){
// ... 這里獲取上數(shù)據(jù)
var data = getedData;
vm.$data.initData = data;
// 1. 這樣替換了整個對象,會不會對數(shù)據(jù)渲染造成影響郁惜?
// 2. vm 還沒有實例化堡距,能不能在此處訪問甲锡?
}
var vm = new Vue({
el:'#app',
data:{
initData:{
name:'name',
age:'age',
bulabual:'bulaubla',
}
},
beforeCreate:function(){
getInitData()
}
})
在瀏覽器console中替換對象測試,好像沒有影響
經(jīng)瀏覽器測試,在vm未實例化之前訪問無法訪問其vm.$data
那么上面的代碼無法正確執(zhí)行,鑒于此只好將初始化的ajax請求放入到beforeCreate中羽戒。
如果使用異步請求缤沦,還是需要loading動畫遮蓋無數(shù)據(jù)的界面。
那么如果使用同步請求易稠,未請求完成時頁面無法進行渲染缸废,依然需要laoding動畫遮蓋。
綜上
需要頁面初始化獲取數(shù)據(jù)的必須需要loading動畫驶社。
異步初始化情況下可以同時渲染vue實例企量,在獲取數(shù)據(jù)后再修改數(shù)據(jù)。
而同步初始化情況下亡电,是在數(shù)據(jù)獲取之后再渲染vue實例届巩。
兩者各有取舍。