uniapp項目中經(jīng)常需要在頁面加載或者點擊按鈕的時候觸發(fā)一些操作扰付，或發(fā)起請求來改變一些字段的值，有時候會發(fā)現(xiàn)在請求獲取到值賦值給data中字段以后纯续，頁面展示內(nèi)容未能實時刷新随珠，一般情況有兩種可能。1：請求以后未成功賦值給字段猬错；2：賦值給字段以后頁面沒有實時刷新窗看，有思路以后尋找原因就有頭緒了，以下針對兩種情況進(jìn)行分析解決
1：請求以后未成功賦值給字段
微信開發(fā)者工具中的AppData和console控制臺是常用的兩個工具倦炒，可以實時在AppData中查看頁面中（注意應(yīng)該無法查看到組件中的AppData显沈，只能獲取到頁面的AppData）的data里面的字段信息的值是什么狀態(tài)及變化，如果是查看組件中的賦值狀態(tài)后面會提到逢唤，更簡單的方法就是直接在賦值的前后console.log該字段看console出來的內(nèi)容即可构罗，這種情況一般都是ES5中this指向的問題，可以在方法開始的地方定義一個變量保存當(dāng)前this指向智玻，this的指向在函數(shù)定義的時候是確定不了的遂唧，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰，實際上this的最終指向的是那個調(diào)用它的對象吊奢。this永遠(yuǎn)指向的是最后調(diào)用它的對象盖彭，也就是看它執(zhí)行的時候是誰調(diào)用的，所以不同的場景就會有不同的指向問題页滚，為了規(guī)避因this指向?qū)е碌馁x值失敗召边，可以在方便開端定義一個that保存當(dāng)前this指向，后面邏輯中可以由that代替this裹驰。判斷是否是這種原因造成的很簡單隧熙，在賦值前后console或者debugger在控制臺輸出this和this.key(data中的變量)即可
function : async function() {
let that = this
// 邏輯代碼部分
const json = await ********({
method: 'POST',
header: {
'jwt': jwt
},
query: {
time: new Date().getTime()
}
});
if (json[1].data.code === 1000) {
that.key = json[1].data.data.value
}
}
微信開發(fā)者工具AppData
2.賦值給字段以后頁面沒有實時刷新
判斷是否是因為小程序未實時刷新引發(fā)的渲染錯誤的問題，可以通過查看AppData中的字段的值或者通過console幻林、debugger等方式查看該時間節(jié)點data中的值有沒有正常改變贞盯，如果data中的值正常改變頁面的展示不對可以使用computed
// template部分
<button @click="takeCart" type="primary">
{{ btnText === 0 ? '請選擇尺碼' : btnText == 1 ? '已售罄' : '加入購物袋' }}
</button>
// script部分
computed: {
storeName() {
// 引用vuex，利用vuex存儲字段
return this.$store.state.storeName;
},
btnText() {
// 本地data中的字段信息 因為當(dāng)前項目中涉及到這個button的判斷條件比較多比較復(fù)雜沪饺，所以拆分出一部分邏輯出來
if (this.sizeIdx === -1 && this.sizeArr.length !== 0) {
return 0;
} else if (this.sizeIdx !== -1 && this.sizeArr[this.sizeIdx].qty == 0 || this.sizeArr.length == 0) {
return 1;
} else {
return 2;
}
if (!this.colorName || (this.sizeIdx === -1 && this.sizeArr.length == 0)) {
return false;
} else {
let bool = (this.sizeIdx === -1 && this.sizeArr.length !== 0) || this.colorPriceJson[this.colorName].totalQty == 0 ? true : false;
return bool;
}
}
},
