From: Evan You <evan@vuejs.org>
Date: Thu, 12 Dec 2024 10:17:29 +0000 (+0800)
Subject: wip: refactor vapor vBind codegen
X-Git-Tag: v3.6.0-alpha.1~16^2~156
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=4505727412a6f6fcb1e45dd0d26b9ec90dc2bbec;p=thirdparty%2Fvuejs%2Fcore.git

wip: refactor vapor vBind codegen
---

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index c4551d506c..817c40ccbe 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -6,8 +6,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _count
-  _renderEffect(() => _count !== _ctx.count && _setText(n0, "count is ", (_count = _ctx.count), "."))
+  _renderEffect(() => _setText(n0, "count is ", _ctx.count, "."))
   return n0
 }"
 `;
@@ -149,7 +148,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, createComponentWithFallback as _createComponentWithFallback, createTextNode as _createTextNode, insert as _insert, setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, createTextNode as _createTextNode, insert as _insert, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
 const t1 = _template("<div></div>")
 
@@ -160,8 +159,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n1 = _createComponentWithFallback(_component_Comp)
   const n2 = _createTextNode(() => [_ctx.bar])
   _insert([n1, n2], n3)
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n3, "id", (_foo = _ctx.foo)))
+  _renderEffect(() => _setProp(n3, "id", _ctx.foo))
   return [n0, n3]
 }"
 `;
@@ -176,20 +174,16 @@ export function render(_ctx) {
 `;
 
 exports[`compile > dynamic root nodes and interpolation 1`] = `
-"import { delegate as _delegate, setText as _setText, setDOMProp as _setDOMProp, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
+"import { delegate as _delegate, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
 const t0 = _template("<button></button>")
 _delegateEvents("click")
 
 export function render(_ctx) {
   const n0 = t0()
   _delegate(n0, "click", () => _ctx.handleClick)
-  let _count
   _renderEffect(() => {
-    if(_count !== _ctx.count) {
-      _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count)
-      _setDOMProp(n0, "id", _ctx.count)
-      _count = _ctx.count
-    }
+    _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count)
+    _setProp(n0, "id", _ctx.count)
   })
   return n0
 }"
@@ -205,8 +199,7 @@ exports[`compile > expression parsing > interpolation 1`] = `
 exports[`compile > expression parsing > v-bind 1`] = `
 "
   const n0 = t0()
-  let _key_value, _foo, _key_value_foo
-  _renderEffect(() => (_key_value !== key.value || _foo !== _unref(foo)) && (_key_value_foo = _setDynamicProps(n0, _key_value_foo, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true)))
+  _renderEffect(() => _setDynamicProps(n0, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))
   return n0
 "
 `;
diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts
index 9b8770d59a..1699d35028 100644
--- a/packages/compiler-vapor/__tests__/compile.spec.ts
+++ b/packages/compiler-vapor/__tests__/compile.spec.ts
@@ -195,7 +195,7 @@ describe('compile', () => {
       expect(code).matchSnapshot()
       expect(code).contains('key.value+1')
       expect(code).contains(
-        '(_key_value !== key.value || _foo !== _unref(foo)) && (_key_value_foo = _setDynamicProps(n0, _key_value_foo, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))',
+        '_setDynamicProps(n0, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true)',
       )
     })
 
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
index 96cca1703d..abcccf62f4 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
@@ -11,10 +11,9 @@ export function render(_ctx) {
   const n2 = n3.nextSibling
   const n1 = _createTextNode(() => [_ctx.second, " ", _ctx.third, " "])
   _insert(n1, n4, n3)
-  let _first, _forth
   _renderEffect(() => {
-    _first !== _ctx.first && _setText(n0, (_first = _ctx.first))
-    _forth !== _ctx.forth && _setText(n2, (_forth = _ctx.forth))
+    _setText(n0, _ctx.first)
+    _setText(n2, _ctx.forth)
   })
   return n4
 }"
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
index 0aabad8075..77aa794d60 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -293,13 +293,12 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: element transform > props merging: class 1`] = `
-"import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setClassIncremental as _setClassIncremental, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _isBar
-  _renderEffect(() => _isBar !== _ctx.isBar && _setClass(n0, ["foo", { bar: (_isBar = _ctx.isBar) }], true))
+  _renderEffect(() => _setClassIncremental(n0, ["foo", { bar: _ctx.isBar }]))
   return n0
 }"
 `;
@@ -322,12 +321,12 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: element transform > props merging: style 1`] = `
-"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setStyleIncremental as _setStyleIncremental, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setStyle(n0, ["color: green", { color: 'red' }], true))
+  _renderEffect(() => _setStyleIncremental(n0, ["color: green", { color: 'red' }]))
   return n0
 }"
 `;
@@ -348,8 +347,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj], true)))
+  _renderEffect(() => _setDynamicProps(n0, [_ctx.obj], true))
   return n0
 }"
 `;
@@ -360,8 +358,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj], true)))
+  _renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj], true))
   return n0
 }"
 `;
@@ -372,8 +369,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj, { id: "foo" }], true)))
+  _renderEffect(() => _setDynamicProps(n0, [_ctx.obj, { id: "foo" }], true))
   return n0
 }"
 `;
