Vue如何覆盖jQuery事件监听器

Question

我已经读到jQuery和Vue往往不能很好地协同工作（例如，参见https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/）。由于我有一个大型jQuery应用程序，正在逐步将Vue集成到其中，因此我想了解幕后情况，以免发生冲突。

这是一个简化的测试页面：

$('#a').click(function() {
  alert('a');
});

$(function() {
  $('#b').click(function() {
    alert('b');
  });
});

var app = new Vue({
  el: '.container',
  mounted: function() {
    $('#c').click(function() {
      alert('c');
    });
  }
});

$('#d').click(function() {
  alert('d');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="a">a - jQuery immediate</button>
  <button id="b">b - jQuery DOM ready</button>
  <button id="c">c - jQuery inside Vue mounted</button>
  <button id="d">d - jQuery after Vue</button>
</div>

如您所见，第一个（a）事件侦听器被Vue清除，而其他三个（b-d）继续工作。

我的问题可以归结为在技术层面上，Vue对（a）所做的与（b）或（d）不同的是什么？

此处的CodePen： https://codepen.io/MSCAU/pen/PxzQNq

Answer 1

问题在于，.container事件发生之后，el事件发生之前，beforeMount（mounted）被Vue取代。您可以在此处查看图表：

（reference）

说明：

const a = document.querySelector('#a')
const app = new Vue({
  el: '.container',
  beforeMount: () => {
    console.log(a === document.querySelector('#a'));
  },
  mounted: function() {
    console.log(a === document.querySelector('#a'));
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div class="container">
  <h1>Vue vs jQuery</h1>
  <button id="a">button</button>
</div>

如您所见，原始a在beforeMount之后，mounted之前丢失。效果与更改容器的innerHTML相同，例如

document.querySelector('.container').innerHTML += ' ';