dx(useTemplateRef): warn when declaring with the same key

[jh-leong]

Declaring useTemplateRef with the same key multiple times results in a TypeError: Cannot redefine property: xxx at runtime, see playground

---

There's another issue: in dev mode, the useTemplateRef returned value is readonly:

return (__DEV__ ? readonly(r) : r) as any

When a variable declared with useTemplateRef has the same name as a template ref, a readonly warning appears, see playground.

To avoid this issue, it seems that we need to check if setupState[ref] is readonly before setting its value every time in rendererTemplateRef.ts.

I'm not sure if this is worth it. Maybe we should only limit the readonly return type at the type level?

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	95.3 kB (+5.21 kB)	36.3 kB (+1.81 kB)	32.7 kB (+1.6 kB)
vue.global.prod.js	153 kB (+6.18 kB)	56.1 kB (+2.08 kB)	49.9 kB (+1.86 kB)

Usages

Name	Size	Gzip	Brotli
createApp	53 kB (+3.33 kB)	20.6 kB (+1.1 kB)	18.8 kB (+978 B)
createSSRApp	56.9 kB (+3.71 kB)	22.2 kB (+1.25 kB)	20.2 kB (+1.11 kB)
defineCustomElement	55.2 kB (+3.33 kB)	21.4 kB (+1.14 kB)	19.4 kB (+986 B)
overall	66.5 kB (+3.38 kB)	25.6 kB (+1.11 kB)	23.3 kB (+1.05 kB)

[jh-leong]

I noticed an edge case where useTemplateRef can produce unexpected results when a ref is associated with the same ref attribute. This issue sometimes results in undefined, depending on the execution environment (dev or prod); related to #11373 comment.

A reproduction of the issue in this playground. Click the button to switch between DEV and PROD modes and check the console for output.

Do we need to modify the refs update logic, or perhaps document this difference?