KeepAlive include Property binding responsive data(KeepAlive include 属性绑定响应式数据的问题)
Version
3.0.2
Reproduction link
https://github.com/lgd8981289/vue3-keepAliveIssue
Steps to reproduce
The link is the github address, you need to perform the following steps to run the project:
- npm install
- npm run dev The project runs, enter the A component, click the to two button to enter the B component. In component B, click the goBack button to return to component A.
链接为 github 地址,需要执行以下步骤运行项目:
- npm install
- npm run dev 项目运行,进入 A 组件,点击 to two 按钮进入 B组件。在 B 组件中,点击 goBack 按钮返回 A 组件。
What is expected?
- When displaying component A, component A should be cached by keepAlive
- When component A enters component B, both component A and component B should be cached by KeepAlive.
- When component B returns to component A, component B should no longer be cached
- 展示 A 组件时,A 组件应该被 keepAlive 缓存
- 由 A 组件进入 B 组件时,A 组件与 B组件都应该被 KeepAlive缓存。
- 由 B 组件返回 A 组件时,B组件不应该再被缓存
What is actually happening?
Expectation 1 and Expectation 2 met expectations. It is expected that component B in 3 is still cached (when component B is entered again, the image does not execute the network request).
期望1 和 期望2 达到了预期。 期望3 中 B 组件依然被缓存(再次进入 B 组件时,图片没有执行 network 请求)。
I use the include property of keep-alive to bind a responsive array, hoping to control the cache result of keepAlive through the array to achieve the operation effect of scene switching in the native APP (TaskStack). These operations were executed perfectly in Vue 2.x, you can check this link (http://imooc.hybrid.lgdsunday.club/), but there were unexpected errors in vue 3. I think this should be a bug in Vue 3. The component names removed from include are not cleared from the cache.
我使用 keep-alive 的 include 属性来绑定了一个响应式数组,期望通过数组来控制 keepAlive 的缓存结果,以达到原生APP 中场景切换的运行效果(TaskStack)。 这些操作在 Vue 2.x 中被完美执行,可以查看这个链接(http://imooc.hybrid.lgdsunday.club/),但是在 vue 3 中却出现了意料之外的错误。 我认为这应该是 Vue 3 中的一个 bug,从 include 中移除的组件名并没有被清除掉缓存。