keep-alive组件的include中如果使用的是一个ref([])，并且延迟添加，会不起效，而且组件不能再次激活，绑定也会失效

[lejianwen]

Version

3.2.22

Reproduction link

codesandbox.io

Steps to reproduce

点击chang按钮，到tab2 组件， 再点change回来，onActivated不会触发，并且tab1中两个input绑定的同一个ref也会断开。
使用computed也必须注意要返回Array才行。

What is expected?

按道理应该点击回来tab1的onActivated会触发，并且绑定不会断开

What is actually happening?

onActivated不会触发，并且tab1中两个input绑定的同一个ref也断开了

---

include暂时不支持使用ref么？

[ygj6]

Maybe you could consider changing keeps.value = ["tab2"]; to keeps.value = ["tab1"]; as workaround.

setup() {
    const cn = ref("tab1");

    // use  ref
    const keeps = ref([]);
    keeps.value = ["tab2"];     -------------> keeps.value = ["tab1"]; 
    setTimeout(() => {
      keeps.value.push("tab1"); // fail
      // keeps.value = ["tab1", "tab2"]; //ok
    }, 500);

[edison1105]

as a workround

:include="[...keeps]"

include and exclude should not pass reactive data.
see https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watching-reactive-objects

the watch will not trigger if include is reactive. maybe we should improve this code:

    // prune cache on include/exclude prop change
    watch(
      () => [props.include, props.exclude],
      ([include, exclude]) => {
        include && pruneCache(name => matches(include, name))
        exclude && pruneCache(name => !matches(exclude, name))
      },
      // prune post-render after `current` has been updated
      { flush: 'post', deep: true }
    )

[LinusBorg]

Seems to me like it would trigger, because of deep: true being set: Playground

[lejianwen]

谢谢大家
只是感觉各种方式都有点绕，不太符合3.x的风格
@edison1105 的方式很简洁明了，我拿走了

[edison1105]

@lejianwen 这应该是个 bug，还没来得及调查，后面会修复的。
this should be a bug, beacuse tab1.vue is unmounted.

[liulinboyi]

This issue is fixed by commit.

[posva]

This is indeed fixed