@@ -384,8 +380,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true)))
+  _renderEffect(() => _setDynamicProps(n0, [{ id: "foo" }, _ctx.obj, { class: "bar" }], 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 f536750ea2..b195073f8b 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
@@ -6,8 +6,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setAttr(n0, "foo-bar", (_id = _ctx.id)))
+  _renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id))
   return n0
 }"
 `;
@@ -18,8 +17,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "innerHTML", (_foo = _ctx.foo)))
+  _renderEffect(() => _setAttr(n0, "innerHTML", _ctx.foo))
   return n0
 }"
 `;
@@ -30,8 +28,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar
-  _renderEffect(() => _fooBar !== _ctx.fooBar && _setAttr(n0, "foo-bar", (_fooBar = _ctx.fooBar)))
+  _renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar))
   return n0
 }"
 `;
@@ -42,8 +39,7 @@ const t0 = _template("<progress></progress>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo)))
+  _renderEffect(() => _setAttr(n0, "value", _ctx.foo))
   return n0
 }"
 `;
@@ -54,8 +50,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "textContent", (_foo = _ctx.foo)))
+  _renderEffect(() => _setAttr(n0, "textContent", _ctx.foo))
   return n0
 }"
 `;
@@ -66,20 +61,18 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo)))
+  _renderEffect(() => _setAttr(n0, "value", _ctx.foo))
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .camel modifier 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && (_id = _setDynamicProp(n0, "fooBar", _id, _ctx.id)))
+  _renderEffect(() => _setProp(n0, "fooBar", _ctx.id))
   return n0
 }"
 `;
@@ -90,20 +83,18 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo, _id, _foo_id
-  _renderEffect(() => (_foo !== _ctx.foo || _id !== _ctx.id) && (_foo_id = _setDynamicProps(n0, _foo_id, [{ [_camelize(_ctx.foo)]: _ctx.id }], true)))
+  _renderEffect(() => _setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar
-  _renderEffect(() => _fooBar !== _ctx.fooBar && (_fooBar = _setDynamicProp(n0, "fooBar", _fooBar, _ctx.fooBar)))
+  _renderEffect(() => _setProp(n0, "fooBar", _ctx.fooBar))
   return n0
 }"
 `;
@@ -114,8 +105,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id)))
+  _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
   return n0
 }"
 `;
@@ -126,8 +116,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
+  _renderEffect(() => _setHtml(n0, _ctx.foo))
   return n0
 }"
 `;
@@ -138,8 +127,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar
-  _renderEffect(() => _fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar)))
+  _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
   return n0
 }"
 `;
@@ -150,8 +138,7 @@ const t0 = _template("<progress></progress>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo)))
+  _renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
   return n0
 }"
 `;
@@ -162,8 +149,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
+  _renderEffect(() => _setText(n0, _ctx.foo))
   return n0
 }"
 `;
@@ -174,8 +160,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
+  _renderEffect(() => _setValue(n0, _ctx.foo))
   return n0
 }"
 `;
@@ -186,8 +171,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id)))
+  _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
   return n0
 }"
 `;
@@ -198,8 +182,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar, _id, _fooBar_id
-  _renderEffect(() => (_fooBar !== _ctx.fooBar || _id !== _ctx.id) && (_fooBar_id = _setDynamicProps(n0, _fooBar_id, [{ ["." + _ctx.fooBar]: _ctx.id }], true)))
+  _renderEffect(() => _setDynamicProps(n0, [{ ["." + _ctx.fooBar]: _ctx.id }], true))
   return n0
 }"
 `;
@@ -210,8 +193,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
+  _renderEffect(() => _setHtml(n0, _ctx.foo))
   return n0
 }"
 `;
@@ -222,8 +204,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar
-  _renderEffect(() => _fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar)))
+  _renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
   return n0
 }"
 `;
@@ -234,8 +215,7 @@ const t0 = _template("<progress></progress>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo)))
+  _renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
   return n0
 }"
 `;
@@ -246,8 +226,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
+  _renderEffect(() => _setText(n0, _ctx.foo))
   return n0
 }"
 `;
@@ -258,8 +237,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
+  _renderEffect(() => _setValue(n0, _ctx.foo))
   return n0
 }"
 `;
@@ -270,8 +248,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
+  _renderEffect(() => _setHtml(n0, _ctx.foo))
   return n0
 }"
 `;
@@ -282,8 +259,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
+  _renderEffect(() => _setText(n0, _ctx.foo))
   return n0
 }"
 `;
@@ -294,104 +270,18 @@ const t0 = _template("<input>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
+  _renderEffect(() => _setValue(n0, _ctx.foo))
   return n0
 }"
 `;
 
 exports[`compiler v-bind > :value w/ progress 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<progress></progress>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && (_foo = _setDynamicProp(n0, "value", _foo, _ctx.foo)))
