記錄Vue和Jquery混合開發中關於點擊事件的一個bug

最近比較急的接手了公司的微信服務號項目，採用的技術棧主要是jq和vue。在項目中以前遇見過jq寫的$().on('click',function(){})點擊事件不起做用，只能寫在vue實例中的methods中，而後用@click去監測。

一直困惑的是這個BUG在不一樣的頁面中有時有，有時沒有，並且出現的狀況不多。今天工做閒了一點，因而乎專心去琢磨這個問題。

網上百度到的解決方案是這樣的，以下圖：

因而乎本身試了一下確實能夠。代碼以下圖：

可是回過頭來看項目就很奇怪，說的寫在JQ的dom加載完成函數中就能夠，可是個人具體項目中爲何不行呢？而其餘頁面的卻能夠呢？

因而乎開始從繁至簡的減小代碼，想要減小的如上，頁面也簡化。jq寫的點擊事件就是以下的‘夥伴詳情’

這一列是v-for生成的，當把dataList直接改成數字後，點擊是能夠生效的，因而開始考慮是dom渲染問題，以前也這樣猜測過，但沒有過去驗證究竟是哪塊的問題。

若是dataList是請求後端數據生成的，那多是時間差上有問題。

因而我在vue實例中的$this.nextTick中和jq點擊事件前分別打印時間。獲得以下圖：

顯然jq點擊函數被讀取時，vue是尚未完成dom更新。雖然說$(function() {})表明着jq dom完成以後再去執行裏面的代碼(全部代碼寫在這裏面)，但這是vue和jq的混合開大，對於v-for生成的dom 來講須要等待拿到後端數據而且賦值給實例的dataList才能生成。

因此加載jq點擊事件時候，vue的dom還沒完成更新，因此就是無效的。點擊事件中的選取元素並不能拿到對應的dom元素。

上面的時間差是2毫秒。爲了驗證以上的猜測，我直接給了10個毫秒的延遲（好像毫秒默認的有效最小是24），而後jq寫的點擊事情就有用了。

 

總結：較好的寫法仍是經過vue的methods來寫點擊事件，不推薦jq寫。或者只能這樣了(form_vm是vue實例)

反思：對於在以前的頁面中寫的有效的jq點擊事件多是頁面內容較少，拿的數據較少。可是我的總感受可能其餘地方仍是有問題，或者說個人這個解決方法只是湊巧而已，甚至多是錯誤的。因此如果您有任何指正的地方，歡迎留言！！！