本篇文章给大家带来的内容是关于vue中key keep-alive的代码示例分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
keep-alive key<!doctype html><html><head> <title></title> <script type="text/javascript" src="./vue.js"></script></head><body> <p 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> </p> <script type="text/javascript"> 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; } } }) </script></body></html>
key是标识元素不再被复用，注意key是vue中的一个保留的属性，不能作为prop传递给子组件，否则会在控制台看到vue的报错
但是keep-alive标识不重复创建组件实例，也就是只会触发一次created mounted事件，
利用两者可以对组件的复用进行比较精细的管理
以上就是vue中key keep-alive的代码示例分析的详细内容。