jQuery 和 Vue 冲突的情况分析以及解决方案

 

jQuery 绑定事件失效

先对 jQuery 对象绑定事件，之后创建 Vue 对象，这样会导致绑定的事件失效。

?

1 2 3 4

//对jQuery对象绑定事件 $("#id").on("change", function () {     //action…… });

问题所在：

定义 jQuery -> 正常关联DOM -> 使用 Vue -> jQuery与DOM断开关联【2022-3-12 猜测：vue 使用的是虚拟DOM，一旦虚拟 DOM 与 DOM 不一致，发生替换以后，原 DOM 不复存在，故而 jQuery 绑定的事件自然而然就失效了。】

具体原因不清楚，在 Chrome 调试中发现，在使用 Vue 之前定义的 jQuery 对象与当前文档元素失去了关联。

比如我先定义一个 oDiv = $("#id1")，对应的 DOM 里面 id=id1 的 div 元素（两者相关联）。

当我操作 oDiv 时，对应 DOM 里面的 id=id1 的 div 会相应变化。

这时候，我使用 Vue 对象。

在之后，我再操作 oDiv ，DOM 里面 id=id1 的 div 元素不再响应变化（两者断开关联，是两个不同的对象）。

这里估计是 Vue 监听 DOM 的时候做的一些操作导致的。

解决方案1：

绑定事件对 document 绑定

?

1 2 3 4

//对jQuery对象绑定事件 $(document).on("change", "#id", function () {     //action…… });

解决方案2：

在 Vue 后面使用 jQuery

解决方案3：

使用 $(document).ready()，在文档加载完毕再执行 jquery 相关操作

?

1 2 3

$(document).ready(function(){     //执行jquery });