API support for removing stale keep-alive (inactive) components

What problem does this feature solve?

I have a large, nested tree of components built from a data schema. Some of the containing components have keep-alive set for easy type switching.

When the tree changes, all child components all the way down the tree change (are destroyed and rebuilt according to the new data), but the keep-alive components stay around even though they are now most likely completely useless. Imagine a schema-built interface with the schema changing, or a filesystem tree after changing to a totally different path or server.

I would like to destroy all inactive components when the tree changes. I can run over Vnodes myself and check for the _inactive property, but this is a private property.

So this is a request for either a clear, approved way to identify inactive keep-alive child components or a way to clear the whole cache.

I’m also happy with a reply along the lines of “just use _inactive” or any other better way to handle this particular situation given what is available in the API.

What does the proposed API look like?

(I admit not being very familiar with the Vue codebase.)

Either expose a public vm.inactive and vm.isKeepAlive to check for keep-alive components or a vm.destroy_inactive() method. Maybe there could be a filter method on vm.$children to select specific children, such as keep-alive, inactive, functional or any other _is... state; this would then hide implementation details such as private booleans.

[wvh]

I have solved this problem (I think) by making sure I have an outer component that is taken out of the rendering sequence with v-if and has a :key set.

When I load a new resource or create a new one, I temporarily stop rendering the UI with something like this (pseudo-code):

<div id="application">
  <div id="editor" v-if="!loading" :key="counter">
    <keep-alive>
      <inner-components/>
    </keep-alive>
  </div>
</div>

… when you take the component out of rendering with v-if or change the :key, the instance of that component gets destroyed, including all its children, and the cache gets cleared.

It’s true the application could end up with some stale components when the user edits one resource for a long time – creating and deleting components – but at least that keep-alive cache should get cleared when the user opens a new or existing resource and the application destroys the inner editor component.

When I posted this request, I did not really grasp that v-if and :key can destroy components and hence their children, and that keep-alive is really just a component, obeying the same rules.

If you make sure there’s something on the outside of your keep-alive component that can take it out of the rendering every once in a while and “garbage collect” it, it will probably work fine for a lot of use cases.

[posva]

I still think there’s nothing new to add (the use case must be clear). Allowing to imperatively reset the keep-alive component cache really looks like a bad usage and goes against declarative rendering. About your last example, you can reset it by using a key attribute on the keep-alive component