fix: process some keys for el[key] in hydration mismatch

packages/runtime-core/__tests__/hydration.spec.ts

@@ -1489,5 +1489,10 @@ describe('SSR hydration', () => {
       mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
       expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
     })
+
+    test('attr need to be processed mismatch', () => {
+      mountWithHydration(`<input />`, () => h('input', { readonly: false }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
   })
 })

packages/runtime-core/src/hydration.ts

@@ -755,10 +755,11 @@ function propHasMismatch(
     (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
   ) {
     // #10000 some attrs such as textarea.value can't be get by `hasAttribute`
+    const processedKey = getProcessedKey(key)
     actual = el.hasAttribute(key)
       ? el.getAttribute(key)
-      : key in el
-        ? el[key as keyof typeof el]
+      : processedKey in el
+        ? el[processedKey as keyof typeof el]
         : ''
     expected = isBooleanAttr(key)
       ? includeBooleanAttr(clientValue)
@@ -830,3 +831,12 @@ function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
   }
   return true
 }
+
+// Some keys need to be processed before they can be obtained by el[key]
+// #10057 such as: readonly => readOnly
+function getProcessedKey(key: string) {
+  if (key === 'readonly') {
+    return 'readOnly'
+  }
+  return key
+}