vue3 keep-alive的include和exclude属性无效

vue3 keep-alive的include和exclude属性无效

keep-alive标签的include和exclude两个属性设置之后没有效果

const app = Vue.createApp({
	template: `
			<button v-for="tab in tabs" @click="activeTab = tab" :style="activeTab === tab?{color: 'red'}:{}">{{ tab }}
			</button>
			<keep-alive :include="/Component[A,B]/">
		    	<component :is="tabComponent"></component>
			</keep-alive>`,
	data() {
		return {
			tabs: ['A', 'B', 'C'],
			activeTab: 'A'
		}
	},
	computed: {
		tabComponent() {
			return 'Component' + this.activeTab
		}
	}
})

app.component('ComponentA', {
	template: `<div > component A </div>`
})
app.component('ComponentB', {
	template: `
			<div>
			<button @click="count--">-</button>
			count: {{ count }}
			<button @click="count++">+</button>
			</div>`,
	data() {
		return {
			count: 0
		}
	}
})
app.component('ComponentC', {
	template: `<div > component C </div>`
})


app.mount('#app')

原因：

在声明组件时需要设置组件的name属性，应为include和exclude这两个属性是和组件的name属性进行匹配的，如果不设置name属性，就无法配成功

app.component('ComponentA', {
	name: 'ComponentA',
	template: `<div > component A </div>`
})