perf: use sync watcher for defineModel local mode

ref https://github.com/vuejs/rfcs/discussions/503#discussioncomment-7566278

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 2c2f0d8326baae802ef4a65eea58e5bc94b0a108..76c5aef4eafc6f617e731451edb98eb0bf7a04fa 100644 (file)
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -31,7 +31,7 @@ import {
 import { warn } from './warning'
 import { SlotsType, StrictUnwrapSlotsType } from './componentSlots'
 import { Ref, ref } from '@vue/reactivity'
-import { watch } from './apiWatch'
+import { watch, watchSyncEffect } from './apiWatch'
 
 // dev only
 const warnRuntimeUsage = (method: string) =>
@@ -378,18 +378,20 @@ export function useModel(
 
   if (options && options.local) {
     const proxy = ref<any>(props[name])
+    watchSyncEffect(() => {
+      proxy.value = props[name]
+    })
 
     watch(
-      () => props[name],
-      v => (proxy.value = v)
+      proxy,
+      value => {
+        if (value !== props[name]) {
+          i.emit(`update:${name}`, value)
+        }
+      },
+      { flush: 'sync' }
     )
 
-    watch(proxy, value => {
-      if (value !== props[name]) {
-        i.emit(`update:${name}`, value)
-      }
-    })
-
     return proxy
   } else {
     return {