-  return n0
-}"
-`;
-
-exports[`compiler v-bind > HTML global attributes should set as dom prop 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-
-export function render(_ctx) {
-  const n0 = t0()
-  let _id, _title, _lang, _dir, _tabindex
-  _renderEffect(() => {
-    _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))
-    _title !== _ctx.title && _setDOMProp(n0, "title", (_title = _ctx.title))
-    _lang !== _ctx.lang && _setDOMProp(n0, "lang", (_lang = _ctx.lang))
-    _dir !== _ctx.dir && _setDOMProp(n0, "dir", (_dir = _ctx.dir))
-    _tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))
-  })
-  return n0
-}"
-`;
-
-exports[`compiler v-bind > MathML global attributes should set as attribute 1`] = `
-"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<math></math>")
-
-export function render(_ctx) {
-  const n0 = t0()
-  _renderEffect(() => {
-    _setAttr(n0, "autofucus", _ctx.autofucus)
-    _setAttr(n0, "dir", _ctx.dir)
-    _setAttr(n0, "displaystyle", _ctx.displaystyle)
-    _setAttr(n0, "mathcolor", _ctx.mathcolor)
-    _setAttr(n0, "tabindex", _ctx.tabindex)
-  })
-  return n0
-}"
-`;
-
-exports[`compiler v-bind > MathML global attributes should set as dom prop 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<math></math>")
-
-export function render(_ctx) {
-  const n0 = t0()
-  let _autofucus, _dir, _displaystyle, _mathcolor, _tabindex
-  _renderEffect(() => {
-    _autofucus !== _ctx.autofucus && _setDOMProp(n0, "autofucus", (_autofucus = _ctx.autofucus))
-    _dir !== _ctx.dir && _setDOMProp(n0, "dir", (_dir = _ctx.dir))
-    _displaystyle !== _ctx.displaystyle && _setDOMProp(n0, "displaystyle", (_displaystyle = _ctx.displaystyle))
-    _mathcolor !== _ctx.mathcolor && _setDOMProp(n0, "mathcolor", (_mathcolor = _ctx.mathcolor))
-    _tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))
-  })
-  return n0
-}"
-`;
-
-exports[`compiler v-bind > SVG global attributes should set as attribute 1`] = `
-"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<svg></svg>")
-
-export function render(_ctx) {
-  const n0 = t0()
-  _renderEffect(() => {
-    _setAttr(n0, "id", _ctx.id)
-    _setAttr(n0, "lang", _ctx.lang)
-    _setAttr(n0, "tabindex", _ctx.tabindex)
-  })
-  return n0
-}"
-`;
-
-exports[`compiler v-bind > SVG global attributes should set as dom prop 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<svg></svg>")
-
-export function render(_ctx) {
-  const n0 = t0()
-  let _id, _lang, _tabindex
-  _renderEffect(() => {
-    _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))
-    _lang !== _ctx.lang && _setDOMProp(n0, "lang", (_lang = _ctx.lang))
-    _tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))
-  })
+  _renderEffect(() => _setProp(n0, "value", _ctx.foo))
   return n0
 }"
 `;
@@ -414,65 +304,46 @@ export function render(_ctx) {
   const n4 = t4()
   const n5 = t5()
   const n6 = t6()
-  let _spellcheck, _draggable, _translate, _form, _list, _type, _width, _height
   _renderEffect(() => {
-    _spellcheck !== _ctx.spellcheck && _setAttr(n0, "spellcheck", (_spellcheck = _ctx.spellcheck))
-    _draggable !== _ctx.draggable && _setAttr(n0, "draggable", (_draggable = _ctx.draggable))
-    _translate !== _ctx.translate && _setAttr(n0, "translate", (_translate = _ctx.translate))
-    _form !== _ctx.form && _setAttr(n0, "form", (_form = _ctx.form))
-    _list !== _ctx.list && _setAttr(n1, "list", (_list = _ctx.list))
-    _type !== _ctx.type && _setAttr(n2, "type", (_type = _ctx.type))
-    if(_width !== _ctx.width) {
-      _setAttr(n3, "width", _ctx.width)
-      _setAttr(n4, "width", _ctx.width)
-      _setAttr(n5, "width", _ctx.width)
-      _setAttr(n6, "width", _ctx.width)
-      _width = _ctx.width
-    }
-    if(_height !== _ctx.height) {
-      _setAttr(n3, "height", _ctx.height)
-      _setAttr(n4, "height", _ctx.height)
-      _setAttr(n5, "height", _ctx.height)
-      _setAttr(n6, "height", _ctx.height)
-      _height = _ctx.height
-    }
+    _setAttr(n0, "spellcheck", _ctx.spellcheck)
+    _setAttr(n0, "draggable", _ctx.draggable)
+    _setAttr(n0, "translate", _ctx.translate)
+    _setAttr(n0, "form", _ctx.form)
+    _setAttr(n1, "list", _ctx.list)
+    _setAttr(n2, "type", _ctx.type)
+    
+    _setAttr(n3, "width", _ctx.width)
+    _setAttr(n4, "width", _ctx.width)
+    _setAttr(n5, "width", _ctx.width)
+    _setAttr(n6, "width", _ctx.width)
+    
+    _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 { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id)))
+  _renderEffect(() => _setProp(n0, "id", _ctx.id))
   return n0
 }"
 `;
 
