-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(runtime-core): setRef should not update setupState's TemplateRef #11810
Conversation
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-ssr
@vue/reactivity
@vue/runtime-dom
@vue/runtime-core
@vue/server-renderer
@vue/shared
vue
@vue/compat
@vue/compiler-sfc
commit: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm wondering if this usage is correct. The information given in the documentation seems to be more inclined to the ref binding string being passed as a parameter to useTemplateRef, rather than binding the return value of useTemplateRef to the ref attribute.
const inputRef = useTemplateRef('my-ref')
<input ref="my-ref"/>
const inputRef = useTemplateRef('my-ref')
<input ref="inputRef"/>
https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
wdyt ? @edison1105
@@ -940,6 +940,11 @@ export function handleSetupResult( | |||
} | |||
instance.setupState = proxyRefs(setupResult) | |||
if (__DEV__) { | |||
// dev only | |||
Object.defineProperty(setupResult, '__v__setupResult', { | |||
enumerable: false, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the default value of enumerable
is false
. so this line is unnecessary.
return { | ||
[key]: tRef, | ||
['foo']: foo, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
['foo']: foo, | |
foo, |
@@ -8,6 +8,8 @@ export function useTemplateRef<T = unknown, Keys extends string = string>( | |||
): Readonly<ShallowRef<T | null>> { | |||
const i = getCurrentInstance() | |||
const r = shallowRef(null) | |||
// @ts-expect-error | |||
r.__v__TemplateRef = true |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
r.__v__TemplateRef = true | |
if(__DEV__) r.__v__TemplateRef = true |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried to modify it like this before, but it caused the problem mentioned in #11816
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@baiwusanyu-c |
Thanks for catching these cases - the raw ref case does happen when:
Users won't manually write code like this but it can happen due to the behavior of old template ref usage. So we still need to cover this case. |
close #11808
close #11816