From bf0ab3872cf8969c3fbffa65ee6d3c8e3558ed34 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sun, 17 Nov 2024 21:55:34 +0800
Subject: [PATCH 1/5] perf(runtime-vapor): use setAttr for attributes that must
 be set as attirbute

---
 .../__snapshots__/vBind.spec.ts.snap          | 40 ++++++++++++++++
 .../__tests__/transforms/vBind.spec.ts        | 28 +++++++++++
 .../compiler-vapor/src/generators/prop.ts     |  5 +-
 packages/compiler-vapor/src/ir/index.ts       |  1 +
 .../src/transforms/transformElement.ts        |  1 +
 packages/runtime-vapor/src/dom/prop.ts        | 38 +--------------
 packages/shared/src/domAttrConfig.ts          | 46 +++++++++++++++++++
 7 files changed, 122 insertions(+), 37 deletions(-)

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
index 5e1e43c88..09e944f84 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
@@ -121,6 +121,46 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler v-bind > attributes must be set as attribute 1`] = `
+"import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+const t1 = _template("<input>")
+const t2 = _template("<textarea></textarea>")
+const t3 = _template("<img>")
+const t4 = _template("<video></video>")
+const t5 = _template("<canvas></canvas>")
+const t6 = _template("<source>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  const n1 = t1()
+  const n2 = t2()
+  const n3 = t3()
+  const n4 = t4()
+  const n5 = t5()
+  const n6 = t6()
+  _renderEffect(() => _setAttr(n0, "spellcheck", _ctx.spellcheck))
+  _renderEffect(() => _setAttr(n0, "draggable", _ctx.draggable))
+  _renderEffect(() => _setAttr(n0, "translate", _ctx.translate))
+  _renderEffect(() => _setAttr(n0, "form", _ctx.form))
+  _renderEffect(() => _setAttr(n1, "list", _ctx.list))
+  _renderEffect(() => _setAttr(n2, "type", _ctx.type))
+  _renderEffect(() => {
+    _setAttr(n3, "width", _ctx.width)
+    _setAttr(n4, "width", _ctx.width)
+    _setAttr(n5, "width", _ctx.width)
+    _setAttr(n6, "width", _ctx.width)
+  })
+  _renderEffect(() => {
+    _setAttr(n3, "height", _ctx.height)
+    _setAttr(n4, "height", _ctx.height)
+    _setAttr(n5, "height", _ctx.height)
+    _setAttr(n6, "height", _ctx.height)
+  })
+  return [n0, n1, n2, n3, n4, n5, n6]
+}"
+`;
+
 exports[`compiler v-bind > basic 1`] = `
 "import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
index 0097d0b7c..fd9d81e21 100644
--- a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
@@ -526,4 +526,32 @@ describe('compiler v-bind', () => {
     expect(code).contains('renderEffect')
     expect(code).contains('_setAttr(n0, "foo-bar", _ctx.fooBar, true)')
   })
+
+  test('attributes must be set as attribute', () => {
+    const { code } = compileWithVBind(`
+          <div :spellcheck :draggable :translate :form />
+          <input :list="list" />
+          <textarea :type="type" />
+          <img :width="width" :height="height"/>
+          <video :width="width" :height="height"/>
+          <canvas :width="width" :height="height"/>
+          <source :width="width" :height="height"/>
+      `)
+
+    expect(code).matchSnapshot()
+    expect(code).contains('_setAttr(n0, "spellcheck", _ctx.spellcheck)')
+    expect(code).contains('_setAttr(n0, "draggable", _ctx.draggable)')
+    expect(code).contains('_setAttr(n0, "translate", _ctx.translate)')
+    expect(code).contains('_setAttr(n0, "form", _ctx.form)')
+    expect(code).contains('_setAttr(n1, "list", _ctx.list)')
+    expect(code).contains('_setAttr(n2, "type", _ctx.type)')
+    expect(code).contains('_setAttr(n3, "width", _ctx.width)')
+    expect(code).contains('_setAttr(n3, "height", _ctx.height)')
+    expect(code).contains('_setAttr(n4, "width", _ctx.width)')
+    expect(code).contains('_setAttr(n4, "height", _ctx.height)')
+    expect(code).contains('_setAttr(n5, "width", _ctx.width)')
+    expect(code).contains('_setAttr(n5, "height", _ctx.height)')
+    expect(code).contains('_setAttr(n6, "width", _ctx.width)')
+    expect(code).contains('_setAttr(n6, "height", _ctx.height)')
+  })
 })
diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
index 120aa3733..fdab2d204 100644
--- a/packages/compiler-vapor/src/generators/prop.ts
+++ b/packages/compiler-vapor/src/generators/prop.ts
@@ -21,7 +21,7 @@ import {
   genCall,
   genMulti,
 } from './utils'
-import { toHandlerKey } from '@vue/shared'
+import { shouldSetAsAttr, toHandlerKey } from '@vue/shared'
 
 // only the static key prop will reach here
 export function genSetProp(
@@ -31,6 +31,7 @@ export function genSetProp(
   const { vaporHelper } = context
   const {
     prop: { key, values, modifier },
+    tag,
   } = oper
 
   const keyName = key.content
@@ -45,6 +46,8 @@ export function genSetProp(
     omitKey = true
   } else if (modifier) {
     helperName = modifier === '.' ? 'setDOMProp' : 'setAttr'
+  } else if (shouldSetAsAttr(tag.toUpperCase(), keyName)) {
+    helperName = 'setAttr'
   } else {
     helperName = 'setDynamicProp'
   }
diff --git a/packages/compiler-vapor/src/ir/index.ts b/packages/compiler-vapor/src/ir/index.ts
index 8b887e924..697ccbc5c 100644
--- a/packages/compiler-vapor/src/ir/index.ts
+++ b/packages/compiler-vapor/src/ir/index.ts
@@ -95,6 +95,7 @@ export interface SetPropIRNode extends BaseIRNode {
   element: number
   prop: IRProp
   root: boolean
+  tag: string
 }
 
 export interface SetDynamicPropsIRNode extends BaseIRNode {
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index 3356a1d77..51f0e427e 100644
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -210,6 +210,7 @@ function transformNativeElement(
           element: context.reference(),
           prop,
           root: singleRoot,
+          tag,
         })
       }
     }
diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
index 48d95173e..d19fffcf4 100644
--- a/packages/runtime-vapor/src/dom/prop.ts
+++ b/packages/runtime-vapor/src/dom/prop.ts
@@ -7,6 +7,7 @@ import {
   isString,
   normalizeClass,
   normalizeStyle,
+  shouldSetAsAttr,
   toDisplayString,
 } from '@vue/shared'
 import { warn } from '../warning'
@@ -242,45 +243,10 @@ function shouldSetAsProp(
     return false
   }
 
