fix(defineModel): correct update with multiple changes in same tick (#11430)

close #11429
This commit is contained in:
Tycho 2024-07-24 23:25:22 +08:00 committed by GitHub
parent 422ef34e48
commit a18f1ecf05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 12 deletions

View File

@ -614,24 +614,23 @@ describe('useModel', () => {
}) })
test('set no change value', async () => { test('set no change value', async () => {
let changeChildMsg: (() => void) | null = null let changeChildMsg!: (val: string) => void
const compRender = vi.fn() const setValue = vi.fn()
const Comp = defineComponent({ const Comp = defineComponent({
props: ['msg'], props: ['msg'],
emits: ['update:msg'], emits: ['update:msg'],
setup(props) { setup(props) {
const childMsg = useModel(props, 'msg') const childMsg = useModel(props, 'msg')
changeChildMsg = () => { changeChildMsg = (val: string) => (childMsg.value = val)
childMsg.value = childMsg.value
}
return () => { return () => {
return childMsg.value return childMsg.value
} }
}, },
}) })
const msg = ref('HI') const defaultVal = 'defaultVal'
const msg = ref(defaultVal)
const Parent = defineComponent({ const Parent = defineComponent({
setup() { setup() {
return () => return () =>
@ -639,7 +638,7 @@ describe('useModel', () => {
msg: msg.value, msg: msg.value,
'onUpdate:msg': val => { 'onUpdate:msg': val => {
msg.value = val msg.value = val
compRender() setValue()
}, },
}) })
}, },
@ -648,8 +647,14 @@ describe('useModel', () => {
const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
render(h(Parent), root) render(h(Parent), root)
expect(compRender).toBeCalledTimes(0) expect(setValue).toBeCalledTimes(0)
changeChildMsg!()
expect(compRender).toBeCalledTimes(0) changeChildMsg(defaultVal)
expect(setValue).toBeCalledTimes(0)
changeChildMsg('changed')
changeChildMsg(defaultVal)
expect(setValue).toBeCalledTimes(2)
expect(msg.value).toBe(defaultVal)
}) })
}) })

View File

@ -33,7 +33,7 @@ export function useModel(
const res = customRef((track, trigger) => { const res = customRef((track, trigger) => {
let localValue: any let localValue: any
let prevSetValue: any let prevSetValue: any = EMPTY_OBJ
let prevEmittedValue: any let prevEmittedValue: any
watchSyncEffect(() => { watchSyncEffect(() => {
@ -51,7 +51,10 @@ export function useModel(
}, },
set(value) { set(value) {
if (!hasChanged(value, localValue)) { if (
!hasChanged(value, localValue) &&
!(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))
) {
return return
} }
const rawProps = i.vnode!.props const rawProps = i.vnode!.props