Issue when using cacheable components (<keep-alive>)

[nlocascio]

When using vue-infinite-loading in a cacheable component inside of <keep-alive>, the component will sometimes trigger onInfinite indefinitely while the parent component is inactive (cached).

You can recreate the condition using this jsfiddle:

1. Click "Go to Bar" to activate the Bar component.
2. Immediately click "Go to Foo". This will deactivate/cache Bar and replace it with Foo.
3. In dev console, you'll see that onInfinite continues to run.

I ran into this issue usiung Vue-Router and <keep-alive> to cache components, and found that the infinite loader would keep runing on cached components.

[PeachScript]

Thank you @nlocascio , I will find the real reason and fix it.

[PeachScript]

Hi @nlocascio , I have been released a new version v2.0.4 to fix this problem, you can try it in the JSFiddle that base on yours.

But it only works with Vue.js v2.2.0 and above, because the nested component's activated and deactivated lifecycle hooks cannot be trigger in low Vue version(details in here). If we want to solve this problem in the lower Vue version, we must handle activated and deactivated lifecycle hooks in the top-level keep-alive component like this:

const AliveComponent = {
  ...
  template: '#bar',
  deactivated() {
    this.$refs.yourInfiniteLoading.isLoading = false;
  },
};

[nlocascio]

@PeachScript - thanks for pushing the update. I had been thinking of approaching this issue through the distance detection logic in getCurrentDistance. I think it would be better, if possible, to rely on some property from within the DOM to check if the InfiniteLoading component is somewhere on the page instead of relying on anything from the Vue component lifecycle. I'm not even sure this is possible as I don't yet have a full grasp on how component caching works in Vue, but I'll try to reason about the issue when I have some more time. Let me know if you have any other thoughts about it.

[PeachScript]

It sounds interesting! I will think about this problem according to your thoughts, perhaps can solve the compatibility problem, keep in touch.

[PeachScript]

I found the key point in the source code of Vue.js, so I think we can use the _inactive private property to solve this problem, how do you think about it?

[stephantabor]

I'm having this issue still with the newest version (in fact worse after upgrading from 2.0.0 rc5)

My case is a little different though. I have a keep alive page with an infinite loader, and other router-views have infinite loaders as well. The loaders emitting events in the other pages are triggering my keep alive component's loader.

Here is a an example modified from your previous one:
https://jsfiddle.net/0nuojLdn/

I'm guessing it's because these are global events. Is there a current limitation of not being able to have two of these active at once?

I haven't looked too deeply at the source, but a quick solution might be to have the events keyed or to call this.$off in the deactivated hook for all of the events (second one wouldn't handle multiple per page though).

[duyhung85]

Hi,

I am not sure if this is the same problem that I have. I am using vue-inifinite-loading 2.1.1 and define router lazy loading
https://router.vuejs.org/en/advanced/lazy-loading.html

The $InfiniteLoading:loaded' event keeps getting called until my browser crash, never stops. I have to switch back to normal router without the lazy loading and everything's working fine.

[PeachScript]

@duyhung85 could you reproduce the problem on JSFiddle or other website like it?

[PeachScript]

@stephantabor sorry, I missed your comment, I will reply as soon as possible.

[PeachScript]

@stephantabor , the real reason is, this plugin always listen the scroll event, no matter it be activated or deactivated by keep-alive feature, so when we using it with keep-alive feature, and go to the route which contains this plugin, then go to another route and scroll down, this plugin will handle the needless scroll event and cause this problem.

I have released v2.1.3 to fix it, you can test it with this JSFiddle that base on yours.

Thanks for your feedback!

[duyhung85]

Hi @PeachScript ,

I updated to v2.1.3 as you suggested and it fixed my issue.

Thanks