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

jQuery 绑定事件失效

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

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

问题所在：

定义 jQuery -> 正常关联DOM -> 使用 Vue -> jQuery与DOM断开关联

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

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

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

这时候，我使用 Vue 对象。

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

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

解决方案1：

绑定事件对 document 绑定

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

解决方案2：

在 Vue 后面使用 jQuery

解决方案3：

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

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