問題出現(xiàn)

之前寫靜態(tài)頁面的時候，直接父向子傳值，是指節(jié)能渲染出父組件給子組件的值，但是加上請求后，就會出現(xiàn)請求過慢。就是在組件創(chuàng)建和渲染完畢時，子組件的值才拿到，子組件并沒有實時更新模版（災(zāi)難始終慢我一步）

產(chǎn)生原因

子組件中的 created 、mounted 只執(zhí)行一次，在富組件初始化時，已經(jīng)給子組件傳了一個空值，導(dǎo)致異步請求數(shù)據(jù)發(fā)生變化時，子組件的值不再變化
在父組件中，獲取數(shù)據(jù)時會有幾秒鐘的時間延遲，而異步請求不會阻塞后續(xù)代碼，所以導(dǎo)致子組件通過props接受數(shù)據(jù)時拿到的是空數(shù)據(jù)，通過打印結(jié)果顯示先執(zhí)行子組件中props中的代碼，導(dǎo)致數(shù)據(jù)無法渲染。

解決辦法

就是沒有發(fā)請求拿到數(shù)據(jù)之前，不讓他創(chuàng)建子組件并傳值，因此給其加 v-if 指令來限制他是否能創(chuàng)建子組件，類似于節(jié)流的思想。
在父組件中的子組件，通過v-if判斷接口請求的數(shù)據(jù)是否不為0或者不為空，因為v-if是通過創(chuàng)建DOM顯示的，此時通過判斷如果子組件有數(shù)據(jù)的話才傳數(shù)據(jù)

data 數(shù)據(jù)里面

list : false || null

請求方法里

async getUserinfo() {
  const { data : res } = await getUserinfo(userid:this.userid)
  this.list = res.data
} 

模版子組件處

<Userinfo :list = 'list' v-if = 'list'/>
<Userinfo :list = 'list' v-if = 'list && list.length > 0'/>