<h3 dir="auto">Version</h3>
<p dir="auto">2.6.11</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/thomaslwq/pen/abdoZXM" rel="nofollow">https://codepen.io/thomaslwq/pen/abdoZXM</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="        1. use the component keep-alive
        2. set the max(1) component for cache
        3. the max parameter dosen't work"><pre class="notranslate"><code class="notranslate">        1. use the component keep-alive
        2. set the max(1) component for cache
        3. the max parameter dosen't work
</code></pre></div>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">when the max parameter is 1,it works</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">it doesn't work</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/p0te9vL3/" rel="nofollow">https://jsfiddle.net/p0te9vL3/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Open dev tools to see console</li>
<li>Cycle through the routes</li>
<li>View console and observe lifecycle hook logging</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">I'd expect once the <code class="notranslate">max</code> cache is reached (in the example case of 1), the component that gets pruned also gets destroyed. In <a href="https://vuejs.org/v2/api/#keep-alive" rel="nofollow">the documentation</a> it states (emphasis mine):</p>
<blockquote>
<p dir="auto"><code class="notranslate">max</code></p>
<p dir="auto">The maximum number of component instances to cache. Once this number is reached, the cached component instance that was least recently accessed <strong>will be destroyed</strong> before creating a new instance.</p>
</blockquote>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The pruned component is never destroyed, it's just removed from the cache. In the example, the <code class="notranslate">beforeDestroy</code> hook is never called.</p>
<hr>
<p dir="auto">Related code: </p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/vuejs/vue/blob/636c9b4ef17f2062720b677cbbe613f146f4d4db/src/core/components/keep-alive.js#L37-L49">vue/src/core/components/keep-alive.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
        Lines 37 to 49
      in
      <a data-pjax="true" class="commit-tease-sha" href="/vuejs/vue/commit/636c9b4ef17f2062720b677cbbe613f146f4d4db">636c9b4</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L37" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="37"></td>
          <td id="LC37" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">function</span> <span class="pl-en">pruneCacheEntry</span> <span class="pl-kos">(</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L38" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="38"></td>
          <td id="LC38" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s1">cache</span>: <span class="pl-v">VNodeCache</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L39" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="39"></td>
          <td id="LC39" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s1">key</span>: <span class="pl-s1">string</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L40" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="40"></td>
          <td id="LC40" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s1">keys</span>: <span class="pl-v">Array</span><span class="pl-c1">&lt;</span><span class="pl-s1">string</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L41" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="41"></td>
          <td id="LC41" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s1">current</span>?: <span class="pl-v">VNode</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L42" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="42"></td>
          <td id="LC42" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L43" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="43"></td>
          <td id="LC43" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-k">const</span> <span class="pl-s1">cached</span> <span class="pl-c1">=</span> <span class="pl-s1">cache</span><span class="pl-kos">[</span><span class="pl-s1">key</span><span class="pl-kos">]</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L44" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="44"></td>
          <td id="LC44" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">cached</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">current</span> <span class="pl-c1">||</span> <span class="pl-s1">cached</span><span class="pl-kos">.</span><span class="pl-c1">tag</span> <span class="pl-c1">!==</span> <span class="pl-s1">current</span><span class="pl-kos">.</span><span class="pl-c1">tag</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L45" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="45"></td>
          <td id="LC45" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-s1">cached</span><span class="pl-kos">.</span><span class="pl-c1">componentInstance</span><span class="pl-kos">.</span><span class="pl-en">$destroy</span><span class="pl-kos">(</span><span class="pl-kos">)</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L46" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="46"></td>
          <td id="LC46" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-kos">}</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L47" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="47"></td>
          <td id="LC47" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s1">cache</span><span class="pl-kos">[</span><span class="pl-s1">key</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L48" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="48"></td>
          <td id="LC48" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-en">remove</span><span class="pl-kos">(</span><span class="pl-s1">keys</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">)</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L49" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="49"></td>
          <td id="LC49" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-kos">}</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>