Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(runtime-core):v-for ref behaves differently under prod and dev #6697 #6714

Merged
merged 9 commits into from Oct 14, 2022
Merged

fix(runtime-core):v-for ref behaves differently under prod and dev #6697 #6714

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
80fdddb
fix(runtime-core):v-for ref behaves differently under prod and dev #6697
baiwusanyu-c Sep 21, 2022
6c4b72a
fix(runtime-core):add unit test #6697
Sep 26, 2022
5386e02
Merge branch 'vuejs:main' into bwsy/fix/renderRef
baiwusanyu-c Sep 26, 2022
199bd20
Merge pull request #2 from baiwusanyu-c/main
baiwusanyu-c Sep 29, 2022
052eb8f
Merge branch 'vuejs:main' into bwsy/fix/renderRef
baiwusanyu-c Oct 3, 2022
b6b2abf
fix(runtime-core):format code #6697
baiwusanyu-c Oct 3, 2022
765f2be
Merge branch 'vuejs:main' into bwsy/fix/renderRef
baiwusanyu-c Oct 7, 2022
13b9b8b
fix(runtime-core):Modification method
Oct 8, 2022
02efd10
Update rendererTemplateRef.ts
yyx990803 Oct 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 46 additions & 0 deletions packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
View file
Open in desktop
Expand Up @@ -493,4 +493,50 @@ describe('api: template refs', () => {
await nextTick()
expect(mapRefs()).toMatchObject(['2', '3', '4'])
})

// #6697 v-for ref behaves differently under production and development
test('named ref in v-for , should be responsive when rendering', async () => {
const list = ref([1, 2, 3])
const listRefs = ref([])
const App = {
setup() {
return { listRefs }
},
render() {
return h('div', null, [
h('div', null, String(listRefs.value)),
h(
'ul',
list.value.map(i =>
h(
'li',
{
ref: 'listRefs',
ref_for: true
},
i
)
)
)
])
}
}
const root = nodeOps.createElement('div')
render(h(App), root)

await nextTick()
expect(String(listRefs.value)).toBe(
'[object Object],[object Object],[object Object]'
)
expect(serializeInner(root)).toBe(
'<div><div>[object Object],[object Object],[object Object]</div><ul><li>1</li><li>2</li><li>3</li></ul></div>'
)

list.value.splice(0, 1)
await nextTick()
expect(String(listRefs.value)).toBe('[object Object],[object Object]')
expect(serializeInner(root)).toBe(
'<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>'
)
})
})
5 changes: 3 additions & 2 deletions packages/runtime-core/src/rendererTemplateRef.ts
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@ import {
import { isAsyncWrapper } from './apiAsyncComponent'
import { getExposeProxy } from './component'
import { warn } from './warning'
import { isRef } from '@vue/reactivity'
import { isRef, reactive } from '@vue/reactivity'
import { callWithErrorHandling, ErrorCodes } from './errorHandling'
import { SchedulerJob } from './scheduler'
import { queuePostRenderEffect } from './renderer'
Expand Down Expand Up @@ -61,7 +61,8 @@ export function setRef(
return
}
const oldRef = oldRawRef && (oldRawRef as VNodeNormalizedRefAtom).r
const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs
const refs =
owner.refs === EMPTY_OBJ ? (owner.refs = reactive({})) : owner.refs
Copy link
Member

Choose a reason for hiding this comment

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

I don't think this is the right fix. "Options API" refs haven't been reactive in Vue 2 or Vue 3. The only way to get a reactive ref is through using a an actual ref()/reactive() object like in the reported issue.

const setupState = owner.setupState

// dynamic ref changed. unset old ref
Expand Down