{"componentChunkName":"component---src-templates-post-template-jsx","path":"/history/posts/2020-10-27--001","result":{"data":{"site":{"siteMetadata":{"title":"Blog by Eunyoung","subtitle":"작업 기록 블로그","copyright":"© All rights reserved.","author":{"name":"EunYoung","twitter":"#"},"disqusShortname":"","url":"https://ssongey.github.io"}},"markdownRemark":{"id":"e99aacf2-f58e-55d9-b2ef-9f8785f59406","html":"<h2>keep-alive</h2>\n<p>\n  <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/devHistoryBlog/static/ff19d0593da7dff6bea546b79286257b/b94e3/001-01.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n  \n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 960px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 75.41666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAACB0lEQVQ4y6VU55LWMAzM+z8izHF86c0pdlzSvmXlXA6OAX5wntEobvJqV0pSdx2yokLT9Xg+n/jT+Nf6bfc8GacZddNhNgv+Z/z6WAx4nifWbcMWPM5jx7pucM7D+UDzcR7WFZoPLtbBLBaWfqEPYf2AVEYi7th32OIB3TZIizpS8PKa4pGVqOoWaV7h9ZHHufiiapCXNcqqjQ99SHk/DjhrofsW86whFEz0wzjF73GcL/++fnlBezC7g/d/5kyEPgQKovAtLfDE50fiydX9uuoVmrrBMIyYJg039AhjDz+N6GWv7dH2AzqafFcUsyUYsU4NkdNEyK2aNnLSlSW6IkddVpG3LCvQ5RlUnkI1DTKeEQ4lIxVTNxFMp0Z6Dck22SmIoBRyRc1AZd2yRBXN4jDwoKZfedjba/3cN1GSVXFg2/bIo6CLoljn3pXMM6J7fIcfFS87zPpCoOlXo7HqKT7m55FU8AzXZr3EfUEp4JI3vWP0k3acn5Mm0auDZTqSWtH0MPOM0DdYKcikFEoSL50kpEv93SacDxRqo2iWJSdlFAP2XsNMDJQ/MBYpSgry8uUruqrEsV1dIvx4mnSQpcll8cLrTl43Z7G/1WMsm4WC+MVE0kUcEcH5K0gIH1vwJv9vfZ1Ib4r8RkRgMMUOmUiy9KsxNgozUBjDPalVsY3k//63uR/5AaSxiPz21oMQAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"001 01\"\n        title=\"\"\n        src=\"/devHistoryBlog/static/ff19d0593da7dff6bea546b79286257b/d9199/001-01.png\"\n        srcset=\"/devHistoryBlog/static/ff19d0593da7dff6bea546b79286257b/8ff5a/001-01.png 240w,\n/devHistoryBlog/static/ff19d0593da7dff6bea546b79286257b/e85cb/001-01.png 480w,\n/devHistoryBlog/static/ff19d0593da7dff6bea546b79286257b/d9199/001-01.png 960w,\n/devHistoryBlog/static/ff19d0593da7dff6bea546b79286257b/b94e3/001-01.png 1126w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<ul>\n<li>keep-alive 는 비활성 컴포넌트 인스턴스를 파괴하지 않고 캐시한다.</li>\n<li>keep-alive 를 사용하면 컴포넌트 인스턴스가 전역 큐에 저장되고, 활성화 될 때는 기존 컴포넌트를 사용하여 activated 라이프 사이클 hook이 호출되며, 비활성화시에는 인스턴스를 소멸시키지 않고 deactivated 라이프사이클 hook이 호출된다.</li>\n<li>ref) <a href=\"https://learnvue.co/2019/12/an-overview-of-vue-keep-alive/\">https://learnvue.co/2019/12/an-overview-of-vue-keep-alive/</a>\n<a href=\"https://velog.io/@kyusung/VUE-keep-alive\">https://velog.io/@kyusung/VUE-keep-alive</a></li>\n</ul>\n<h2>destroy component cash</h2>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function-variable function\">clearComponentCache</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">param</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> component <span class=\"token operator\">=</span> param<span class=\"token punctuation\">.</span>matched<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>instances<span class=\"token punctuation\">.</span>default<span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>component <span class=\"token operator\">&amp;&amp;</span> component<span class=\"token punctuation\">.</span>$vnode <span class=\"token operator\">&amp;&amp;</span> component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>data<span class=\"token punctuation\">.</span>keepAlive<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>parent <span class=\"token operator\">&amp;&amp;</span> component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>parent<span class=\"token punctuation\">.</span>componentInstance <span class=\"token operator\">&amp;&amp;</span> component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>parent<span class=\"token punctuation\">.</span>componentInstance<span class=\"token punctuation\">.</span>cache<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>componentOptions<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token keyword\">const</span> key <span class=\"token operator\">=</span> component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>key <span class=\"token operator\">?</span> \n            component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>key <span class=\"token operator\">:</span>\n            component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>componentOptions<span class=\"token punctuation\">.</span>Ctor<span class=\"token punctuation\">.</span>cid <span class=\"token operator\">+</span> <span class=\"token punctuation\">(</span>component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>componentOptions<span class=\"token punctuation\">.</span>tag <span class=\"token operator\">?</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">::</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>componentOptions<span class=\"token punctuation\">.</span>tag<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span> <span class=\"token operator\">:</span> <span class=\"token string\">''</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n          <span class=\"token keyword\">const</span> cache <span class=\"token operator\">=</span> component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>parent<span class=\"token punctuation\">.</span>componentInstance<span class=\"token punctuation\">.</span>cache<span class=\"token punctuation\">;</span>\n          <span class=\"token keyword\">const</span> keys <span class=\"token operator\">=</span> component<span class=\"token punctuation\">.</span>$vnode<span class=\"token punctuation\">.</span>parent<span class=\"token punctuation\">.</span>componentInstance<span class=\"token punctuation\">.</span>keys<span class=\"token punctuation\">;</span>\n          <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>cache<span class=\"token punctuation\">[</span>key<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>keys<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token keyword\">const</span> index <span class=\"token operator\">=</span> keys<span class=\"token punctuation\">.</span><span class=\"token function\">indexOf</span><span class=\"token punctuation\">(</span>key<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n              <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>index <span class=\"token operator\">></span> <span class=\"token operator\">-</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                keys<span class=\"token punctuation\">.</span><span class=\"token function\">splice</span><span class=\"token punctuation\">(</span>index<span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n              <span class=\"token punctuation\">}</span>\n            <span class=\"token punctuation\">}</span>\n            <span class=\"token keyword\">delete</span> cache<span class=\"token punctuation\">[</span>key<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span></code></pre></div>","fields":{"tagSlugs":["/tags/vue/","/tags/keep-alive/"],"slug":"/history/posts/2020-10-27--001"},"frontmatter":{"title":"[Vue] Keep Alive","tags":["vue","keep-alive"],"date":"2020-10-27","description":""}}},"pageContext":{"slug":"/history/posts/2020-10-27--001"}},"staticQueryHashes":[]}