<p><code></p> <h2 id="articleHeader0">keep-alive key</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html><br /> <head><br /> <title></title><br /> <script type=&quot;text/javascript&quot; src=&quot;./vue.js&quot;></script><br /> </head><br /> <body></p> <div id=&quot;app&quot;> <keep-alive><br /> <child-component key=&quot;1&quot; v-if=&quot;seen&quot; name=&quot;1&quot;></child-component><br /> <child-component key=&quot;2&quot; v-if=&quot;!seen&quot; name=&quot;2&quot;></child-component><br /> </keep-alive><br /> <button @click=&quot;toggle&quot;>toggle</button> </div> <p> <script type=&quot;text/javascript&quot;> <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.component('child-component', { template: `<input type=&quot;text&quot; placeholder=&quot;enter&quot;>`, data() { return {} }, props: [&quot;name&quot;], mounted() { console.log(`${<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.name} mounted`) } }) <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> vm = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: &quot;#app&quot;, data: { seen: true }, methods: { toggle() { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.seen = !<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.seen; } } }) </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">keep-alive</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">child-component</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"seen"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child-component</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">child-component</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!seen"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child-component</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">keep-alive</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toggle"</span>&gt;</span>toggle<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.component(<span class="hljs-string">'child-component'</span>, { <span class="hljs-attr">template</span>: <span class="hljs-string">`&lt;input type="text" placeholder="enter"&gt;`</span>, data() { <span class="hljs-keyword">return</span> {} }, <span class="hljs-attr">props</span>: [<span class="hljs-string">"name"</span>], mounted() { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.name}</span> mounted`</span>) } }) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">"#app"</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">seen</span>: <span class="hljs-literal">true</span> }, <span class="hljs-attr">methods</span>: { toggle() { <span class="hljs-keyword">this</span>.seen = !<span class="hljs-keyword">this</span>.seen; } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>key是标识元素不再被复用,注意key是Vue中的一个保留的属性,不能作为prop传递给子组件,否则会在控制台看到Vue的报错</p> <p>但是keep-alive标识不重复创建组件实例,也就是只会触发一次<code>created mounted</code>事件,</p> <p>利用两者可以对组件的复用进行比较精细的管理</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25625.html