有段時間沒有寫文章了，因爲一直在忙着趕項目，每次想寫什麼都覺得好累，身心俱疲。可是不寫又怕踩過的坑哪天又掉進去了，而且時間一長就忘了當時是怎麼解決的，果然是年紀大了麼…
問題描述
項目中需要做一個表格行的數據聯動，修改號碼，會根據輸入的值進行判斷是否符合規則，符合規則就能夠輸入；否則就提示錯誤信息，並將表格的值置爲修改之前的值。這裏我使用了自定義指令來完成校驗和恢復舊值，當元素focus的時候記錄值，如果提示錯誤就恢復剛剛記錄的值。
實測了一下，效果槓槓的。
然鵝一切並不是想象的那麼美好。
再多測試幾個頁面，發現有些頁面是好的，有些頁面卻會出現如上圖所示的奇怪現象！自定義指令修正了錯誤值，但是你一點擊表格區域，數據就又變成了錯誤值！
更奇怪的是其他的幾個頁面卻不會出現這個問題！
這奇怪的現象讓我想起來原來使用事件綁定來處理數據聯動和效驗時，也出現過同樣的怪像，當時綁定的change事件，理論上我修改完了數據，點擊其他任何地方，數據都應該產生聯動效果，即根據我設置的值自定計算其他的值。但是實際情況是，我必須點擊一下表格中的任意區域，數據纔會聯動更新！！後來這種方案被boss否決了，這個問題也不了了之。
解決之道
解決問題總是容易的，不容易的是找出問題，我一定要找出這種怪像的根源。
於是在彈窗之前console了一下元素，看看元素結構。
不看不知道，一看嚇一跳。
這裏可以清楚的看到，該元素擁有一個數據屬性和一個訪問器屬性，然而數據屬性value和訪問器屬性_value的值居然不一樣？訪問器屬性的值是修復後的00551235，而數據屬性居然是123！！！難怪自動修復之後，再點擊表格的其他區域，數值會變成123！！因爲數據屬性本身就是123！
那麼問題又來了，爲什麼會出現這種情況？
其實問題應該這樣問：爲什麼訪問器屬性的值和數據屬性的值不同？
那麼我是在哪一步賦值的00551235呢？是在提示錯誤，彈窗之後通過el.firstElementChild.value = oldValue來給value屬性賦值的！而上圖顯示說明，value作爲訪問器屬性，確實被賦值成功了！那麼爲什麼數據屬性的值卻沒有改變呢？
於是又是一頓折騰，終於發現原來rowData.endnumber這個屬性原來並不存在，由於服務器返回的對象中，並沒有endnumber這個字段，是應要求在前端獲取數據之後，手動添加上去了！
而手動添加的代碼居然是這樣的：
沒錯，就是這裏。（沒錯，這個坑爹的坑就是我自己埋的）
看尤大的官網，https://cn.vuejs.org/v2/guide/list.html#對象更改檢測注意事項
八成是這個坑沒錯了！
於是使用$set來定義新增的對象屬性，問題完美解決！
說來說去，還是因爲自己對於vue中對象屬性的新增的坑，沒有足夠的重視。導致了這樣一個奇怪的bug。
而關於這個bug的深究，我覺得還是有點意思的，還是雙向綁定的原理。因爲vue雙向數據綁定的原理是通過definePropoty來劫持對象屬性，然後在對象屬性值變動的時候，調用訂閱方法，更新視圖。而由於我沒有使用$set方法 ，導致新增的數據屬性沒有被vue初始化生成劫持後的setter和getter方法，導致了後面一系列的問題o(╥﹏╥)o