問題場景：
自己用 Vue 做了一個小組件 role-card 抚恒，需要父組件從外面?zhèn)鬟f對象card-pojo參數(shù)進入络拌，然后可以自動完成頁面的渲染俭驮。
<role-card :card-pojo="cardPojo" />
父組件中的參數(shù)獲取的方式是：使用axios在 Vue的created鉤子處 發(fā)送初始化請求到服務(wù)器獲取，下面的getRoleInfo() 就是封裝了請求信息的請求方法。
data() {
return {
cardPojo: "",
};
},
created() {
/* 此處初始化角色數(shù)據(jù) */
getRoleInfo(this.myRoleId).then((res) => {
if (res) {
this.cardPojo = res.data;
}
});
},
在role-card組件內(nèi)部的props中萍恕，我對輸入的card-pojo設(shè)置了一個檢查维哈，要求必須傳入一個對象cardPojo跪削。
props: {
cardPojo: {
type: Object, //類型判斷
required: true, //是否必須
},
},
問題描述
再打開頁面進行展示的時候，發(fā)現(xiàn)頁面可以正常運轉(zhuǎn)揩局，但是打開控制臺就會發(fā)現(xiàn)它出錯了毫玖。
但是很奇怪，參數(shù)確實傳遞過去了驰怎，而且頁面展示也沒有問題阐滩。
起初我對這個 warn 選擇了視而不見，然而當我大量調(diào)用 role-card這個組件的時候县忌，這個錯誤就越來越離譜了〉嗬疲現(xiàn)在继效，直接好家伙，這錯誤報的装获，控制臺滾動條都能夠被拖動了瑞信。
原因分析：
作為一個強迫癥絕對不能忍受，仔細看看他的警告信息饱溢⌒。基本上都是說我傳過去的參數(shù)cardPojo是 undefined或者是空字符串“”，這就奇怪了我的cardPojo怎么就未定義了绩郎。
對于解釋的理由，這里我能想到的就只有Vue的生命周期了翁逞，但是我是在created的時候就發(fā)送了請求肋杖，難道太晚了? 所以之后我又把它改成在beforeCreate()的鉤子發(fā)送信息，但是仍然是出現(xiàn)了這些問題挖函。
最終認為問題在于axios状植，使用的axios發(fā)送出去的初始化請求是異步請求，他沒有辦法保證什么時候獲取到數(shù)據(jù)怨喘、哪怕在加載html頁面之前就發(fā)送了數(shù)據(jù)津畸，也不一定在加載的時候就已經(jīng)能夠獲取到了，所以在獲取到數(shù)據(jù)前一定會報一下數(shù)據(jù)異常的錯誤必怜。但是在真正接收到數(shù)據(jù)后仍然可以通過Vue的綁定去重新加載頁面肉拓。
解決方案：
了解到了問題是axios的異步請求后，但是對于接收數(shù)據(jù)前的報錯依然沒有辦法解決梳庆，因為我沒有辦法去阻斷Vue的生命周期去等待axios請求暖途，而且這也不現(xiàn)實。
最終找到的解決方案就是在要使用到初始化數(shù)據(jù)的地方膏执，加上v-if選擇判斷驻售。如果數(shù)據(jù)已經(jīng)獲取到了進行加載，反之就先暫時不加在這個組件更米。
即在我之前的代碼基礎(chǔ)上欺栗，做出個v-if判斷數(shù)據(jù)cardPojo的存在即可。
<role-card v-if="cardPojo" :card-pojo="cardPojo" />
