problem description
wrote a process class application, and the templates are all reused. Suppose there are three types of template switching. If there are two identical templates in a row, the template cache will not be destroyed
.related codes
the simplified code is as follows
<div id="dynamic-component-demo">
<button v-for="tab in tabs" v-bind:key="tab" @click="currentTab = tab">{{ tab }}</button>
<component :is="currentTabComponent" ></component>
</div>
Vue.component("tab-posts", {
data: function() {
return {
args:"",
}
},
template:"<div><input type="text" v-model="args"></div>",
})
Vue.component("tab-archive", {
template: "<div>Archive component</div>"
})
new Vue({
el: "-sharpdynamic-component-demo",
data: {
currentTab: "Posts",
tabs: ["Posts", "Posts", "Archive", "Posts"]
},
computed: {
currentTabComponent: function() {
return "tab-" + this.currentTab.toLowerCase()
}
}
})