Is it problematic to have duplicate template ref values, such as ref="foo"
, for the same type but different instances of a component across views in a Vue 3 application? Let's consider the following example pseudocode:
// ROUTE A
<template>
<MyTableComponent ref="foo" class="stylesForTable_ViewA"/>
</template>
<script setup>
import { ref } from "vue";
const foo = ref();
</script>
// ROUTE B (Will not be mounted simultaneously with View A)
<template>
<MyTableComponent ref="foo" class="stylesForTable_ViewB"/>
</template>
<script setup>
import { ref } from "vue";
const foo = ref();
</script>
When transitioning from View A to View B, will Vue's reactivity system detect the identical component type with the same ref
value and try to reuse the component instance from View A to construct View B?