keep-alive key
<html>
<head>
< ></ >
< type=\"text/ \" src=\"./vue.js\"></ >
</head>
<body>
<div id=\"app\">
<keep-alive>
<child-component key=\"1\" v-if=\"seen\" name=\"1\"></child-component>
<child-component key=\"2\" v-if=\"!seen\" name=\"2\"></child-component>
</keep-alive>
<button @click=\"toggle\">toggle</button>
</div>
< type=\"text/ \">
Vue.component(\'child-component\', {
template: `<input type=\"text\" placeholder=\"enter\">`,
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;
}
}
})
</ >
</body>
</html>
key是标识元素不再被复用，注意key是Vue中的一个保留的属性，不能作为prop传递给子组件，否则会在控制台看到Vue的报错
但是keep-alive标识不重复创建组件实例，也就是只会触发一次created mounted事件，
利用两者可以对组件的复用进行比较精细的管理
来源：https://segmentfault.com/a/1190000016432362继续阅读与本文标签相同的文章
下一篇 :
Proe/Creo工程图——如何创建剖中剖视图？
-
在QQ空间保存着的明明很清楚照片放时间长了为何会变模糊？
2026-05-18栏目： 教程
-
吹爆这五款APP，每一款手机必备，不知道蛮可惜的
2026-05-18栏目： 教程
-
报销内容大同小异，可以直接套用模板数据吗？
2026-05-18栏目： 教程
-
美国男性机器人诞生，满足用户“硬需”，96％的女性用户都满意
2026-05-18栏目： 教程
-
程序员：你见过哪些要命的奇葩代码？
2026-05-18栏目： 教程