[Vuejs]-How does Vue overwrite jQuery event listeners

by

6👍

✅

The problem is that the .container (the el) gets replaced by Vue right after the beforeMount event fires, and right before the mounted event fires. You can see a diagram here:

enter image description here

(reference)

To illustrate:

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>

As you can see, the original a gets lost right after beforeMount, right before mounted. The effect is the same as if the innerHTML of the container was altered, eg

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

Leave a comment