Is there any property on components to determine whether they're nested inside KeepAlive?

[samueleiche]

In Vue 2.x I could determine if they are nested in KeepAlive when _inactive wasn't null.

const isKeptAlive = (instance) => {
	return instance._inactive === null ? false : true
}

One solution that probably would work would be to iterate over the parent components until I find KeepAlive, But I'm hoping for a nicer solution.

[chenxch]

You can use the onActivated statement cycle to judge.
demo

[samueleiche]

Hmm, not the answer I was looking for but it did inspire me, thanks.

[samueleiche]

I see now that the composable path is the way to go using the activated/deactivated hooks.

export function useDeactivated() {
    const isDeactivated = ref(false)

    if (getCurrentInstance()) {
        onDeactivated(() => {
            isDeactivated.value = true
        })

        onActivated(() => {
            isDeactivated.value = false
        })
    }

    return isDeactivated
}

setup() {
    const isDeactivated = useDeactivated()

    return {
        isDeactivated
    }
},

[edison1105]

maybe this can help

const isKeptAlive = (instance) => {
	return instance.vnode.shapeFlag & 256 // 256 is ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
}

[samueleiche]

Thanks for your reply. I was looking into the KeepAlive ShapeFlags earlier but couldn't wrap my mind around them.

Unfortunately that doesn't seem to work demo. In the example, the shapeFlags do change depending on if they are in KeepAlive or not. But from the code you provided they both evaluate to 0.

[edison1105]

Ok, I made a mistake. It should be 256 // 256: ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE.

[samueleiche]

That seems to work for the root component inside KeepAlive, but it doesn't work for other components in the KeepAlive cache tree.