Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KeepAlive include Property binding responsive data(KeepAlive include 属性绑定响应式数据的问题) #2550

Closed
lgd8981289 opened this issue Nov 3, 2020 · 2 comments · Fixed by #2551
Labels
has PR A pull request has already been submitted to solve the issue has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working

Comments

@lgd8981289
Copy link

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:

  1. npm install
  2. 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 地址,需要执行以下步骤运行项目:

  1. npm install
  2. npm run dev
    项目运行,进入 A 组件,点击 to two 按钮进入 B组件。在 B 组件中,点击 goBack 按钮返回 A 组件。

What is expected?

  1. When displaying component A, component A should be cached by keepAlive
  2. When component A enters component B, both component A and component B should be cached by KeepAlive.
  3. When component B returns to component A, component B should no longer be cached

  1. 展示 A 组件时,A 组件应该被 keepAlive 缓存
  2. 由 A 组件进入 B 组件时,A 组件与 B组件都应该被 KeepAlive缓存。
  3. 由 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 中移除的组件名并没有被清除掉缓存。

@LinusBorg LinusBorg added the 🐞 bug Something isn't working label Nov 3, 2020
@LinusBorg LinusBorg self-assigned this Nov 3, 2020
@LinusBorg LinusBorg removed their assignment Nov 4, 2020
@LinusBorg
Copy link
Member

As a workaround, pass a new array on every change instead of mutating the same one.

@LinusBorg LinusBorg added has PR A pull request has already been submitted to solve the issue has workaround A workaround has been found to avoid the problem labels Nov 4, 2020
@lgd8981289
Copy link
Author

As a workaround, pass a new array on every change instead of mutating the same one.

Thank you

@github-actions github-actions bot locked and limited conversation to collaborators Oct 31, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has PR A pull request has already been submitted to solve the issue has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants