feat(templateRef): should work with direct reactive property
close #901
This commit is contained in:
parent
55b364decc
commit
449ab039fe
@ -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])
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
@ -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)) {
|
||||||
|
Loading…
Reference in New Issue
Block a user