Vue.js與jQuery混用

標簽： js

---

坑位

最近開發一個需求，項目有用到jQuery和Vue，發現我jQuery綁定的事件全部都失效了。

Why

Vue會重新渲染dom,加上是異步實例Vue.所以正常寫程序的話jq的$()獲取的元素不是vue渲染后的元素。

解決方案

• 方案1:最徹底的方法是既然用了Vue就全部交給Vue就好了，不再引入jQuery
• 方案2: 既然Vue接管了並重新渲染dom，那我們就等Vue真正渲染重新渲染出dom了再執行我們的jQuery事件綁定,主要代碼示例如下：

new Vue({
  el: "testId",
  mounted: function() {
    this.$nextTick(function(){
      // 在這里執行$()的dom事件綁定
      ...
    })
  }
})

方案2注意點：

1. 針對你要通過jQuery綁定事件的元素不要使用v-if去顯示隱藏，改用v-show吧;

2. 盡量使用jquery的事件委托機制，這樣可以針對后續生成的元素事件也做處理
3. 事件綁定還是盡量通過@click方式來綁定吧;