-exports[`compiler v-bind > bind member expression 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-
-export function render(_ctx) {
-  const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj.count.bar && _setDOMProp(n0, "id", (_obj = _ctx.obj.count.bar)))
-  return [n0, n1]
-}"
-`;
-
 exports[`compiler v-bind > dynamic arg 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id, _title, _id_title
-  _renderEffect(() => (_id !== _ctx.id || _title !== _ctx.title) && (_id_title = _setDynamicProps(n0, _id_title, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true)))
+  _renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))
   return n0
 }"
 `;
@@ -483,32 +354,29 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && (_id = _setDynamicProps(n0, _id, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true)))
+  _renderEffect(() => _setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))
   return n0
 }"
 `;
 
 exports[`compiler v-bind > no expression (shorthand) 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _camelCase
-  _renderEffect(() => _camelCase !== _ctx.camelCase && (_camelCase = _setDynamicProp(n0, "camel-case", _camelCase, _ctx.camelCase)))
+  _renderEffect(() => _setAttr(n0, "camel-case", _ctx.camelCase))
   return n0
 }"
 `;
 
 exports[`compiler v-bind > no expression 1`] = `
-"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id)))
+  _renderEffect(() => _setProp(n0, "id", _ctx.id))
   return n0
 }"
 `;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index 22da321e46..4c486e3f60 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -45,15 +45,15 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > multi effect 1`] = `
-"import { setDynamicProp as _setDynamicProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+"import { setProp as _setProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
     const n2 = t0()
     _renderEffect(() => {
-      _setDynamicProp(n2, "item", _ctx0[0].value)
-      _setDynamicProp(n2, "index", _ctx0[1].value)
+      _setProp(n2, "item", _ctx0[0].value)
+      _setProp(n2, "index", _ctx0[1].value)
     })
     return n2
   })
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
index 72e0319185..93eb311843 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
@@ -6,8 +6,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _code
-  _renderEffect(() => _code !== _ctx.code && _setHtml(n0, (_code = _ctx.code)))
+  _renderEffect(() => _setHtml(n0, _ctx.code))
   return n0
 }"
 `;
@@ -18,8 +17,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _test
-  _renderEffect(() => _test !== _ctx.test && _setHtml(n0, (_test = _ctx.test)))
+  _renderEffect(() => _setHtml(n0, _ctx.test))
   return n0
 }"
 `;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index a0ffcdf392..ccd290a5c9 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -7,8 +7,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
-    let _msg
-    _renderEffect(() => _msg !== _ctx.msg && _setText(n2, (_msg = _ctx.msg)))
+    _renderEffect(() => _setText(n2, _ctx.msg))
     return n2
   })
   return n0
@@ -38,8 +37,7 @@ export function render(_ctx) {
     const n11 = t4()
     return [n10, n11]
   }))
-  let _text
-  _renderEffect(() => _text !== _ctx.text && _setText(n13, (_text = _ctx.text)))
+  _renderEffect(() => _setText(n13, _ctx.text))
   return [n0, n13]
 }"
 `;
@@ -72,8 +70,7 @@ export function render(_ctx) {
     const n2 = t0()
     const n3 = t1()
     const n4 = t2()
-    let _msg
-    _renderEffect(() => _msg !== _ctx.msg && _setText(n4, (_msg = _ctx.msg)))
+    _renderEffect(() => _setText(n4, _ctx.msg))
     return [n2, n3, n4]
   })
   return n0
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index 1d73b32cb6..4e53ecc0e6 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -242,8 +242,7 @@ export function render(_ctx) {
   const n0 = t0()
   _withDirectives(n0, [[_vModelDynamic, () => _ctx.model]])
   _delegate(n0, "update:modelValue", () => $event => (_ctx.model = $event))
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj], true)))
+  _renderEffect(() => _setDynamicProps(n0, [_ctx.obj], 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 354acd67ee..3f9f3da2e0 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 { setDOMProp as _setDOMProp, template as _template } from 'vue';
+"import { setProp as _setProp, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _setDOMProp(n0, "id", _ctx.foo)
+  _setProp(n0, "id", _ctx.foo)
   return n0
 }"
 `;
@@ -49,13 +49,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-once > on nested plain element 1`] = `
-"import { setDOMProp as _setDOMProp, template as _template } from 'vue';
+"import { setProp as _setProp, template as _template } from 'vue';
 const t0 = _template("<div><div></div></div>")
 
 export function render(_ctx) {
   const n1 = t0()
   const n0 = n1.firstChild
-  _setDOMProp(n0, "id", _ctx.foo)
+  _setProp(n0, "id", _ctx.foo)
   return n1
 }"
 `;
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
index 93acfaab78..9f115e2721 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
@@ -6,8 +6,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _str
-  _renderEffect(() => _str !== _ctx.str && _setText(n0, (_str = _ctx.str)))
+  _renderEffect(() => _setText(n0, _ctx.str))
   return n0
 }"
 `;
@@ -18,8 +17,7 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _test
-  _renderEffect(() => _test !== _ctx.test && _setText(n0, (_test = _ctx.test)))
+  _renderEffect(() => _setText(n0, _ctx.test))
   return n0
 }"
 `;
diff --git a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
index 19d01e0847..b8d6f1166e 100644
--- a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
@@ -572,9 +572,7 @@ describe('compiler: element transform', () => {
         ],
       },
     ])
