使用KeepAlive缓存组件实例
我们可以通过<KeepAlive>
实现多个组件间动态切换时缓存被移除的组件实例。
https://play.vuejs.org
<!-- 非活跃的组件将会被缓存! -->
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>
单一组件多实例缓存
但是这种实现无法针对同一组件生效,例如针对动态路由,由于渲染的组件实际未发生变更缓存的实例将是同一个
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"/>
</keep-alive>
</router-view>
const User = {
template: '<div>User</div>',
}
// 这些都会传递给 `createRouter`
const routes = [
// 动态字段以冒号开始
{ path: '/users/:id', component: User },
]
访问/users/1
, /users/2
时缓存的实例将是同一个
针对上面的问题有以下解决办法
设置component的key
keep-alive内部把组件对象的key或者或者组件对象当作key缓存https://github.com/vuejs/core/blob/a95e612b252ae59eaf56e0b8ddba66948d4ac20e/packages/runtime-core/src/components/KeepAlive.ts#L291-L292
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.path"/>
</keep-alive>
</router-view>