-  // these are enumerated attrs, however their corresponding DOM properties
-  // are actually booleans - this leads to setting it with a string "false"
-  // value leading it to be coerced to `true`, so we need to always treat
-  // them as attributes.
-  // Note that `contentEditable` doesn't have this problem: its DOM
-  // property is also enumerated string values.
-  if (key === 'spellcheck' || key === 'draggable' || key === 'translate') {
+  if (shouldSetAsAttr(el.tagName, key)) {
     return false
   }
 
-  // #1787, #2840 form property on form elements is readonly and must be set as
-  // attribute.
-  if (key === 'form') {
-    return false
-  }
-
-  // #1526 <input list> must be set as attribute
-  if (key === 'list' && el.tagName === 'INPUT') {
-    return false
-  }
-
-  // #2766 <textarea type> must be set as attribute
-  if (key === 'type' && el.tagName === 'TEXTAREA') {
-    return false
-  }
-
-  // #8780 the width or height of embedded tags must be set as attribute
-  if (key === 'width' || key === 'height') {
-    const tag = el.tagName
-    if (
-      tag === 'IMG' ||
-      tag === 'VIDEO' ||
-      tag === 'CANVAS' ||
-      tag === 'SOURCE'
-    ) {
-      return false
-    }
-  }
-
   // native onclick with string value, must be set as attribute
   if (isNativeOn(key) && isString(value)) {
     return false
diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts
index b5f016632..7440206ee 100644
--- a/packages/shared/src/domAttrConfig.ts
+++ b/packages/shared/src/domAttrConfig.ts
@@ -152,3 +152,49 @@ export function isRenderableAttrValue(value: unknown): boolean {
   const type = typeof value
   return type === 'string' || type === 'number' || type === 'boolean'
 }
+
+/*
+ * The following attributes must be set as attribute
+ */
+export function shouldSetAsAttr(tagName: string, key: string): boolean {
+  // these are enumerated attrs, however their corresponding DOM properties
+  // are actually booleans - this leads to setting it with a string "false"
+  // value leading it to be coerced to `true`, so we need to always treat
+  // them as attributes.
+  // Note that `contentEditable` doesn't have this problem: its DOM
+  // property is also enumerated string values.
+  if (key === 'spellcheck' || key === 'draggable' || key === 'translate') {
+    return true
+  }
+
+  // #1787, #2840 form property on form elements is readonly and must be set as
+  // attribute.
+  if (key === 'form') {
+    return true
+  }
+
+  // #1526 <input list> must be set as attribute
+  if (key === 'list' && tagName === 'INPUT') {
+    return true
+  }
+
+  // #2766 <textarea type> must be set as attribute
+  if (key === 'type' && tagName === 'TEXTAREA') {
+    return true
+  }
+
+  // #8780 the width or height of embedded tags must be set as attribute
+  if (key === 'width' || key === 'height') {
+    const tag = tagName
+    if (
+      tag === 'IMG' ||
+      tag === 'VIDEO' ||
+      tag === 'CANVAS' ||
+      tag === 'SOURCE'
+    ) {
+      return true
+    }
+  }
+
+  return false
+}

From 90e5a8c7af5b1a15dc3d3febf158f67d545c52af Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sun, 17 Nov 2024 22:17:13 +0800
Subject: [PATCH 2/5] test: update format

---
 .../__tests__/transforms/vBind.spec.ts         | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
index cbce22587..04b2a5627 100644
--- a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
@@ -529,14 +529,14 @@ describe('compiler v-bind', () => {
 
   test('attributes must be set as attribute', () => {
     const { code } = compileWithVBind(`
-          <div :spellcheck :draggable :translate :form />
-          <input :list="list" />
-          <textarea :type="type" />
-          <img :width="width" :height="height"/>
-          <video :width="width" :height="height"/>
-          <canvas :width="width" :height="height"/>
-          <source :width="width" :height="height"/>
-      `)
+      <div :spellcheck :draggable :translate :form />
+      <input :list="list" />
+      <textarea :type="type" />
+      <img :width="width" :height="height"/>
+      <video :width="width" :height="height"/>
+      <canvas :width="width" :height="height"/>
+      <source :width="width" :height="height"/>
+    `)
 
     expect(code).matchSnapshot()
     expect(code).contains('_setAttr(n0, "spellcheck", _ctx.spellcheck)')
@@ -554,7 +554,7 @@ describe('compiler v-bind', () => {
     expect(code).contains('_setAttr(n6, "width", _ctx.width)')
     expect(code).contains('_setAttr(n6, "height", _ctx.height)')
   })
-  
+
   test('number value', () => {
     const { code } = compileWithVBind(`<Comp :depth="0" />`)
     expect(code).matchSnapshot()

From 649a937c6ec3d377e7ac8de723b2064e279989ff Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Mon, 18 Nov 2024 10:12:34 +0800
Subject: [PATCH 3/5] chore: use setDOMProp for global attributes

---
 .../__snapshots__/compile.spec.ts.snap        |  8 +--
 .../__snapshots__/vBind.spec.ts.snap          | 54 +++++++++++++++++--
 .../__snapshots__/vOnce.spec.ts.snap          |  8 +--
 .../__tests__/transforms/vBind.spec.ts        | 43 ++++++++++++++-
 .../compiler-vapor/src/generators/prop.ts     | 17 +++++-
 packages/shared/src/domAttrConfig.ts          | 27 ++++++++++
 6 files changed, 142 insertions(+), 15 deletions(-)

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index efb33e64d..bc827dd73 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -151,7 +151,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 `;
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
-"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
 const t1 = _template("<div></div>")
 
@@ -162,7 +162,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n1 = _createComponent(_component_Comp)
   const n2 = _createTextNode(() => [_ctx.bar])
   _insert([n1, n2], n3)
-  _renderEffect(() => _setDynamicProp(n3, "id", _ctx.foo))
+  _renderEffect(() => _setDOMProp(n3, "id", _ctx.foo))
   return [n0, n3]
 }"
 `;
@@ -177,7 +177,7 @@ export function render(_ctx) {
 `;
 
 exports[`compile > dynamic root nodes and interpolation 1`] = `
-"import { delegate as _delegate, setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
+"import { delegate as _delegate, setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, setDOMProp as _setDOMProp, delegateEvents as _delegateEvents, template as _template } from 'vue/vapor';
 const t0 = _template("<button></button>")
 _delegateEvents("click")
 
@@ -186,7 +186,7 @@ export function render(_ctx) {
   _delegate(n0, "click", () => _ctx.handleClick)
   _setInheritAttrs(["id"])
   _renderEffect(() => _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count))
-  _renderEffect(() => _setDynamicProp(n0, "id", _ctx.count, true))
+  _renderEffect(() => _setDOMProp(n0, "id", _ctx.count, true))
   return n0
 }"
 `;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
index f5e8c5146..822a6af66 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
@@ -121,6 +121,52 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler v-bind > HTML global attributes should set as dom prop 1`] = `
+"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _setInheritAttrs(["id", "title", "lang", "dir", "tabindex"])
+  _renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
+  _renderEffect(() => _setDOMProp(n0, "title", _ctx.title, true))
+  _renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang, true))
+  _renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir, true))
+  _renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex, true))
+  return n0
+}"
+`;
+
+exports[`compiler v-bind > MathML global attributes should set as dom prop 1`] = `
+"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
+const t0 = _template("<math></math>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _setInheritAttrs(["autofucus", "dir", "displaystyle", "mathcolor", "tabindex"])
+  _renderEffect(() => _setDOMProp(n0, "autofucus", _ctx.autofucus, true))
+  _renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir, true))
+  _renderEffect(() => _setDOMProp(n0, "displaystyle", _ctx.displaystyle, true))
+  _renderEffect(() => _setDOMProp(n0, "mathcolor", _ctx.mathcolor, true))
+  _renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex, true))
+  return n0
+}"
+`;
+
+exports[`compiler v-bind > SVG global attributes should set as dom prop 1`] = `
+"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
+const t0 = _template("<svg></svg>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _setInheritAttrs(["id", "lang", "tabindex"])
+  _renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
+  _renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang, true))
+  _renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex, true))
+  return n0
+}"
+`;
+
 exports[`compiler v-bind > attributes must be set as attribute 1`] = `
 "import { renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