-    expect(code).contains(
-      '_obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj], true))',
-    )
+    expect(code).contains('_setDynamicProps(n0, [_ctx.obj], true)')
   })
 
   test('v-bind="obj" after static prop', () => {
@@ -611,7 +609,7 @@ describe('compiler: element transform', () => {
       },
     ])
     expect(code).contains(
-      '_obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj], true))',
+      '_setDynamicProps(n0, [{ id: "foo" }, _ctx.obj], true)',
     )
   })
 
@@ -639,7 +637,7 @@ describe('compiler: element transform', () => {
       },
     ])
     expect(code).contains(
-      '_obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj, { id: "foo" }], true))',
+      '_setDynamicProps(n0, [_ctx.obj, { id: "foo" }], true)',
     )
   })
 
@@ -668,7 +666,7 @@ describe('compiler: element transform', () => {
       },
     ])
     expect(code).contains(
-      '_obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))',
+      '_setDynamicProps(n0, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true)',
     )
   })
 
diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
index 261b26a741..292b05d40c 100644
--- a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
@@ -74,9 +74,7 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))',
-    )
+    expect(code).contains('_setProp(n0, "id", _ctx.id')
   })
 
   test('no expression', () => {
@@ -106,9 +104,7 @@ describe('compiler v-bind', () => {
         ],
       },
     })
-    expect(code).contains(
-      '_id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))',
-    )
+    expect(code).contains('_setProp(n0, "id", _ctx.id)')
   })
 
   test('no expression (shorthand)', () => {
@@ -130,9 +126,7 @@ describe('compiler v-bind', () => {
         ],
       },
     })
-    expect(code).contains(
-      '_camelCase !== _ctx.camelCase && (_camelCase = _setDynamicProp(n0, "camel-case", _camelCase, _ctx.camelCase))',
-    )
+    expect(code).contains('_setAttr(n0, "camel-case", _ctx.camelCase)')
   })
 
   test('dynamic arg', () => {
@@ -177,7 +171,7 @@ describe('compiler v-bind', () => {
       ],
     })
     expect(code).contains(
-      '(_id !== _ctx.id || _title !== _ctx.title) && (_id_title = _setDynamicProps(n0, _id_title, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))',
+      '_setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true)',
     )
   })
 
@@ -230,7 +224,7 @@ describe('compiler v-bind', () => {
       ],
     })
     expect(code).contains(
-      '_id !== _ctx.id && (_id = _setDynamicProps(n0, _id, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))',
+      '_setDynamicProps(n0, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true)',
     )
   })
 
@@ -292,9 +286,7 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_id !== _ctx.id && (_id = _setDynamicProp(n0, "fooBar", _id, _ctx.id))',
-    )
+    expect(code).contains('_setProp(n0, "fooBar", _ctx.id)')
   })
 
   test('.camel modifier w/ no expression', () => {
@@ -318,9 +310,7 @@ describe('compiler v-bind', () => {
       },
     })
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      '_fooBar !== _ctx.fooBar && (_fooBar = _setDynamicProp(n0, "fooBar", _fooBar, _ctx.fooBar))',
-    )
+    expect(code).contains('_setProp(n0, "fooBar", _ctx.fooBar)')
   })
 
   test('.camel modifier w/ dynamic arg', () => {
@@ -351,7 +341,7 @@ describe('compiler v-bind', () => {
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
     expect(code).contains(
-      `(_foo !== _ctx.foo || _id !== _ctx.id) && (_foo_id = _setDynamicProps(n0, _foo_id, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))`,
+      `_setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }], true)`,
     )
   })
 
@@ -378,9 +368,7 @@ describe('compiler v-bind', () => {
       },
     })
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      '_id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id))',
-    )
+    expect(code).contains('_setDOMProp(n0, "fooBar", _ctx.id)')
   })
 
   test('.prop modifier w/ no expression', () => {
@@ -404,9 +392,7 @@ describe('compiler v-bind', () => {
       },
     })
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      '_fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar))',
-    )
+    expect(code).contains('_setDOMProp(n0, "fooBar", _ctx.fooBar)')
   })
 
   test('.prop modifier w/ dynamic arg', () => {
@@ -436,7 +422,7 @@ describe('compiler v-bind', () => {
     })
     expect(code).contains('renderEffect')
     expect(code).contains(
-      `(_fooBar !== _ctx.fooBar || _id !== _ctx.id) && (_fooBar_id = _setDynamicProps(n0, _fooBar_id, [{ ["." + _ctx.fooBar]: _ctx.id }], true))`,
+      `_setDynamicProps(n0, [{ ["." + _ctx.fooBar]: _ctx.id }], true)`,
     )
   })
 
@@ -463,9 +449,7 @@ describe('compiler v-bind', () => {
       },
     })
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      '_id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id))',
-    )
+    expect(code).contains(' _setDOMProp(n0, "fooBar", _ctx.id)')
   })
 
   test('.prop modifier (shorthand) w/ no expression', () => {
@@ -489,73 +473,55 @@ describe('compiler v-bind', () => {
       },
     })
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      '_fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar))',
-    )
+    expect(code).contains('_setDOMProp(n0, "fooBar", _ctx.fooBar)')
   })
 
   test('.prop modifier w/ innerHTML', () => {
     const { code } = compileWithVBind(`<div :innerHTML.prop="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setHtml(n0, _ctx.foo)')
   })
 
   test('.prop modifier (shorthand) w/ innerHTML', () => {
     const { code } = compileWithVBind(`<div .innerHTML="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setHtml(n0, _ctx.foo)')
   })
 
   test('.prop modifier w/ textContent', () => {
     const { code } = compileWithVBind(`<div :textContent.prop="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setText(n0, _ctx.foo)')
   })
 
   test('.prop modifier (shorthand) w/ textContent', () => {
     const { code } = compileWithVBind(`<div .textContent="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setText(n0, _ctx.foo)')
   })
 
   test('.prop modifier w/ value', () => {
     const { code } = compileWithVBind(`<div :value.prop="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setValue(n0, _ctx.foo)')
   })
 
   test('.prop modifier (shorthand) w/ value', () => {
     const { code } = compileWithVBind(`<div .value="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setValue(n0, _ctx.foo)')
   })
 
   test('.prop modifier w/ progress value', () => {
     const { code } = compileWithVBind(`<progress :value.prop="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setDOMProp(n0, "value", _ctx.foo)')
   })
 
   test('.prop modifier (shorthand) w/ progress value', () => {
     const { code } = compileWithVBind(`<progress .value="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setDOMProp(n0, "value", _ctx.foo)')
   })
 
   test('.attr modifier', () => {
@@ -579,9 +545,7 @@ describe('compiler v-bind', () => {
       },
     })
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      '_id !== _ctx.id && _setAttr(n0, "foo-bar", (_id = _ctx.id))',
-    )
+    expect(code).contains('_setAttr(n0, "foo-bar", _ctx.id)')
   })
 
   test('.attr modifier w/ no expression', () => {
@@ -606,41 +570,31 @@ describe('compiler v-bind', () => {
     })
 
     expect(code).contains('renderEffect')
-    expect(code).contains(
-      '_fooBar !== _ctx.fooBar && _setAttr(n0, "foo-bar", (_fooBar = _ctx.fooBar))',
-    )
+    expect(code).contains('_setAttr(n0, "foo-bar", _ctx.fooBar)')
   })
 
   test('.attr modifier w/ innerHTML', () => {
     const { code } = compileWithVBind(`<div :innerHTML.attr="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setAttr(n0, "innerHTML", (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setAttr(n0, "innerHTML", _ctx.foo)')
   })
 
   test('.attr modifier w/ textContent', () => {
     const { code } = compileWithVBind(`<div :textContent.attr="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setAttr(n0, "textContent", (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setAttr(n0, "textContent", _ctx.foo)')
   })
 
   test('.attr modifier w/ value', () => {
     const { code } = compileWithVBind(`<div :value.attr="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setAttr(n0, "value", _ctx.foo)')
   })
 
   test('.attr modifier w/ progress value', () => {
     const { code } = compileWithVBind(`<progress :value.attr="foo" />`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setAttr(n0, "value", _ctx.foo)')
   })
 
   test('attributes must be set as attribute', () => {
@@ -655,28 +609,12 @@ describe('compiler v-bind', () => {
     `)
 
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_spellcheck !== _ctx.spellcheck && _setAttr(n0, "spellcheck", (_spellcheck = _ctx.spellcheck))',
-    )
-    expect(code).contains(
-      '_draggable !== _ctx.draggable && _setAttr(n0, "draggable", (_draggable = _ctx.draggable))',
-    )
-    expect(code).contains(
-      '_translate !== _ctx.translate && _setAttr(n0, "translate", (_translate = _ctx.translate))',
-    )
-    expect(code).contains(
-      '_form !== _ctx.form && _setAttr(n0, "form", (_form = _ctx.form))',
-    )
-    expect(code).contains(
-      '_list !== _ctx.list && _setAttr(n1, "list", (_list = _ctx.list))',
-    )
-    expect(code).contains(
-      '_type !== _ctx.type && _setAttr(n2, "type", (_type = _ctx.type))',
-    )
-    expect(code).contains('if(_width !== _ctx.width) {')
-    expect(code).contains('if(_height !== _ctx.height) {')
-    expect(code).contains('_height = _ctx.height')
-    expect(code).contains('_height = _ctx.height')
+    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)')
@@ -691,10 +629,7 @@ describe('compiler v-bind', () => {
       <div :innerHTML="foo"/>
     `)
     expect(code).matchSnapshot()
-    expect(code).contains('let _foo')
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setHtml(n0, _ctx.foo)')
   })
 
   test(':textContext', () => {
@@ -702,10 +637,7 @@ describe('compiler v-bind', () => {
       <div :textContent="foo"/>
     `)
     expect(code).matchSnapshot()
-    expect(code).contains('let _foo')
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setText(n0, _ctx.foo)')
   })
 
   test(':value', () => {
@@ -713,10 +645,7 @@ describe('compiler v-bind', () => {
       <input :value="foo"/>
     `)
     expect(code).matchSnapshot()
-    expect(code).contains('let _foo')
-    expect(code).contains(
-      '_foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo))',
-    )
+    expect(code).contains('_setValue(n0, _ctx.foo)')
   })
 
   test(':value w/ progress', () => {
@@ -724,19 +653,7 @@ describe('compiler v-bind', () => {
       <progress :value="foo"/>
     `)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      '_foo !== _ctx.foo && (_foo = _setDynamicProp(n0, "value", _foo, _ctx.foo))',
-    )
-  })
-
-  test('bind member expression', () => {
-    const { code } = compileWithVBind(`
-      <div :id="obj.count.bar"></div>/>
-    `)
-    expect(code).matchSnapshot()
-    expect(code).contains(
-      '_obj !== _ctx.obj.count.bar && _setDOMProp(n0, "id", (_obj = _ctx.obj.count.bar))',
-    )
+    expect(code).contains('_setProp(n0, "value", _ctx.foo)')
   })
 
   test('number value', () => {
diff --git a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
index 3b744d0a7d..0aac082d65 100644
--- a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
@@ -106,8 +106,6 @@ describe('v-on', () => {
       },
     })
 
-    console.log(code)
-
     expect(code).matchSnapshot()
   })
 
diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
index b0137f97ab..cbc1a37ff8 100644
--- a/packages/compiler-vapor/src/generators/prop.ts
+++ b/packages/compiler-vapor/src/generators/prop.ts
@@ -22,7 +22,8 @@ import {
 } from './utils'
 import {
   canSetValueDirectly,
-  isHTMLGlobalAttr,
+  isSVGTag,
+  shouldSetAsAttr,
   toHandlerKey,
 } from '@vue/shared'
 
@@ -42,6 +43,7 @@ const helpers = {
   setStyleIncremental: { name: 'setStyleIncremental' },
   setValue: { name: 'setValue' },
   setAttr: { name: 'setAttr', needKey: true },
+  setProp: { name: 'setProp', needKey: true },
   setDOMProp: { name: 'setDOMProp', needKey: true },
   setDynamicProps: { name: 'setDynamicProps', acceptRoot: true },
 } as const satisfies Partial<Record<VaporHelper, HelperConfig>>
@@ -151,55 +153,55 @@ export function genPropValue(
   )
 }
 
