What are the possible pitfalls of reusing template ref values in Vue 3?-CodePudding

Are there any issues with duplicating template ref values, ie ref="foo", on the same type, but different instances, of a component across views in a Vue 3 app? Consider the example pseudocode below:

// ROUTE A
<template>
  <MyTableComponent ref="foo" />
</template>

<script setup>
  import { ref } from "vue";
  const foo = ref();
</script>

// ROUTE B (Never mounted at the same time as View A)
<template>
  <MyTableComponent ref="foo" />
</template>

<script setup>
  import { ref } from "vue";
  const foo = ref();
</script>

In navigating from View A to View B, will Vue's reactivity system notice the same component type with the same ref value and attempt to construct View B by reusing the component instance in View A?

CodePudding user response：

In navigating from View A to View B, will Vue's reactivity system notice the same component type with the same ref value and attempt to construct View B by reusing the component instance in View A?

No, template refs are not shared between instances of the same component or across component boundaries. A new template ref (i.e., foo in this case) is created for each component instance: one for view A, and another for view B.