fix(runtime-core): parent-child component value synchronization

packages/runtime-core/__tests__/helpers/useModel.spec.ts

@@ -514,16 +514,24 @@ describe('useModel', () => {
  expect(serializeInner(root)).toBe('hmm')
  // parent should get uppercase value
  expect(msg.value).toBe('HMM')
+ expect(compRender).toBeCalledTimes(2)
 
  // parent update
  msg.value = 'Ughh'
  await nextTick()
  expect(serializeInner(root)).toBe('ughh')
  expect(msg.value).toBe('Ughh')
+ expect(compRender).toBeCalledTimes(3)
 
  // child update again
  childMsg!.value = 'ughh'
  await nextTick()
  expect(msg.value).toBe('UGHH')
+ expect(compRender).toBeCalledTimes(4)
+
+ childMsg!.value = 'Ughh'
+ await nextTick()
+ expect(msg.value).toBe('UGHH')
+ expect(compRender).toBeCalledTimes(5)
  })
 })

packages/runtime-core/src/helpers/useModel.ts

@@ -1,5 +1,12 @@
 import { type Ref, customRef, ref } from '@vue/reactivity'
-import { EMPTY_OBJ, camelize, hasChanged, hyphenate } from '@vue/shared'
+import {
+ EMPTY_OBJ,
+ camelize,
+ hasChanged,
+ hyphenate,
+ isString,
+ looseToNumber,
+} from '@vue/shared'
 import type { DefineModelOptions, ModelRef } from '../apiSetupHelpers'
 import { getCurrentInstance } from '../component'
 import { warn } from '../warning'
@@ -30,6 +37,9 @@ export function useModel(
  const camelizedName = camelize(name)
  const hyphenatedName = hyphenate(name)
 
+ const modifierKey =
+ name === 'modelValue' ? 'modelModifiers' : `${name}Modifiers`
+
  const res = customRef((track, trigger) => {
  let localValue: any
  watchSyncEffect(() => {
@@ -46,6 +56,7 @@ export function useModel(
  },
  set(value) {
  const rawProps = i.vnode!.props
+ let newValue = options.set ? options.set(value) : value
  if (
  !(
  rawProps &&
@@ -61,15 +72,33 @@ export function useModel(
  ) {
  localValue = value
  trigger()
+ } else {
+ if (rawProps) {
+ const { trim, number } = rawProps[modifierKey] ?? EMPTY_OBJ
+ if (trim) {
+ newValue = isString(newValue) ? newValue.trim() : newValue
+ }
+ if (number) {
+ newValue = looseToNumber(newValue)
+ }
+ const rawValue =
+ rawProps[name] ??
+ rawProps[camelizedName] ??
+ rawProps[hyphenatedName]
+ if (
+ hasChanged(value, localValue) &&
+ !hasChanged(newValue, rawValue)
+ ) {
+ localValue = newValue
+ trigger()
+ }
+ }
  }
- i.emit(`update:${name}`, options.set ? options.set(value) : value)
+ i.emit(`update:${name}`, newValue)
  },
  }
  })
 
- const modifierKey =
- name === 'modelValue' ? 'modelModifiers' : `${name}Modifiers`
-
  // @ts-expect-error
  res[Symbol.iterator] = () => {
  let i = 0