-// TODO
-// - 1. textContent + innerHTML Known base dom properties in https://developer.mozilla.org/en-US/docs/Web/API/Element
-// - 2. special handling (class / style)
-// - 3. SVG: always attribute
-// - 4. Custom Elements
-//     - always properties unless known global attr or has hyphen (aria- / data-)
-// - 5. Normal Elements
-//   - 1. Known shared dom properties:
-//     - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
-//   - 2. Each element's known dom properties
-//   - 3. Fallback to attribute
-
 function getRuntimeHelper(
   tag: string,
-  keyName: string,
+  key: string,
   modifier: '.' | '^' | undefined,
   root: boolean,
 ): HelperConfig {
   const tagName = tag.toUpperCase()
   if (modifier) {
     if (modifier === '.') {
-      return getSpecialHelper(keyName, tagName, root) || helpers.setDOMProp
-    } else {
-      return helpers.setAttr
-    }
-  } else {
-    const helper = getSpecialHelper(keyName, tagName, root)
-    if (helper) {
-      return helper
-    } else if (tagName.includes('-')) {
-      // custom element
-      if (isHTMLGlobalAttr(keyName) || keyName.includes('-')) {
-        return helpers.setAttr
-      } else {
-        return helpers.setDOMProp
-      }
-    } else if (/[A-Z]/.test(keyName)) {
-      return helpers.setDOMProp
+      return getSpecialHelper(key, tagName, root) || helpers.setDOMProp
     } else {
       return helpers.setAttr
     }
   }
+
+  // 1. special handling for value / style / class / textContent /  innerHTML
+  const helper = getSpecialHelper(key, tagName, root)
+  if (helper) {
+    return helper
+  }
+
+  // 2. Aria DOM properties shared between all Elements in
+  //    https://developer.mozilla.org/en-US/docs/Web/API/Element
+  if (/aria[A-Z]/.test(key)) {
+    return helpers.setDOMProp
+  }
+
+  // 3. SVG: always attribute
+  if (isSVGTag(tag)) {
+    // TODO pass svg flag
+    return helpers.setAttr
+  }
+
+  // 4. respect shouldSetAsAttr used in vdom and setDynamicProp for consistency
+  //    also fast path for presence of hyphen (covers data-* and aria-*)
+  if (shouldSetAsAttr(tagName, key) || key.includes('-')) {
+    return helpers.setAttr
+  }
+
+  // 5. Fallback to setDOMProp, which has a runtime `key in el` check to
+  // ensure behavior consistency with vdom
+  return helpers.setProp
 }
 
