Vue中 key keep-alive

keep-alive key

&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script type="text/javascript" src="./vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;keep-alive&gt;
            &lt;child-component key="1" v-if="seen" name="1"&gt;&lt;/child-component&gt;
            &lt;child-component key="2" v-if="!seen" name="2"&gt;&lt;/child-component&gt;
        &lt;/keep-alive&gt;
        &lt;button @click="toggle"&gt;toggle&lt;/button&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
        Vue.component('child-component', {
            template: `&lt;input type="text" placeholder="enter"&gt;`,
            data() {
                return {}
            },
            props: ["name"],
            mounted() {
                console.log(`${this.name} mounted`)
            }
        })
        const vm = new Vue({
            el: "#app",
            data: {
                seen: true
            },
            methods: {
                toggle() {
                    this.seen = !this.seen;
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

key是标识元素不再被复用，注意key是Vue中的一个保留的属性，不能作为prop传递给子组件，否则会在控制台看到Vue的报错

但是keep-alive标识不重复创建组件实例，也就是只会触发一次created mounted事件，

利用两者可以对组件的复用进行比较精细的管理

来源：https://segmentfault.com/a/1190000016432362