feat(templateRef): should work with direct reactive property

close #901
This commit is contained in:
Evan You 2020-03-31 10:35:49 -04:00
parent 55b364decc
commit 449ab039fe
2 changed files with 28 additions and 11 deletions

View File

@ -5,7 +5,8 @@ import {
render, render,
nextTick, nextTick,
Ref, Ref,
defineComponent defineComponent,
reactive
} from '@vue/runtime-test' } from '@vue/runtime-test'
// reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs // reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs
@ -200,4 +201,22 @@ describe('api: template refs', () => {
expect(spy).toHaveBeenCalledWith('div') expect(spy).toHaveBeenCalledWith('div')
}) })
it('should work with direct reactive property', () => {
const root = nodeOps.createElement('div')
const state = reactive({
refKey: null
})
const Comp = {
setup() {
return state
},
render() {
return h('div', { ref: 'refKey' })
}
}
render(h(Comp), root)
expect(state.refKey).toBe(root.children[0])
})
}) })

View File

@ -32,7 +32,8 @@ import {
isFunction, isFunction,
PatchFlags, PatchFlags,
ShapeFlags, ShapeFlags,
NOOP NOOP,
hasOwn
} from '@vue/shared' } from '@vue/shared'
import { import {
queueJob, queueJob,
@ -45,7 +46,6 @@ import {
stop, stop,
ReactiveEffectOptions, ReactiveEffectOptions,
isRef, isRef,
toRaw,
DebuggerEvent DebuggerEvent
} from '@vue/reactivity' } from '@vue/reactivity'
import { resolveProps } from './componentProps' import { resolveProps } from './componentProps'
@ -1859,15 +1859,14 @@ function baseCreateRenderer(
} }
const oldRef = oldRawRef && oldRawRef[1] const oldRef = oldRawRef && oldRawRef[1]
const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs
const renderContext = toRaw(owner.renderContext) const renderContext = owner.renderContext
// unset old ref // unset old ref
if (oldRef != null && oldRef !== ref) { if (oldRef != null && oldRef !== ref) {
if (isString(oldRef)) { if (isString(oldRef)) {
refs[oldRef] = null refs[oldRef] = null
const oldSetupRef = renderContext[oldRef] if (hasOwn(renderContext, oldRef)) {
if (isRef(oldSetupRef)) { renderContext[oldRef] = null
oldSetupRef.value = null
} }
} else if (isRef(oldRef)) { } else if (isRef(oldRef)) {
oldRef.value = null oldRef.value = null
@ -1875,11 +1874,10 @@ function baseCreateRenderer(
} }
if (isString(ref)) { if (isString(ref)) {
const setupRef = renderContext[ref]
if (isRef(setupRef)) {
setupRef.value = value
}
refs[ref] = value refs[ref] = value
if (hasOwn(renderContext, ref)) {
renderContext[ref] = value
}
} else if (isRef(ref)) { } else if (isRef(ref)) {
ref.value = value ref.value = value
} else if (isFunction(ref)) { } else if (isFunction(ref)) {