-const getSpecialHelper = (
+function getSpecialHelper(
   keyName: string,
   tagName: string,
   root: boolean,
-): HelperConfig | undefined => {
+): HelperConfig | undefined {
   // special case for 'value' property
   if (keyName === 'value' && canSetValueDirectly(tagName)) {
     return helpers.setValue
diff --git a/packages/runtime-vapor/__tests__/dom/prop.spec.ts b/packages/runtime-vapor/__tests__/dom/prop.spec.ts
index 95569f7ad1..f3acc35751 100644
--- a/packages/runtime-vapor/__tests__/dom/prop.spec.ts
+++ b/packages/runtime-vapor/__tests__/dom/prop.spec.ts
@@ -3,9 +3,9 @@ import {
   setDynamicProp as _setDynamicProp,
   setAttr,
   setClass,
-  setDOMProp,
   setDynamicProps,
   setHtml,
+  setProp,
   setText,
   setValue,
 } from '../../src/dom/prop'
@@ -244,47 +244,47 @@ describe('patchProp', () => {
       // In vapor static attrs are part of the template and this never happens
       // setDOMProp(el, 'multiple', '')
       // expect(el.multiple).toBe(true)
-      setDOMProp(el, 'multiple', null)
+      setProp(el, 'multiple', null)
       expect(el.multiple).toBe(false)
-      setDOMProp(el, 'multiple', true)
+      setProp(el, 'multiple', true)
       expect(el.multiple).toBe(true)
-      setDOMProp(el, 'multiple', 0)
+      setProp(el, 'multiple', 0)
       expect(el.multiple).toBe(false)
-      setDOMProp(el, 'multiple', '0')
+      setProp(el, 'multiple', '0')
       expect(el.multiple).toBe(true)
-      setDOMProp(el, 'multiple', false)
+      setProp(el, 'multiple', false)
       expect(el.multiple).toBe(false)
-      setDOMProp(el, 'multiple', 1)
+      setProp(el, 'multiple', 1)
       expect(el.multiple).toBe(true)
-      setDOMProp(el, 'multiple', undefined)
+      setProp(el, 'multiple', undefined)
       expect(el.multiple).toBe(false)
     })
 
     test('should remove attribute when value is falsy', () => {
       const el = document.createElement('div')
       el.setAttribute('id', '')
-      setDOMProp(el, 'id', null)
+      setProp(el, 'id', null)
       expect(el.hasAttribute('id')).toBe(false)
 
       el.setAttribute('id', '')
-      setDOMProp(el, 'id', undefined)
+      setProp(el, 'id', undefined)
       expect(el.hasAttribute('id')).toBe(false)
 
-      setDOMProp(el, 'id', '')
+      setProp(el, 'id', '')
       expect(el.hasAttribute('id')).toBe(false)
 
       const img = document.createElement('img')
-      setDOMProp(img, 'width', 0)
+      setProp(img, 'width', 0)
       expect(img.hasAttribute('width')).toBe(false) // skipped
 
-      setDOMProp(img, 'width', null)
+      setProp(img, 'width', null)
       expect(img.hasAttribute('width')).toBe(false)
-      setDOMProp(img, 'width', 1)
+      setProp(img, 'width', 1)
       expect(img.hasAttribute('width')).toBe(true)
 
-      setDOMProp(img, 'width', undefined)
+      setProp(img, 'width', undefined)
       expect(img.hasAttribute('width')).toBe(false)
-      setDOMProp(img, 'width', 1)
+      setProp(img, 'width', 1)
       expect(img.hasAttribute('width')).toBe(true)
     })
 
@@ -295,7 +295,7 @@ describe('patchProp', () => {
           throw new TypeError('Invalid type')
         },
       })
-      setDOMProp(el, 'someProp', 'foo')
+      setProp(el, 'someProp', 'foo')
 
       expect(
         `Failed setting prop "someProp" on <div>: value foo is invalid.`,
diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
index 652e1db36e..38bd82968f 100644
--- a/packages/runtime-vapor/src/dom/prop.ts
+++ b/packages/runtime-vapor/src/dom/prop.ts
@@ -26,7 +26,10 @@ type TargetElement = Element & {
 }
 
 export function setText(el: Node & { $txt?: string }, ...values: any[]): void {
-  const value = values.map(v => toDisplayString(v)).join('')
+  const value =
+    values.length > 1
+      ? values.map(toDisplayString).join('')
+      : toDisplayString(values[0])
   if (el.$txt !== value) {
     el.textContent = el.$txt = value
   }
@@ -112,6 +115,14 @@ export function setValue(
   }
 }
 
+export function setProp(el: any, key: string, value: any): void {
+  if (key in el) {
+    setDOMProp(el, key, value)
+  } else {
+    setAttr(el, key, value)
+  }
+}
+
 export function setDOMProp(el: any, key: string, value: any): void {
   const prev = el[key]
   if (value === prev) {
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index 3aeb3055ec..5435441123 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -18,6 +18,7 @@ export {
   setStyleIncremental,
   setAttr,
   setValue,
+  setProp,
   setDOMProp,
   setDynamicProps,
 } from './dom/prop'
diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts
index 7905a3bc2e..1315c364b5 100644
--- a/packages/shared/src/domAttrConfig.ts
+++ b/packages/shared/src/domAttrConfig.ts
@@ -78,16 +78,6 @@ 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
  */
@@ -133,14 +123,6 @@ 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
  */
@@ -160,15 +142,6 @@ 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
  */
@@ -211,16 +184,14 @@ export function shouldSetAsAttr(tagName: string, key: string): boolean {
   }
 
   // #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
-    }
+  if (
+    (key === 'width' || key === 'height') &&
+    (tagName === 'IMG' ||
+      tagName === 'VIDEO' ||
+      tagName === 'CANVAS' ||
+      tagName === 'SOURCE')
+  ) {
+    return true
   }
 
   return false