vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.87k stars 402 forks source link

useTemplateRef finds unrelated references with same name #5009

Open ludwig801 opened 6 days ago

ludwig801 commented 6 days ago

Vue - Official extension or vue-tsc version

2.1.10

VSCode version

1.95.2

Vue version

3.5.12

TypeScript version

5.6.3

System Info

No response

package.json dependencies

No response

Steps to reproduce

Assume the following 2 SFC components in the project:

Component A

<template>
  <div ref="name"></div>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const name = useTemplateRef('name')
</script>

Component B

<template>
  <main ref="name"></main>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const name = useTemplateRef('name')
</script>

Notice that the elements have a ref with the value of "name". There are 2 issues:

  1. When performing "Find All References" on any of the "name" string, the system finds both references, even tough they are unrelated but for the name of the ref (see image below). image

  2. This is actually the worst issue: when renaming one of the strings, the other also gets renamed in the Githubissues.

  3. Githubissues is a development platform for aggregating issues.