render,
nextTick,
defineComponent,
- reactive
+ reactive,
+ serializeInner
} from '@vue/runtime-test'
// reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs
expect(refKey2.value).toBe(root.children[2])
expect(refKey3.value).toBe(root.children[3])
})
+
+ // #1505
+ test('reactive template ref in the same template', async () => {
+ const Comp = {
+ setup() {
+ const el = ref()
+ return { el }
+ },
+ render(this: any) {
+ return h('div', { id: 'foo', ref: 'el' }, this.el && this.el.props.id)
+ }
+ }
+
+ const root = nodeOps.createElement('div')
+ render(h(Comp), root)
+ // ref not ready on first render, but should queue an update immediately
+ expect(serializeInner(root)).toBe(`<div id="foo"></div>`)
+ await nextTick()
+ // ref should be updated
+ expect(serializeInner(root)).toBe(`<div id="foo">foo</div>`)
+ })
})
export const setRef = (
rawRef: VNodeNormalizedRef,
oldRawRef: VNodeNormalizedRef | null,
- parent: ComponentInternalInstance,
+ parentComponent: ComponentInternalInstance,
+ parentSuspense: SuspenseBoundary | null,
vnode: VNode | null
) => {
let value: ComponentPublicInstance | RendererNode | null
if (isString(oldRef)) {
refs[oldRef] = null
if (hasOwn(setupState, oldRef)) {
- setupState[oldRef] = null
+ queuePostRenderEffect(() => {
+ setupState[oldRef] = null
+ }, parentSuspense)
}
} else if (isRef(oldRef)) {
oldRef.value = null
if (isString(ref)) {
refs[ref] = value
if (hasOwn(setupState, ref)) {
- setupState[ref] = value
+ queuePostRenderEffect(() => {
+ setupState[ref] = value
+ }, parentSuspense)
}
} else if (isRef(ref)) {
ref.value = value
} else if (isFunction(ref)) {
- callWithErrorHandling(ref, parent, ErrorCodes.FUNCTION_REF, [value, refs])
+ callWithErrorHandling(ref, parentComponent, ErrorCodes.FUNCTION_REF, [
+ value,
+ refs
+ ])
} else if (__DEV__) {
warn('Invalid template ref type:', value, `(${typeof value})`)
}
// set ref
if (ref != null && parentComponent) {
- setRef(ref, n1 && n1.ref, parentComponent, n2)
+ setRef(ref, n1 && n1.ref, parentComponent, parentSuspense, n2)
}
}
} = vnode
// unset ref
if (ref != null && parentComponent) {
- setRef(ref, null, parentComponent, null)
+ setRef(ref, null, parentComponent, parentSuspense, null)
}
if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {