記一個Vue項目中的雙向綁定和異步導致的Bug

最近趕項目,一周上7天班每天還得搞到十點十一點,實在是沒有精力再看書了。
但是寫項目的時候碰到的一個Bug完全超出了我的知識范圍,我隱隱感覺如果解決了應該會讓我對JS有更好的認識,于是沒有求助大佬,懇求給我些時間來解決。大佬正忙著也不想弄什么疑難雜癥于是同意了。我可得好好看看這玩意什么毛病再寫個博客記一記了........
Bug是這樣的:

gif1

做了一個選擇本月、本年、全部的部分,但是很奇怪,調的都是同樣一個函數只是傳參不同,點擊本月、本年后可以正常的把展示的樣式改為點擊后的 ,但是全部卻點擊不上。

pic2

可以看到,我是用dateBtnChoose這個變量來進行選擇判斷的。二話不說先Console。

pic3

先在本月后面加了dateBtnChoose的調用,然后再在調用的函數里寫了console.奇怪的事情發生了。

gif5

發生了我根本無法理解的事情,同樣一個函數傳參,同樣的顯示,參數是1、2時正常,但是參數為3的時候可以確定type=3,dateBtnChoose同樣等于3,但是dateBtnChoose顯示出來居然是0?排查之后發現,也沒有對dateBtnChoose=3進行判斷的部分,也就是說根本不是代碼里進行操作導致的Bug.

png4

開始頭疼了。排查了半天無果,向大佬求助,大佬看了一下給了提示:“雙向綁定”。

于是開始思考。已知這些值是雙向綁定的....有什么問題嗎?苦苦思索,有哪里把dateBtnChoose置0了嗎?找了一遍,發現日期input框中@change綁定的@dateSelectClear只有一行:

this.dateBtnChoose= 0;

于是嘗試刪除@change,發現問題沒有了。但需求是,如果我手動在UI的日期框輸入了日期,那么按鈕選擇置0,這個@change不能隨便刪除。再仔細想想,我大概明白是怎么一回事了。

在點擊button后,調用了函數selectsearchDate(type),此時將this.dateBtnChoose的值置為type.但是selectsearchDate這個函數同樣操作了綁定在el-date-picker上的this.searchParamsObj,這個操作會引起el-date-picked的改變,繼而觸發@change,然后觸發函數dateSelectClear,將this.dateBtnChoose置0.

那么怎么解決呢?想了半天,有點束手無策。問大佬,大佬提示:“你傻嗎,加個讀寫開關不就行了。”

大概明白怎么做了。加入一個讀寫開關值isBtnStatus,在值change的時候做讀寫保護。

使用值isBtnStatus:

pic5

只有當isBtnStatus不為1時,才在觸發@change的時候將dataBtnChoose置為0,并在觸發@change后將isBtnStatus置為0.

?
pic6

在selectsearchDate中加入對isBtnStatus值的操作。賦值之后,將isBtnStatus置0。因為!this.isBtnStatus的值為0,接下來對startdate和enddate的操作并不會觸發@change中的置0,而在對startdate和enddate進行操作、觸發@change后,重新將isBtnStatus置0.此時的@change再進行觸發,即可為正常值。

但是,又發現了一個新的問題,那就是點擊多次以后偶爾會出現點擊日期框后按鈕樣式并未轉變的問題。

點擊多次以后會出現偶爾有一次,點擊一個按鈕后,通過更改日期值并沒有辦法將按鈕值清零。出現頻率大概是點擊7-8次出現一次。這下我就確實有些不知如何是好了,于是無奈又只能請教大佬。

大佬看了以后陷入了沉思。語重心長的給了我提示:“這么明顯的異步請求問題都看不出來?執行完選擇后加個setTimeout不就好了嗎?是不是傻?”

我感覺大佬說的很對。searchByType()函數調用了接口,js進行異步執行,此時會出現接口還在調取中,

this.searchParamsObj.StartTime=startdate;

this.searchParamsObj.EndTime=enddate;

這兩句還沒有執行完,就直接執行

this.isBtnStatus = 0;

然后接口又調到數據了,觸發@change,血崩,功能失效。

于是我把函數改成:

pic8

終于沒有問題了,感動。

這次的Bug還是讓我感到有點慚愧的,這么多基礎知識居然理解的這么淺薄,碰到實際問題就蠢的找不著北,真雞兒丟人......

默默刷Vue官方文檔去了....

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容