mirror of https://github.com/vuejs/core.git
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { type ShallowRef, readonly, shallowRef } from '@vue/reactivity'
|
|
import { getCurrentInstance } from '../component'
|
|
import { warn } from '../warning'
|
|
import { EMPTY_OBJ } from '@vue/shared'
|
|
|
|
export const knownTemplateRefs: WeakSet<ShallowRef> = new WeakSet()
|
|
|
|
export function useTemplateRef<T = unknown, Keys extends string = string>(
|
|
key: Keys,
|
|
): Readonly<ShallowRef<T | null>> {
|
|
const i = getCurrentInstance()
|
|
const r = shallowRef(null)
|
|
if (i) {
|
|
const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs
|
|
const desc = Object.getOwnPropertyDescriptor(refs, key)
|
|
if (desc && !desc.configurable) {
|
|
if (__DEV__) {
|
|
warn(`useTemplateRef('${key}') already exists.`)
|
|
}
|
|
} else {
|
|
Object.defineProperty(refs, key, {
|
|
enumerable: true,
|
|
get: () => r.value,
|
|
set: val => (r.value = val),
|
|
})
|
|
}
|
|
} else if (__DEV__) {
|
|
warn(
|
|
`useTemplateRef() is called when there is no active component ` +
|
|
`instance to be associated with.`,
|
|
)
|
|
}
|
|
const ret = __DEV__ ? readonly(r) : r
|
|
if (__DEV__) {
|
|
knownTemplateRefs.add(ret)
|
|
}
|
|
return ret
|
|
}
|