Skip to content

Commit fe53248

Browse files
baiwusanyu-czhangzhonghe
authored andcommitted
fix(runtime-core): fix v-for ref reactivity behavior difference between prod and dev (vuejs#6714)
fix vuejs#6697
1 parent 83ff2ef commit fe53248

File tree

2 files changed

+51
-1
lines changed

2 files changed

+51
-1
lines changed

Diff for: packages/runtime-core/__tests__/rendererTemplateRef.spec.ts

+46
Original file line numberDiff line numberDiff line change
@@ -493,4 +493,50 @@ describe('api: template refs', () => {
493493
await nextTick()
494494
expect(mapRefs()).toMatchObject(['2', '3', '4'])
495495
})
496+
497+
// #6697 v-for ref behaves differently under production and development
498+
test('named ref in v-for , should be responsive when rendering', async () => {
499+
const list = ref([1, 2, 3])
500+
const listRefs = ref([])
501+
const App = {
502+
setup() {
503+
return { listRefs }
504+
},
505+
render() {
506+
return h('div', null, [
507+
h('div', null, String(listRefs.value)),
508+
h(
509+
'ul',
510+
list.value.map(i =>
511+
h(
512+
'li',
513+
{
514+
ref: 'listRefs',
515+
ref_for: true
516+
},
517+
i
518+
)
519+
)
520+
)
521+
])
522+
}
523+
}
524+
const root = nodeOps.createElement('div')
525+
render(h(App), root)
526+
527+
await nextTick()
528+
expect(String(listRefs.value)).toBe(
529+
'[object Object],[object Object],[object Object]'
530+
)
531+
expect(serializeInner(root)).toBe(
532+
'<div><div>[object Object],[object Object],[object Object]</div><ul><li>1</li><li>2</li><li>3</li></ul></div>'
533+
)
534+
535+
list.value.splice(0, 1)
536+
await nextTick()
537+
expect(String(listRefs.value)).toBe('[object Object],[object Object]')
538+
expect(serializeInner(root)).toBe(
539+
'<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>'
540+
)
541+
})
496542
})

Diff for: packages/runtime-core/src/rendererTemplateRef.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,11 @@ export function setRef(
8484
if (_isString || _isRef) {
8585
const doSet = () => {
8686
if (rawRef.f) {
87-
const existing = _isString ? refs[ref] : ref.value
87+
const existing = _isString
88+
? hasOwn(setupState, ref)
89+
? setupState[ref]
90+
: refs[ref]
91+
: ref.value
8892
if (isUnmount) {
8993
isArray(existing) && remove(existing, refValue)
9094
} else {

0 commit comments

Comments
 (0)