记录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点击事件多是页面内容较少，拿的数据较少。可是我的总感受可能其余地方仍是有问题，或者说个人这个解决方法只是凑巧而已，甚至多是错误的。因此如果您有任何指正的地方，欢迎留言！！！