@@ -162,13 +208,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler v-bind > basic 1`] = `
-"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
+"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
   _setInheritAttrs(["id"])
-  _renderEffect(() => _setDynamicProp(n0, "id", _ctx.id, true))
+  _renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
   return n0
 }"
 `;
@@ -210,13 +256,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler v-bind > no expression 1`] = `
-"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
+"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
   _setInheritAttrs(["id"])
-  _renderEffect(() => _setDynamicProp(n0, "id", _ctx.id, true))
+  _renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
   return n0
 }"
 `;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index 5957dae88..177c9b0b3 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: v-once > as root node 1`] = `
-"import { setDynamicProp as _setDynamicProp, setInheritAttrs as _setInheritAttrs, template as _template } from 'vue/vapor';
+"import { setDOMProp as _setDOMProp, setInheritAttrs as _setInheritAttrs, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _setDynamicProp(n0, "id", _ctx.foo, true)
+  _setDOMProp(n0, "id", _ctx.foo, true)
   _setInheritAttrs(["id"])
   return n0
 }"
@@ -52,13 +52,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-once > on nested plain element 1`] = `
-"import { setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
+"import { setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div><div></div></div>")
 
 export function render(_ctx) {
   const n1 = t0()
   const n0 = n1.firstChild
-  _setDynamicProp(n0, "id", _ctx.foo)
+  _setDOMProp(n0, "id", _ctx.foo)
   return n1
 }"
 `;
diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
index 04b2a5627..7f14bb25d 100644
--- a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
@@ -74,7 +74,7 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).matchSnapshot()
-    expect(code).contains('_setDynamicProp(n0, "id", _ctx.id, true)')
+    expect(code).contains('_setDOMProp(n0, "id", _ctx.id, true)')
   })
 
   test('no expression', () => {
@@ -104,7 +104,7 @@ describe('compiler v-bind', () => {
         ],
       },
     })
-    expect(code).contains('_setDynamicProp(n0, "id", _ctx.id, true)')
+    expect(code).contains('_setDOMProp(n0, "id", _ctx.id, true)')
   })
 
   test('no expression (shorthand)', () => {
@@ -555,6 +555,45 @@ describe('compiler v-bind', () => {
     expect(code).contains('_setAttr(n6, "height", _ctx.height)')
   })
 
+  test('HTML global attributes should set as dom prop', () => {
+    const { code } = compileWithVBind(`
+      <div :id="id" :title="title" :lang="lang" :dir="dir" :tabindex="tabindex" />
+    `)
+
+    expect(code).matchSnapshot()
+    expect(code).contains('_setDOMProp(n0, "id", _ctx.id, true)')
+    expect(code).contains('_setDOMProp(n0, "title", _ctx.title, true)')
+    expect(code).contains('_setDOMProp(n0, "lang", _ctx.lang, true)')
+    expect(code).contains('_setDOMProp(n0, "dir", _ctx.dir, true)')
+    expect(code).contains('_setDOMProp(n0, "tabindex", _ctx.tabindex, true)')
+  })
+
+  test('SVG global attributes should set as dom prop', () => {
+    const { code } = compileWithVBind(`
+      <svg :id="id" :lang="lang" :tabindex="tabindex" />
+    `)
+
+    expect(code).matchSnapshot()
+    expect(code).contains('_setDOMProp(n0, "id", _ctx.id, true)')
+    expect(code).contains('_setDOMProp(n0, "lang", _ctx.lang, true)')
+    expect(code).contains('_setDOMProp(n0, "tabindex", _ctx.tabindex, true)')
+  })
+
+  test('MathML global attributes should set as dom prop', () => {
+    const { code } = compileWithVBind(`
+      <math :autofucus :dir :displaystyle :mathcolor :tabindex/>
+    `)
+
+    expect(code).matchSnapshot()
+    expect(code).contains('_setDOMProp(n0, "autofucus", _ctx.autofucus, true)')
+    expect(code).contains('_setDOMProp(n0, "dir", _ctx.dir, true)')
+    expect(code).contains(
+      '_setDOMProp(n0, "displaystyle", _ctx.displaystyle, true)',
+    )
+    expect(code).contains('_setDOMProp(n0, "mathcolor", _ctx.mathcolor, true)')
+    expect(code).contains('_setDOMProp(n0, "tabindex", _ctx.tabindex, true)')
+  })
+
   test('number value', () => {
     const { code } = compileWithVBind(`<Comp :depth="0" />`)
     expect(code).matchSnapshot()
diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
index fdab2d204..14fc23293 100644
--- a/packages/compiler-vapor/src/generators/prop.ts
+++ b/packages/compiler-vapor/src/generators/prop.ts
@@ -21,7 +21,16 @@ import {
   genCall,
   genMulti,
 } from './utils'
-import { shouldSetAsAttr, toHandlerKey } from '@vue/shared'
+import {
+  isHTMLGlobalAttr,
+  isHTMLTag,
+  isMathMLGlobalAttr,
+  isMathMLTag,
+  isSVGTag,
+  isSvgGlobalAttr,
+  shouldSetAsAttr,
+  toHandlerKey,
+} from '@vue/shared'
 
 // only the static key prop will reach here
 export function genSetProp(
@@ -48,6 +57,12 @@ export function genSetProp(
     helperName = modifier === '.' ? 'setDOMProp' : 'setAttr'
   } else if (shouldSetAsAttr(tag.toUpperCase(), keyName)) {
     helperName = 'setAttr'
+  } else if (
+    (isHTMLTag(tag) && isHTMLGlobalAttr(keyName)) ||
+    (isSVGTag(tag) && isSvgGlobalAttr(keyName)) ||
+    (isMathMLTag(tag) && isMathMLGlobalAttr(keyName))
+  ) {
+    helperName = 'setDOMProp'
   } else {
     helperName = 'setDynamicProp'
   }
diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts
index 7440206ee..7905a3bc2 100644
--- a/packages/shared/src/domAttrConfig.ts
+++ b/packages/shared/src/domAttrConfig.ts
@@ -78,6 +78,16 @@ export const isKnownHtmlAttr: (key: string) => boolean = /*@__PURE__*/ makeMap(
     `value,width,wrap`,
 )
 
+/**
+ * Generated from https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
+ */
+export const isHTMLGlobalAttr: (key: string) => boolean = /*@__PURE__*/ makeMap(
+  `accesskey,anchor,autocapitalize,autocorrect,autofocus,class,contenteditable,` +
+    `dir,draggable,enterkeyhint,exportparts,hidden,id,inert,inputmode,is,` +
+    `itemid,itemprop,itemref,itemscope,itemtype,lang,nonce,part,popover,role,slot,` +
+    `spellcheck,style,tabindex,title,translate,virtualkeyboardpolicy,writingsuggestions`,
+)
+
 /**
  * Generated from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
  */
@@ -123,6 +133,14 @@ export const isKnownSvgAttr: (key: string) => boolean = /*@__PURE__*/ makeMap(
     `xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`,
 )
 
+/**
+ * Generated from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#generic_attributes
+ */
+export const isSvgGlobalAttr: (key: string) => boolean = /*@__PURE__*/ makeMap(
+  `id,class,style,lang,tabindex,xml:base,xml:lang,xml:space,requiredExtensions,` +
+    `requiredFeatures,systemLanguage`,
+)
+
 /**
  * Generated from https://developer.mozilla.org/en-US/docs/Web/MathML/Attribute
  */
@@ -142,6 +160,15 @@ export const isKnownMathMLAttr: (key: string) => boolean =
       `voffset,width,widths,xlink:href,xlink:show,xlink:type,xmlns`,
   )
 
+/**
+ * Generated from https://developer.mozilla.org/en-US/docs/Web/MathML/Global_Attributes
+ */
+export const isMathMLGlobalAttr: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(
+    `autofucus,class,dir,displaystyle,id,mathbackground,mathcolor,mathsize,nonce,scriptlevel,` +
+      `style,tabindex`,
+  )
+
 /**
  * Shared between server-renderer and runtime-core hydration logic
  */

From 26cfbb191a845361f8a775695aacda9cf7ce7bc5 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 22 Nov 2024 22:40:10 +0800
Subject: [PATCH 4/5] chore: futher optimize

---
 packages/compiler-vapor/src/generators/prop.ts | 8 +++++++-
 packages/runtime-vapor/src/dom/prop.ts         | 7 ++++++-
 packages/shared/src/domAttrConfig.ts           | 5 +++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
index 14fc23293..425db406d 100644
--- a/packages/compiler-vapor/src/generators/prop.ts
+++ b/packages/compiler-vapor/src/generators/prop.ts
@@ -22,6 +22,7 @@ import {
   genMulti,
 } from './utils'
 import {
+  attributeCache,
   isHTMLGlobalAttr,
   isHTMLTag,
   isMathMLGlobalAttr,
@@ -44,6 +45,8 @@ export function genSetProp(
   } = oper
 
   const keyName = key.content
+  const tagName = tag.toUpperCase()
+  const attrCacheKey = `${tagName}_${keyName}`
 
   let helperName: VaporHelper
   let omitKey = false
@@ -55,7 +58,10 @@ export function genSetProp(
     omitKey = true
   } else if (modifier) {
     helperName = modifier === '.' ? 'setDOMProp' : 'setAttr'
-  } else if (shouldSetAsAttr(tag.toUpperCase(), keyName)) {
+  } else if (
+    attributeCache[attrCacheKey] ||
+    (attributeCache[attrCacheKey] = shouldSetAsAttr(tag.toUpperCase(), keyName))
+  ) {
     helperName = 'setAttr'
   } else if (
     (isHTMLTag(tag) && isHTMLGlobalAttr(keyName)) ||
diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
index d19fffcf4..dc16a6891 100644
--- a/packages/runtime-vapor/src/dom/prop.ts
+++ b/packages/runtime-vapor/src/dom/prop.ts
@@ -1,4 +1,5 @@
 import {
+  attributeCache,
   includeBooleanAttr,
   isArray,
   isFunction,
@@ -243,7 +244,11 @@ function shouldSetAsProp(
     return false
   }
 
-  if (shouldSetAsAttr(el.tagName, key)) {
+  const attrCacheKey = `${el.tagName}_${key}`
+  if (
+    attributeCache[attrCacheKey] ||
+    (attributeCache[attrCacheKey] = shouldSetAsAttr(el.tagName, key))
+  ) {
     return false
   }
 
diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts
index 7905a3bc2..b13df2757 100644
--- a/packages/shared/src/domAttrConfig.ts
+++ b/packages/shared/src/domAttrConfig.ts
@@ -180,6 +180,11 @@ export function isRenderableAttrValue(value: unknown): boolean {
   return type === 'string' || type === 'number' || type === 'boolean'
 }
 
+/**
+ * cache seen attributes which must be set as attribute
+ */
+export const attributeCache: Record<string, boolean> = Object.create(null)
+
 /*
  * The following attributes must be set as attribute
  */

From 8d98009b4e8227227e462409106486bd7cdf2855 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sat, 23 Nov 2024 10:23:17 +0800
Subject: [PATCH 5/5] chore: minor tweaks

---
 packages/compiler-vapor/src/generators/prop.ts | 8 ++++++--
 packages/runtime-vapor/src/dom/prop.ts         | 5 +++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
index 425db406d..295b177d6 100644
--- a/packages/compiler-vapor/src/generators/prop.ts
+++ b/packages/compiler-vapor/src/generators/prop.ts
@@ -59,8 +59,12 @@ export function genSetProp(
   } else if (modifier) {
     helperName = modifier === '.' ? 'setDOMProp' : 'setAttr'
   } else if (
-    attributeCache[attrCacheKey] ||
-    (attributeCache[attrCacheKey] = shouldSetAsAttr(tag.toUpperCase(), keyName))
+    attributeCache[attrCacheKey] === undefined
+      ? (attributeCache[attrCacheKey] = shouldSetAsAttr(
+          tag.toUpperCase(),
+          keyName,
+        ))
+      : attributeCache[attrCacheKey]
   ) {
     helperName = 'setAttr'
   } else if (
diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
index dc16a6891..8dfe24875 100644
--- a/packages/runtime-vapor/src/dom/prop.ts
+++ b/packages/runtime-vapor/src/dom/prop.ts
@@ -246,8 +246,9 @@ function shouldSetAsProp(
 
   const attrCacheKey = `${el.tagName}_${key}`
   if (
-    attributeCache[attrCacheKey] ||
-    (attributeCache[attrCacheKey] = shouldSetAsAttr(el.tagName, key))
+    attributeCache[attrCacheKey] === undefined
+      ? (attributeCache[attrCacheKey] = shouldSetAsAttr(el.tagName, key))
+      : attributeCache[attrCacheKey]
   ) {
     return false
   }