title: Vue.js and VueRouter slow performance
body: <p>i got SPA web page using Vue.js and routing with VueRouter.</p>
  
  <p>For example i got 2 pages:</p>
  
  <ul>
  <li>On first i got list of entities, each of them are the same <code>Components</code> with some amount of data in it to display information to customers, with pagination on this page <code>(1)</code>,</li>
  <li>On second got profile info <code>(2)</code>.</li>
  </ul>
  
  <p>Transition <code>(1) =&gt; (2)</code> with <code>entities = [];</code> are fast, but when this list is not empty, this transition becomes real slow, and it depends of <code>entities.length</code>.</p>
  
  <p>What is happening?</p>
  
  <ol>
  <li>Click to <code>(2)</code>;</li>
  <li><code>router.beforeEach</code> handler triggers momentally;</li>
  <li><code>(2).beforeMount</code> triggers;</li>
  <li><code>(1).beforeDestroy</code> triggers;</li>
  <li>Big delay;</li>
  <li><code>(1).destroyed</code> triggers;</li>
  <li><code>(2).mounted</code> triggers and <code>(2)</code> visually load.</li>
  </ol>
  
  <p>In <code>step 5</code> i got </p>
  
  <pre><code>beforeDestroy() {
      console.time(this.entity.id);
  },
  destroyed() {
      console.timeEnd(this.entity.id);
  }
  </code></pre>
  
  <p>and it gives this</p>
  
  <p>on <code>entities.length == 20</code> we got console output like:</p>
  
  <p><a href="https://i.stack.imgur.com/KI4OW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KI4OW.png" alt="enter image description here"></a></p>
  
  <p>on <code>entities.length == 60</code> we got console output like:</p>
  
  <p><a href="https://i.stack.imgur.com/wiU0H.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wiU0H.png" alt="enter image description here"></a></p>
  
  <p>This <code>beforeDestroy =&gt; destroyed</code> time gap in each <code>Entity</code> depends of <code>entities.length</code> and tends to zero, after <code>Entity</code> being destroyed, next <code>beforeDestroy =&gt; destroyed</code> time gap is getting less time.</p>
  
  <p>Each <code>Entity</code> inside doesn't know about other <code>Entities</code>.</p>
  
  <p>What i did wrong and how to fix or workaround this problem? Maybe i miss something about Vue.js lifecycle.</p>
  
  <p>Thanks in advance, guys!</p>