Vue动态组件缓存

编辑
Vue

使用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>