同时使用KeepAlive和Transition, Transition使用out-in模式, 使用include控制缓存的组件, 可能导致out-in失效

[beishuangzz]

Vue version

v3.5.0-rc.1

Link to minimal reproduction

https://play.vuejs.org/#eNrNVs1uGzcQfhViLysB2l3Zbi+qbNQJcmgPaZG6QIFuUXC5I5kxlyRIrirD0KW3PkF7CAq0hx6Ltu8UA3mLDsld/cFR4jgIAsPGcn6+mfk4nPFNcq51vmghmSRTywzXjlhwrT4rJW+0Mo7cEAMzsiIzoxqSomm6VmnaSfNCU4+ypao2qmpPxTYqtqu6IfaSCqF+erYX8rNSlpIpaR1hlF1C/ZQ2YMmpz23wfappOiKprsJflv4wXBu3xoB0aLgBHmiK+lJinRe8AdW6wWBITs/ITSlJ75EvqGgB/XRVytWIHB2Nx+j1lj4s+BwfB5/40+VzSeXcmxzypkG6KTNqcqsFZzA4GpKiePnXz7e/v+gkx8OX//x7+98fty9+efXr36/+/M3HW5VyWsQbxbvEg4NGC+oAT4RMLwyVljuuJJEY47RMrOA1ZIbPL12ZkEbVXoiFZlyWSXBCtysAnVHBF+CZRwMvOPdnJBbdJg1dovRk7L+5ZKINMFvFrLEQjSm8dunvJ4JpOu9wmKDWdpIA5Q8dUXgu+nyKTUKxrmJTWBQIWoE4m3KpW0fctfbpGFpzhTCLzJcpdqAngewQOgQi59MiYjwQropwj94THItwj3fgar7omala5/ByP2fYIlceI3Qesm+gUXh9lFBZk2pEao5tRK8JmxbRpyMyYk2Lrb7Bo3XXwn/mW+2SYW5gMsqc74vQ0259C5OYj9KUcXdN8BmNG0uAWsiwuQgeRtEiuMyUae6ywfePDb0XVgBdwDuFfVPIO8PFKsNMCsE67AkZo/kW2CR+es6+G2SIrJfDA/k7dQ+4NZo3yf3ryGZKhbz4EuqIRPo7nRCJzyvAYfQ4Ebr7S0aJsziTZnyeP7dK4vwPvtgo+Ci5APOV9jzie530qGUSRuiXQeZMCx2NvrmAXd0hf26XXlYmXxuwYBbYf2udo2YO2NNe/eSbp7DE77USO78VaH1A+QysEq3PMZo9amWNaW/ZhWy/CJuFy/mFfbJ0gO3RFeUTDcwE+zLBNfP4QOmbdE/yT3pGkcW4+A6tTyW/lY1qsXvq/Z3W2+D4212wAhzp94FfcWmKi2QLaGf7YKpKQC7UfJBS0vY23mWFv4fWgH/klNLutXRzaDN4QgplEsftnSPBMxD2+wdh4LUc7LFQ3Z+FqqoexkL4V+ajYoHdnwXG2INY+HEBxr8w5OEk/zQfZ4blR8nqf1/njT0=

Steps to reproduce

使用keep-alive同时缓存a b c三个组件, 确保三个组件已被缓存, keep-alive使用include控制缓存, 值为['pa', 'pb', 'pc'], 当前显示组件c, 然后把当前组件切换为a, 同时把include的值改为['pa'], 此时out-in会失效, 但include的值改为['pa', 'pb']就没有问题

What is expected?

修复以上bug

What is actually happening?

同时使用KeepAlive和Transition, Transition使用out-in模式, 使用include控制缓存的组件, 可能导致out-in失效

System Info

No response

Any additional comments?

No response

[linzhe141]

has workaround

 <keep-alive ref="keepAliveRef" :max="30" :include="cachedNames">
    <Transition name="slide-right" mode="out-in">
      <component ref="pageRef" class="page" :is="current" />
    </Transition>
  </keep-alive>

[beishuangzz]

has workaround

 <keep-alive ref="keepAliveRef" :max="30" :include="cachedNames">
    <Transition name="slide-right" mode="out-in">
      <component ref="pageRef" class="page" :is="current" />
    </Transition>
  </keep-alive>

这样keep-alive是不生效的

[linzhe141]

即使cachedNames.value.splice(1)后，其实还是走了KeepAlive，这应该也是一个问题

[beishuangzz]

即使cachedNames.value.splice(1)后，其实还是走了缓存，这应该也是一个问题

实际组件c的unmounted并未执行, 我倒是有 workaround

[edison1105]

It's very similar to #11037. The underlying problem is the afterLeave hook is not destroyed.

[linzhe141]

It's very similar to #11037. The underlying problem is the afterLeave hook is not destroyed.

If I modify it this way, it seems to solve the transition issue, but there's still the problem of deactivate(pc vnode), so the pc component won't be unmounted

leavingHooks.afterLeave = () => {
  state.isLeaving = false
  // #6835
  // it also needs to be updated when active is undefined
  if (!(instance.job.flags! & SchedulerJobFlags.DISPOSED)) {
    instance.update()
  }
  //! add line !
  leavingHooks.afterLeave = undefined
}

[edison1105]

@linzhe141 I'll look into it again later

[hooray]

@edison1105
https://github.com/minimal-reproduction/vue-transition-keepalive
here is the #10827's minimal reproduction

[edison1105]

@hooray Thank you so much.

[yyx990803]

Reopened (#11778 reverted in 7e3b3bb due to #11829