記一個Vue專案中的雙向繫結和非同步導致的Bug

最近趕專案，一週上7天班每天還得搞到十點十一點，實在是沒有精力再看書了。
但是寫專案的時候碰到的一個Bug完全超出了我的知識範圍，我隱隱感覺如果解決了應該會讓我對JS有更好的認識，於是沒有求助大佬，懇求給我些時間來解決。大佬正忙著也不想弄什麼疑難雜症於是同意了。我可得好好看看這玩意什麼毛病再寫個部落格記一記了........
Bug是這樣的：

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

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

先在本月後面加了dateBtnChoose的呼叫，然後再在呼叫的函式裡寫了console.奇怪的事情發生了。

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

開始頭疼了。排查了半天無果，向大佬求助，大佬看了一下給了提示：“雙向繫結”。

於是開始思考。已知這些值是雙向繫結的....有什麼問題嗎？苦苦思索，有哪裡把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:

只有當isBtnStatus不為1時，才在觸發@change的時候將dataBtnChoose置為0，並在觸發@change後將isBtnStatus置為0.

​

在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，血崩，功能失效。

於是我把函式改成：

終於沒有問題了，感動。

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

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