Skip to content

Commit

Permalink
feat(templateRef): should work with direct reactive property
Browse files Browse the repository at this point in the history
close #901
  • Loading branch information
yyx990803 committed Mar 31, 2020
1 parent 55b364d commit 449ab03
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 11 deletions.
21 changes: 20 additions & 1 deletion packages/runtime-core/__tests__/apiTemplateRef.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
render,
nextTick,
Ref,
defineComponent
defineComponent,
reactive
} from '@vue/runtime-test'

// reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs
Expand Down Expand Up @@ -200,4 +201,22 @@ describe('api: template refs', () => {

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])
})
})
18 changes: 8 additions & 10 deletions packages/runtime-core/src/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ import {
isFunction,
PatchFlags,
ShapeFlags,
NOOP
NOOP,
hasOwn
} from '@vue/shared'
import {
queueJob,
Expand All @@ -45,7 +46,6 @@ import {
stop,
ReactiveEffectOptions,
isRef,
toRaw,
DebuggerEvent
} from '@vue/reactivity'
import { resolveProps } from './componentProps'
Expand Down Expand Up @@ -1859,27 +1859,25 @@ function baseCreateRenderer(
}
const oldRef = oldRawRef && oldRawRef[1]
const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs
const renderContext = toRaw(owner.renderContext)
const renderContext = owner.renderContext

// unset old ref
if (oldRef != null && oldRef !== ref) {
if (isString(oldRef)) {
refs[oldRef] = null
const oldSetupRef = renderContext[oldRef]
if (isRef(oldSetupRef)) {
oldSetupRef.value = null
if (hasOwn(renderContext, oldRef)) {
renderContext[oldRef] = null
}
} else if (isRef(oldRef)) {
oldRef.value = null
}
}

if (isString(ref)) {
const setupRef = renderContext[ref]
if (isRef(setupRef)) {
setupRef.value = value
}
refs[ref] = value
if (hasOwn(renderContext, ref)) {
renderContext[ref] = value
}
} else if (isRef(ref)) {
ref.value = value
} else if (isFunction(ref)) {
Expand Down

2 comments on commit 449ab03

@yyx990803
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/cc @jods4

@jods4
Copy link
Contributor

@jods4 jods4 commented on 449ab03 Mar 31, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yyx990803 great, that's the change I was thinking of in the closed issue!
I don't know what made you change your mind but this will be a lot more intuitive and natural to use with the Composition API!
Thanks ❤️

Please sign in to comment.