From 7d1586246434412369f50944e5ee05c3ca7e27a1 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Mon, 1 Mar 2021 21:37:21 +0800
Subject: [PATCH 01/15] wip: initial work for vnode creation

---
 .../compiler-core/__tests__/codegen.spec.ts   |  27 +-
 .../compiler-core/__tests__/scopeId.spec.ts   |  12 +-
 packages/compiler-core/__tests__/testUtils.ts |  20 +-
 .../__tests__/transforms/hoistStatic.spec.ts  |  19 +-
 .../transforms/transformElement.spec.ts       | 208 ++++++++++-----
 .../__tests__/transforms/vIf.spec.ts          |  47 +++-
 packages/compiler-core/src/ast.ts             |  32 ++-
 packages/compiler-core/src/codegen.ts         |  40 ++-
 packages/compiler-core/src/options.ts         |   9 +
 packages/compiler-core/src/runtimeHelpers.ts  |  28 ++
 packages/compiler-core/src/transform.ts       |  36 ++-
 .../src/transforms/hoistStatic.ts             |  70 ++++-
 .../src/transforms/transformElement.ts        | 235 ++++++++++++++++-
 packages/compiler-core/src/transforms/vFor.ts |  43 +++-
 packages/compiler-core/src/transforms/vIf.ts  |  36 ++-
 packages/compiler-core/src/utils.ts           |  86 ++++++-
 .../__tests__/compileScript.spec.ts           |   6 +-
 packages/compiler-ssr/src/index.ts            |   1 +
 .../src/transforms/ssrTransformComponent.ts   |   1 +
 .../__tests__/rendererOptimizedMode.spec.ts   |  43 +++-
 packages/runtime-core/src/index.ts            |  14 +-
 packages/runtime-core/src/vnode.ts            | 239 +++++++++++++++++-
 packages/shared/src/normalizeProp.ts          |  29 +++
 packages/shared/src/shapeFlags.ts             |  17 ++
 24 files changed, 1132 insertions(+), 166 deletions(-)

diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts
index 75001f94aff..61908a9105b 100644
--- a/packages/compiler-core/__tests__/codegen.spec.ts
+++ b/packages/compiler-core/__tests__/codegen.spec.ts
@@ -31,7 +31,8 @@ import {
   RESOLVE_COMPONENT,
   CREATE_COMMENT,
   FRAGMENT,
-  RENDER_LIST
+  RENDER_LIST,
+  CREATE_ELEMENT_VNODE
 } from '../src/runtimeHelpers'
 import { createElementWithCodegen, genFlagText } from './testUtils'
 import { PatchFlags } from '@vue/shared'
@@ -395,12 +396,12 @@ describe('compiler: codegen', () => {
       })
     )
     expect(code).toMatch(`
-    return _${helperNameMap[CREATE_VNODE]}("div", {
+    return _${helperNameMap[CREATE_ELEMENT_VNODE]}("div", {
       id: "foo",
       [prop]: bar,
       [foo + bar]: bar
     }, [
-      _${helperNameMap[CREATE_VNODE]}("p", { "some-key": "foo" })
+      _${helperNameMap[CREATE_ELEMENT_VNODE]}("p", { "some-key": "foo" })
     ], ${PatchFlags.FULL_PROPS})`)
     expect(code).toMatchSnapshot()
   })
@@ -658,11 +659,11 @@ describe('compiler: codegen', () => {
 
     test('tag only', () => {
       expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
-              "return _createVNode(\\"div\\")
+              "return _createElementVNode(\\"div\\")
                "
           `)
       expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
-              "return _createVNode(_Fragment)
+              "return _createElementVNode(_Fragment)
                "
           `)
     })
@@ -670,7 +671,7 @@ describe('compiler: codegen', () => {
     test('with props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
         .toMatchInlineSnapshot(`
-              "return _createVNode(\\"div\\", { foo: \\"bar\\" })
+              "return _createElementVNode(\\"div\\", { foo: \\"bar\\" })
                "
           `)
     })
@@ -678,7 +679,7 @@ describe('compiler: codegen', () => {
     test('with children, no props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
         .toMatchInlineSnapshot(`
-        "return _createVNode(\\"div\\", null, children)
+        "return _createElementVNode(\\"div\\", null, children)
          "
       `)
     })
@@ -686,7 +687,7 @@ describe('compiler: codegen', () => {
     test('with children + props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
         .toMatchInlineSnapshot(`
-        "return _createVNode(\\"div\\", { foo: \\"bar\\" }, children)
+        "return _createElementVNode(\\"div\\", { foo: \\"bar\\" }, children)
          "
       `)
     })
@@ -694,7 +695,7 @@ describe('compiler: codegen', () => {
     test('with patchFlag and no children/props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
         .toMatchInlineSnapshot(`
-        "return _createVNode(\\"div\\", null, null, 1)
+        "return _createElementVNode(\\"div\\", null, null, 1)
          "
       `)
     })
@@ -714,7 +715,7 @@ describe('compiler: codegen', () => {
           )
         )
       ).toMatchInlineSnapshot(`
-        "return (_openBlock(), _createBlock(\\"div\\", { foo: \\"bar\\" }, children))
+        "return (_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
          "
       `)
     })
@@ -735,7 +736,7 @@ describe('compiler: codegen', () => {
           )
         )
       ).toMatchInlineSnapshot(`
-        "return (_openBlock(true), _createBlock(\\"div\\", { foo: \\"bar\\" }, children))
+        "return (_openBlock(true), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
          "
       `)
     })
@@ -754,7 +755,7 @@ describe('compiler: codegen', () => {
           )
         )
       ).toMatchInlineSnapshot(`
-        "return _withDirectives(_createVNode(\\"div\\", { foo: \\"bar\\" }, children), [
+        "return _withDirectives(_createElementVNode(\\"div\\", { foo: \\"bar\\" }, children), [
               [foo, bar]
             ])
          "
@@ -776,7 +777,7 @@ describe('compiler: codegen', () => {
           )
         )
       ).toMatchInlineSnapshot(`
-        "return _withDirectives((_openBlock(), _createBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
+        "return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
               [foo, bar]
             ])
          "
diff --git a/packages/compiler-core/__tests__/scopeId.spec.ts b/packages/compiler-core/__tests__/scopeId.spec.ts
index 37ffb8893ca..5f8cef3e77e 100644
--- a/packages/compiler-core/__tests__/scopeId.spec.ts
+++ b/packages/compiler-core/__tests__/scopeId.spec.ts
@@ -1,6 +1,6 @@
 import { baseCompile } from '../src/compile'
 import { PUSH_SCOPE_ID, POP_SCOPE_ID } from '../src/runtimeHelpers'
-import { PatchFlags } from '@vue/shared'
+import { PatchFlags, ShapeFlagNames, ShapeFlags } from '@vue/shared'
 import { genFlagText } from './testUtils'
 
 /**
@@ -73,11 +73,17 @@ describe('scopeId compiler support', () => {
     expect(code).toMatch(
       [
         `_pushScopeId("test")`,
-        `const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "hello", ${genFlagText(
+        `const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
           PatchFlags.HOISTED
+        )}, null, ${genFlagText(
+          [ShapeFlags.ELEMENT, ShapeFlags.TEXT_CHILDREN],
+          ShapeFlagNames
         )})`,
-        `const _hoisted_2 = /*#__PURE__*/_createVNode("div", null, "world", ${genFlagText(
+        `const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
           PatchFlags.HOISTED
+        )}, null, ${genFlagText(
+          [ShapeFlags.ELEMENT, ShapeFlags.TEXT_CHILDREN],
+          ShapeFlagNames
         )})`,
         `_popScopeId()`
       ].join('\n')
diff --git a/packages/compiler-core/__tests__/testUtils.ts b/packages/compiler-core/__tests__/testUtils.ts
index 61d2d8d0fce..2761aba698a 100644
--- a/packages/compiler-core/__tests__/testUtils.ts
+++ b/packages/compiler-core/__tests__/testUtils.ts
@@ -6,7 +6,13 @@ import {
   ElementTypes,
   VNodeCall
 } from '../src'
-import { isString, PatchFlags, PatchFlagNames, isArray } from '@vue/shared'
+import {
+  isString,
+  PatchFlags,
+  PatchFlagNames,
+  isArray,
+  ShapeFlags
+} from '@vue/shared'
 
 const leadingBracketRE = /^\[/
 const bracketsRE = /^\[|\]$/g
@@ -63,19 +69,25 @@ export function createElementWithCodegen(
       directives: undefined,
       isBlock: false,
       disableTracking: false,
+      isComponent: false,
+      shapeFlag: ShapeFlags.ELEMENT + ``,
       loc: locStub
     }
   }
 }
 
-export function genFlagText(flag: PatchFlags | PatchFlags[]) {
+type Flags = PatchFlags | ShapeFlags
+export function genFlagText(
+  flag: Flags | Flags[],
+  names: { [k: number]: string } = PatchFlagNames
+) {
   if (isArray(flag)) {
     let f = 0
     flag.forEach(ff => {
       f |= ff
     })
-    return `${f} /* ${flag.map(f => PatchFlagNames[f]).join(', ')} */`
+    return `${f} /* ${flag.map(f => names[f]).join(', ')} */`
   } else {
-    return `${flag} /* ${PatchFlagNames[flag]} */`
+    return `${flag} /* ${names[flag]} */`
   }
 }
diff --git a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
index 37e91628479..a91635ed687 100644
--- a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
@@ -10,7 +10,12 @@ import {
   ForNode,
   ConstantTypes
 } from '../../src'
-import { FRAGMENT, RENDER_LIST, CREATE_TEXT } from '../../src/runtimeHelpers'
+import {
+  FRAGMENT,
+  RENDER_LIST,
+  CREATE_TEXT,
+  NORMALIZE_CLASS
+} from '../../src/runtimeHelpers'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformExpression } from '../../src/transforms/transformExpression'
 import { transformIf } from '../../src/transforms/vIf'
@@ -510,9 +515,15 @@ describe('compiler: hoistStatic transform', () => {
                 constType: ConstantTypes.CAN_STRINGIFY
               },
               value: {
-                content: `{ foo: true }`,
-                isStatic: false,
-                constType: ConstantTypes.CAN_STRINGIFY
+                type: NodeTypes.JS_CALL_EXPRESSION,
+                callee: NORMALIZE_CLASS,
+                arguments: [
+                  {
+                    content: `{ foo: true }`,
+                    isStatic: false,
+                    constType: ConstantTypes.CAN_STRINGIFY
+                  }
+                ]
               }
             }
           ]
diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 33fdb7dba19..a5c5e866085 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -17,7 +17,12 @@ import {
   RESOLVE_DYNAMIC_COMPONENT,
   SUSPENSE,
   KEEP_ALIVE,
-  BASE_TRANSITION
+  BASE_TRANSITION,
+  NORMALIZE_CLASS,
+  NORMALIZE_STYLE,
+  NORMALIZE_PROPS,
+  NORMALIZE_PROPS_FOR_STYLE,
+  GUARD_REACTIVE_PROPS
 } from '../../src/runtimeHelpers'
 import {
   NodeTypes,
@@ -158,11 +163,25 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<div v-bind="obj" />`)
     // single v-bind doesn't need mergeProps
     expect(root.helpers).not.toContain(MERGE_PROPS)
+    expect(root.helpers).toContain(NORMALIZE_PROPS)
+    expect(root.helpers).toContain(GUARD_REACTIVE_PROPS)
 
     // should directly use `obj` in props position
     expect(node.props).toMatchObject({
-      type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `obj`
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: NORMALIZE_PROPS,
+      arguments: [
+        {
+          type: NodeTypes.JS_CALL_EXPRESSION,
+          callee: GUARD_REACTIVE_PROPS,
+          arguments: [
+            {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: `obj`
+            }
+          ]
+        }
+      ]
     })
   })
 
@@ -171,17 +190,24 @@ describe('compiler: element transform', () => {
       `<div id="foo" v-bind="obj" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
+    expect(root.helpers).toContain(NORMALIZE_PROPS)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: NORMALIZE_PROPS,
       arguments: [
-        createObjectMatcher({
-          id: 'foo'
-        }),
         {
-          type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
+          type: NodeTypes.JS_CALL_EXPRESSION,
+          callee: MERGE_PROPS,
+          arguments: [
+            createObjectMatcher({
+              id: 'foo'
+            }),
+            {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: `obj`
+            }
+          ]
         }
       ]
     })
@@ -192,18 +218,25 @@ describe('compiler: element transform', () => {
       `<div v-bind="obj" id="foo" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
+    expect(root.helpers).toContain(NORMALIZE_PROPS)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: NORMALIZE_PROPS,
       arguments: [
         {
-          type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
-        },
-        createObjectMatcher({
-          id: 'foo'
-        })
+          type: NodeTypes.JS_CALL_EXPRESSION,
+          callee: MERGE_PROPS,
+          arguments: [
+            {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: `obj`
+            },
+            createObjectMatcher({
+              id: 'foo'
+            })
+          ]
+        }
       ]
     })
   })
@@ -213,21 +246,28 @@ describe('compiler: element transform', () => {
       `<div id="foo" v-bind="obj" class="bar" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
+    expect(root.helpers).toContain(NORMALIZE_PROPS_FOR_STYLE)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: NORMALIZE_PROPS_FOR_STYLE,
       arguments: [
-        createObjectMatcher({
-          id: 'foo'
-        }),
         {
-          type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
-        },
-        createObjectMatcher({
-          class: 'bar'
-        })
+          type: NodeTypes.JS_CALL_EXPRESSION,
+          callee: MERGE_PROPS,
+          arguments: [
+            createObjectMatcher({
+              id: 'foo'
+            }),
+            {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: `obj`
+            },
+            createObjectMatcher({
+              class: 'bar'
+            })
+          ]
+        }
       ]
     })
   })
@@ -237,27 +277,34 @@ describe('compiler: element transform', () => {
       `<div id="foo" v-on="obj" class="bar" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
+    expect(root.helpers).toContain(NORMALIZE_PROPS_FOR_STYLE)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: NORMALIZE_PROPS_FOR_STYLE,
       arguments: [
-        createObjectMatcher({
-          id: 'foo'
-        }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: TO_HANDLERS,
+          callee: MERGE_PROPS,
           arguments: [
+            createObjectMatcher({
+              id: 'foo'
+            }),
             {
-              type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
-            }
+              type: NodeTypes.JS_CALL_EXPRESSION,
+              callee: TO_HANDLERS,
+              arguments: [
+                {
+                  type: NodeTypes.SIMPLE_EXPRESSION,
+                  content: `obj`
+                }
+              ]
+            },
+            createObjectMatcher({
+              class: 'bar'
+            })
           ]
-        },
-        createObjectMatcher({
-          class: 'bar'
-        })
+        }
       ]
     })
   })
@@ -267,27 +314,34 @@ describe('compiler: element transform', () => {
       `<div id="foo" v-on="handlers" v-bind="obj" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
+    expect(root.helpers).toContain(NORMALIZE_PROPS)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: NORMALIZE_PROPS,
       arguments: [
-        createObjectMatcher({
-          id: 'foo'
-        }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: TO_HANDLERS,
+          callee: MERGE_PROPS,
           arguments: [
+            createObjectMatcher({
+              id: 'foo'
+            }),
+            {
+              type: NodeTypes.JS_CALL_EXPRESSION,
+              callee: TO_HANDLERS,
+              arguments: [
+                {
+                  type: NodeTypes.SIMPLE_EXPRESSION,
+                  content: `handlers`
+                }
+              ]
+            },
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `handlers`
+              content: `obj`
             }
           ]
-        },
-        {
-          type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
         }
       ]
     })
@@ -654,7 +708,7 @@ describe('compiler: element transform', () => {
   })
 
   test(`props merging: style`, () => {
-    const { node } = parseWithElementTransform(
+    const { node, root } = parseWithElementTransform(
       `<div style="color: green" :style="{ color: 'red' }" />`,
       {
         nodeTransforms: [transformStyle, transformElement],
@@ -663,6 +717,7 @@ describe('compiler: element transform', () => {
         }
       }
     )
+    expect(root.helpers).toContain(NORMALIZE_STYLE)
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_OBJECT_EXPRESSION,
       properties: [
@@ -674,17 +729,23 @@ describe('compiler: element transform', () => {
             isStatic: true
           },
           value: {
-            type: NodeTypes.JS_ARRAY_EXPRESSION,
-            elements: [
+            type: NodeTypes.JS_CALL_EXPRESSION,
+            callee: NORMALIZE_STYLE,
+            arguments: [
               {
-                type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `{"color":"green"}`,
-                isStatic: false
-              },
-              {
-                type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `{ color: 'red' }`,
-                isStatic: false
+                type: NodeTypes.JS_ARRAY_EXPRESSION,
+                elements: [
+                  {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: `{"color":"green"}`,
+                    isStatic: false
+                  },
+                  {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: `{ color: 'red' }`,
+                    isStatic: false
+                  }
+                ]
               }
             ]
           }
@@ -694,7 +755,7 @@ describe('compiler: element transform', () => {
   })
 
   test(`props merging: class`, () => {
-    const { node } = parseWithElementTransform(
+    const { node, root } = parseWithElementTransform(
       `<div class="foo" :class="{ bar: isBar }" />`,
       {
         directiveTransforms: {
@@ -702,6 +763,7 @@ describe('compiler: element transform', () => {
         }
       }
     )
+    expect(root.helpers).toContain(NORMALIZE_CLASS)
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_OBJECT_EXPRESSION,
       properties: [
@@ -713,17 +775,23 @@ describe('compiler: element transform', () => {
             isStatic: true
           },
           value: {
-            type: NodeTypes.JS_ARRAY_EXPRESSION,
-            elements: [
-              {
-                type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `foo`,
-                isStatic: true
-              },
+            type: NodeTypes.JS_CALL_EXPRESSION,
+            callee: NORMALIZE_CLASS,
+            arguments: [
               {
-                type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `{ bar: isBar }`,
-                isStatic: false
+                type: NodeTypes.JS_ARRAY_EXPRESSION,
+                elements: [
+                  {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: `foo`,
+                    isStatic: true
+                  },
+                  {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: `{ bar: isBar }`,
+                    isStatic: false
+                  }
+                ]
               }
             ]
           }
diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
index f1b91cc4567..5d0371a738a 100644
--- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
@@ -22,6 +22,7 @@ import {
   CREATE_COMMENT,
   FRAGMENT,
   MERGE_PROPS,
+  NORMALIZE_PROPS,
   RENDER_SLOT
 } from '../../src/runtimeHelpers'
 import { createObjectMatcher } from '../testUtils'
@@ -556,8 +557,14 @@ describe('compiler: v-if', () => {
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: MERGE_PROPS,
-        arguments: [createObjectMatcher({ key: `[0]` }), { content: `obj` }]
+        callee: NORMALIZE_PROPS,
+        arguments: [
+          {
+            type: NodeTypes.JS_CALL_EXPRESSION,
+            callee: MERGE_PROPS,
+            arguments: [createObjectMatcher({ key: `[0]` }), { content: `obj` }]
+          }
+        ]
       })
     })
 
@@ -568,13 +575,19 @@ describe('compiler: v-if', () => {
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: MERGE_PROPS,
+        callee: NORMALIZE_PROPS,
         arguments: [
-          createObjectMatcher({
-            key: '[0]',
-            id: 'foo'
-          }),
-          { content: `obj` }
+          {
+            type: NodeTypes.JS_CALL_EXPRESSION,
+            callee: MERGE_PROPS,
+            arguments: [
+              createObjectMatcher({
+                key: '[0]',
+                id: 'foo'
+              }),
+              { content: `obj` }
+            ]
+          }
         ]
       })
     })
@@ -586,13 +599,19 @@ describe('compiler: v-if', () => {
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: MERGE_PROPS,
+        callee: NORMALIZE_PROPS,
         arguments: [
-          createObjectMatcher({ key: `[0]` }),
-          { content: `obj` },
-          createObjectMatcher({
-            id: 'foo'
-          })
+          {
+            type: NodeTypes.JS_CALL_EXPRESSION,
+            callee: MERGE_PROPS,
+            arguments: [
+              createObjectMatcher({ key: `[0]` }),
+              { content: `obj` },
+              createObjectMatcher({
+                id: 'foo'
+              })
+            ]
+          }
         ]
       })
     })
diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index df843520209..7e97919f419 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -5,10 +5,14 @@ import {
   CREATE_SLOTS,
   RENDER_LIST,
   OPEN_BLOCK,
-  CREATE_BLOCK,
   FRAGMENT,
-  CREATE_VNODE,
-  WITH_DIRECTIVES
+  WITH_DIRECTIVES,
+  CREATE_COMPONENT_VNODE,
+  CREATE_ELEMENT_VNODE,
+  CREATE_COMPONENT_BLOCK,
+  CREATE_ELEMENT_BLOCK,
+  CREATE_BLOCK,
+  CREATE_VNODE
 } from './runtimeHelpers'
 import { PropsExpression } from './transforms/transformElement'
 import { ImportItem, TransformContext } from './transform'
@@ -293,6 +297,8 @@ export interface VNodeCall extends Node {
   directives: DirectiveArguments | undefined
   isBlock: boolean
   disableTracking: boolean
+  isComponent: boolean
+  shapeFlag: string | undefined
 }
 
 // JS Node Types ---------------------------------------------------------------
@@ -560,14 +566,28 @@ export function createVNodeCall(
   directives?: VNodeCall['directives'],
   isBlock: VNodeCall['isBlock'] = false,
   disableTracking: VNodeCall['disableTracking'] = false,
+  isComponent: VNodeCall['isComponent'] = false,
+  shapeFlag: VNodeCall['shapeFlag'] = undefined,
   loc = locStub
 ): VNodeCall {
   if (context) {
     if (isBlock) {
       context.helper(OPEN_BLOCK)
-      context.helper(CREATE_BLOCK)
+      context.helper(
+        context.forSSR
+          ? CREATE_BLOCK
+          : isComponent
+            ? CREATE_COMPONENT_BLOCK
+            : CREATE_ELEMENT_BLOCK
+      )
     } else {
-      context.helper(CREATE_VNODE)
+      context.helper(
+        context.forSSR
+          ? CREATE_VNODE
+          : isComponent
+            ? CREATE_COMPONENT_VNODE
+            : CREATE_ELEMENT_VNODE
+      )
     }
     if (directives) {
       context.helper(WITH_DIRECTIVES)
@@ -584,6 +604,8 @@ export function createVNodeCall(
     directives,
     isBlock,
     disableTracking,
+    isComponent,
+    shapeFlag,
     loc
   }
 }
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 6367743d8bc..c74891ea1d9 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -47,11 +47,15 @@ import {
   POP_SCOPE_ID,
   WITH_SCOPE_ID,
   WITH_DIRECTIVES,
-  CREATE_BLOCK,
+  CREATE_ELEMENT_BLOCK,
+  CREATE_COMPONENT_BLOCK,
+  CREATE_ELEMENT_VNODE,
+  CREATE_COMPONENT_VNODE,
   OPEN_BLOCK,
   CREATE_STATIC,
   WITH_CTX,
-  RESOLVE_FILTER
+  RESOLVE_FILTER,
+  CREATE_BLOCK
 } from './runtimeHelpers'
 import { ImportItem } from './transform'
 
@@ -98,7 +102,8 @@ function createCodegenContext(
     optimizeImports = false,
     runtimeGlobalName = `Vue`,
     runtimeModuleName = `vue`,
-    ssr = false
+    ssr = false,
+    forSSR = false
   }: CodegenOptions
 ): CodegenContext {
   const context: CodegenContext = {
@@ -111,6 +116,7 @@ function createCodegenContext(
     runtimeGlobalName,
     runtimeModuleName,
     ssr,
+    forSSR,
     source: ast.loc.source,
     code: ``,
     column: 1,
@@ -219,7 +225,6 @@ export function generate(
   } else {
     genFunctionPreamble(ast, preambleContext)
   }
-
   // enter render function
   const functionName = ssr ? `ssrRender` : `render`
   const args = ssr ? ['_ctx', '_push', '_parent', '_attrs'] : ['_ctx', '_cache']
@@ -356,6 +361,8 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
       if (ast.hoists.length) {
         const staticHelpers = [
           CREATE_VNODE,
+          CREATE_ELEMENT_VNODE,
+          CREATE_COMPONENT_VNODE,
           CREATE_COMMENT,
           CREATE_TEXT,
           CREATE_STATIC
@@ -752,10 +759,12 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
     props,
     children,
     patchFlag,
+    shapeFlag,
     dynamicProps,
     directives,
     isBlock,
-    disableTracking
+    disableTracking,
+    isComponent
   } = node
   if (directives) {
     push(helper(WITH_DIRECTIVES) + `(`)
@@ -766,9 +775,26 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
   if (pure) {
     push(PURE_ANNOTATION)
   }
-  push(helper(isBlock ? CREATE_BLOCK : CREATE_VNODE) + `(`, node)
+  let callHelper: symbol = isBlock ? CREATE_BLOCK : CREATE_VNODE
+  if (!context.ssr) {
+    callHelper = isBlock
+      ? isComponent
+        ? CREATE_COMPONENT_BLOCK
+        : CREATE_ELEMENT_BLOCK
+      : isComponent
+        ? CREATE_COMPONENT_VNODE
+        : CREATE_ELEMENT_VNODE
+  }
+  push(helper(callHelper) + `(`, node)
   genNodeList(
-    genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
+    genNullableArgs([
+      tag,
+      props,
+      children,
+      patchFlag,
+      dynamicProps,
+      context.ssr ? null : shapeFlag
+    ]),
     context
   )
   push(`)`)
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index a387c167875..b4a51dd730d 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -125,8 +125,17 @@ interface SharedTransformCodegenOptions {
    * Generate SSR-optimized render functions instead.
    * The resulting function must be attached to the component via the
    * `ssrRender` option instead of `render`.
+   * Note: it is used to indicate the runtime environment of the generated code
    */
   ssr?: boolean
+  /**
+   * Indicates whether the compiler generates code for SSR,
+   * when compiler generates code for the fallback branch of SSR:
+   *  - context.ssr = false
+   *  - context.forSSR = true
+   * see `subTransform` in `ssrTransformCompoent.ts`
+   */
+  forSSR?: boolean
   /**
    * Optional binding metadata analyzed from script - used to optimize
    * binding access when `prefixIdentifiers` is enabled.
diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index 94ce1ebc990..269e270f8de 100644
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -5,7 +5,15 @@ export const KEEP_ALIVE = Symbol(__DEV__ ? `KeepAlive` : ``)
 export const BASE_TRANSITION = Symbol(__DEV__ ? `BaseTransition` : ``)
 export const OPEN_BLOCK = Symbol(__DEV__ ? `openBlock` : ``)
 export const CREATE_BLOCK = Symbol(__DEV__ ? `createBlock` : ``)
+export const CREATE_ELEMENT_BLOCK = Symbol(__DEV__ ? `createElementBlock` : ``)
+export const CREATE_COMPONENT_BLOCK = Symbol(
+  __DEV__ ? `createComponentBlock` : ``
+)
 export const CREATE_VNODE = Symbol(__DEV__ ? `createVNode` : ``)
+export const CREATE_ELEMENT_VNODE = Symbol(__DEV__ ? `createElementVNode` : ``)
+export const CREATE_COMPONENT_VNODE = Symbol(
+  __DEV__ ? `createComponentVNode` : ``
+)
 export const CREATE_COMMENT = Symbol(__DEV__ ? `createCommentVNode` : ``)
 export const CREATE_TEXT = Symbol(__DEV__ ? `createTextVNode` : ``)
 export const CREATE_STATIC = Symbol(__DEV__ ? `createStaticVNode` : ``)
@@ -21,6 +29,16 @@ export const RENDER_SLOT = Symbol(__DEV__ ? `renderSlot` : ``)
 export const CREATE_SLOTS = Symbol(__DEV__ ? `createSlots` : ``)
 export const TO_DISPLAY_STRING = Symbol(__DEV__ ? `toDisplayString` : ``)
 export const MERGE_PROPS = Symbol(__DEV__ ? `mergeProps` : ``)
+export const NORMALIZE_CLASS = Symbol(__DEV__ ? `normalizeClass` : ``)
+export const NORMALIZE_STYLE = Symbol(__DEV__ ? `normalizeStyle` : ``)
+export const NORMALIZE_PROPS = Symbol(__DEV__ ? `normalizeProps` : ``)
+export const NORMALIZE_PROPS_FOR_CLASS = Symbol(
+  __DEV__ ? `normalizePropsForClass` : ``
+)
+export const NORMALIZE_PROPS_FOR_STYLE = Symbol(
+  __DEV__ ? `normalizePropsForStyle` : ``
+)
+export const GUARD_REACTIVE_PROPS = Symbol(__DEV__ ? `guardReactiveProps` : ``)
 export const TO_HANDLERS = Symbol(__DEV__ ? `toHandlers` : ``)
 export const CAMELIZE = Symbol(__DEV__ ? `camelize` : ``)
 export const CAPITALIZE = Symbol(__DEV__ ? `capitalize` : ``)
@@ -44,7 +62,11 @@ export const helperNameMap: any = {
   [BASE_TRANSITION]: `BaseTransition`,
   [OPEN_BLOCK]: `openBlock`,
   [CREATE_BLOCK]: `createBlock`,
+  [CREATE_ELEMENT_BLOCK]: `createElementBlock`,
+  [CREATE_COMPONENT_BLOCK]: `createComponentBlock`,
   [CREATE_VNODE]: `createVNode`,
+  [CREATE_ELEMENT_VNODE]: `createElementVNode`,
+  [CREATE_COMPONENT_VNODE]: `createComponentVNode`,
   [CREATE_COMMENT]: `createCommentVNode`,
   [CREATE_TEXT]: `createTextVNode`,
   [CREATE_STATIC]: `createStaticVNode`,
@@ -58,6 +80,12 @@ export const helperNameMap: any = {
   [CREATE_SLOTS]: `createSlots`,
   [TO_DISPLAY_STRING]: `toDisplayString`,
   [MERGE_PROPS]: `mergeProps`,
+  [NORMALIZE_CLASS]: `normalizeClass`,
+  [NORMALIZE_STYLE]: `normalizeStyle`,
+  [NORMALIZE_PROPS]: `normalizeProps`,
+  [NORMALIZE_PROPS_FOR_CLASS]: `normalizePropsForClass`,
+  [NORMALIZE_PROPS_FOR_STYLE]: `normalizePropsForStyle`,
+  [GUARD_REACTIVE_PROPS]: `guardReactiveProps`,
   [TO_HANDLERS]: `toHandlers`,
   [CAMELIZE]: `camelize`,
   [CAPITALIZE]: `capitalize`,
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index add7ea13c4b..98d4238fa40 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -26,17 +26,23 @@ import {
   PatchFlagNames,
   EMPTY_OBJ,
   capitalize,
-  camelize
+  camelize,
+  ShapeFlags,
+  ShapeFlagNames
 } from '@vue/shared'
 import { defaultOnError, defaultOnWarn } from './errors'
 import {
   TO_DISPLAY_STRING,
   FRAGMENT,
   helperNameMap,
-  CREATE_BLOCK,
   CREATE_COMMENT,
   OPEN_BLOCK,
-  CREATE_VNODE
+  CREATE_ELEMENT_BLOCK,
+  CREATE_COMPONENT_BLOCK,
+  CREATE_BLOCK,
+  CREATE_VNODE,
+  CREATE_COMPONENT_VNODE,
+  CREATE_ELEMENT_VNODE
 } from './runtimeHelpers'
 import { isVSlot } from './utils'
 import { hoistStatic, isSingleElementRoot } from './transforms/hoistStatic'
@@ -139,6 +145,7 @@ export function createTransformContext(
     scopeId = null,
     slotted = true,
     ssr = false,
+    forSSR = false,
     ssrCssVars = ``,
     bindingMetadata = EMPTY_OBJ,
     inline = false,
@@ -164,6 +171,7 @@ export function createTransformContext(
     scopeId,
     slotted,
     ssr,
+    forSSR,
     ssrCssVars,
     bindingMetadata,
     inline,
@@ -346,10 +354,22 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
       const codegenNode = child.codegenNode
       if (codegenNode.type === NodeTypes.VNODE_CALL) {
         if (!codegenNode.isBlock) {
-          removeHelper(CREATE_VNODE)
           codegenNode.isBlock = true
+          removeHelper(
+            context.ssr
+              ? CREATE_VNODE
+              : codegenNode.isComponent
+                ? CREATE_COMPONENT_VNODE
+                : CREATE_ELEMENT_VNODE
+          )
           helper(OPEN_BLOCK)
-          helper(CREATE_BLOCK)
+          helper(
+            context.ssr
+              ? CREATE_BLOCK
+              : codegenNode.isComponent
+                ? CREATE_COMPONENT_BLOCK
+                : CREATE_ELEMENT_BLOCK
+          )
         }
       }
       root.codegenNode = codegenNode
@@ -380,7 +400,11 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
       patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``),
       undefined,
       undefined,
-      true
+      true,
+      undefined,
+      false /* isComponent */,
+      ShapeFlags.ARRAY_CHILDREN +
+        (__DEV__ ? ` /* ${ShapeFlagNames[ShapeFlags.ARRAY_CHILDREN]} */` : ``)
     )
   } else {
     // no children = noop. codegen will return null.
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index 119a1a3856a..4e5455e9fb9 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -9,12 +9,28 @@ import {
   ComponentNode,
   TemplateNode,
   VNodeCall,
-  ParentNode
+  ParentNode,
+  JSChildNode,
+  CallExpression
 } from '../ast'
 import { TransformContext } from '../transform'
 import { PatchFlags, isString, isSymbol } from '@vue/shared'
 import { isSlotOutlet } from '../utils'
-import { CREATE_BLOCK, CREATE_VNODE, OPEN_BLOCK } from '../runtimeHelpers'
+import {
+  OPEN_BLOCK,
+  CREATE_BLOCK,
+  CREATE_COMPONENT_VNODE,
+  CREATE_ELEMENT_VNODE,
+  CREATE_VNODE,
+  GUARD_REACTIVE_PROPS,
+  NORMALIZE_CLASS,
+  NORMALIZE_PROPS,
+  NORMALIZE_PROPS_FOR_CLASS,
+  NORMALIZE_PROPS_FOR_STYLE,
+  NORMALIZE_STYLE,
+  CREATE_COMPONENT_BLOCK,
+  CREATE_ELEMENT_BLOCK
+} from '../runtimeHelpers'
 
 export function hoistStatic(root: RootNode, context: TransformContext) {
   walk(
@@ -213,9 +229,21 @@ export function getConstantType(
         // nested updates.
         if (codegenNode.isBlock) {
           context.removeHelper(OPEN_BLOCK)
-          context.removeHelper(CREATE_BLOCK)
+          context.removeHelper(
+            context.ssr
+              ? CREATE_BLOCK
+              : codegenNode.isComponent
+                ? CREATE_COMPONENT_BLOCK
+                : CREATE_ELEMENT_BLOCK
+          )
           codegenNode.isBlock = false
-          context.helper(CREATE_VNODE)
+          context.helper(
+            context.ssr
+              ? CREATE_VNODE
+              : codegenNode.isComponent
+                ? CREATE_COMPONENT_VNODE
+                : CREATE_ELEMENT_VNODE
+          )
         }
 
         constantCache.set(node, returnType)
@@ -260,6 +288,34 @@ export function getConstantType(
   }
 }
 
+const allowHoistedHelperSet = new Set<string | symbol>([
+  NORMALIZE_CLASS,
+  NORMALIZE_STYLE,
+  NORMALIZE_PROPS,
+  NORMALIZE_PROPS_FOR_CLASS,
+  NORMALIZE_PROPS_FOR_STYLE,
+  GUARD_REACTIVE_PROPS
+])
+
+function getConstantTypeOfHelperCall(
+  value: CallExpression,
+  context: TransformContext
+): ConstantTypes {
+  if (
+    value.type === NodeTypes.JS_CALL_EXPRESSION &&
+    allowHoistedHelperSet.has(value.callee)
+  ) {
+    const arg = value.arguments[0] as JSChildNode
+    if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
+      return getConstantType(arg, context)
+    } else if (arg.type === NodeTypes.JS_CALL_EXPRESSION) {
+      // in the case of nested calls, e.g. `normalizeProps(guardReactiveProps(exp))`
+      return getConstantTypeOfHelperCall(arg, context)
+    }
+  }
+  return ConstantTypes.NOT_CONSTANT
+}
+
 function getGeneratedPropsConstantType(
   node: PlainElementNode,
   context: TransformContext
@@ -278,6 +334,12 @@ function getGeneratedPropsConstantType(
         returnType = keyType
       }
       if (value.type !== NodeTypes.SIMPLE_EXPRESSION) {
+        // some function calls can be hoisted,
+        // such as the `normalizeClass` call generated by the compiler for pre-normalize class,
+        // in this case we need to respect the ConstanType of the function's argments
+        if (value.type === NodeTypes.JS_CALL_EXPRESSION) {
+          return getConstantTypeOfHelperCall(value, context)
+        }
         return ConstantTypes.NOT_CONSTANT
       }
       const valueType = getConstantType(value, context)
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index dba1a99b487..6e3a4d9356a 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -29,7 +29,9 @@ import {
   isObject,
   isReservedProp,
   capitalize,
-  camelize
+  camelize,
+  ShapeFlags,
+  ShapeFlagNames
 } from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import {
@@ -37,11 +39,17 @@ import {
   RESOLVE_COMPONENT,
   RESOLVE_DYNAMIC_COMPONENT,
   MERGE_PROPS,
+  NORMALIZE_CLASS,
+  NORMALIZE_STYLE,
+  NORMALIZE_PROPS,
+  NORMALIZE_PROPS_FOR_CLASS,
+  NORMALIZE_PROPS_FOR_STYLE,
   TO_HANDLERS,
   TELEPORT,
   KEEP_ALIVE,
   SUSPENSE,
-  UNREF
+  UNREF,
+  GUARD_REACTIVE_PROPS
 } from '../runtimeHelpers'
 import {
   getInnerRange,
@@ -101,6 +109,14 @@ export const transformElement: NodeTransform = (node, context) => {
     let vnodeDynamicProps: VNodeCall['dynamicProps']
     let dynamicPropNames: string[] | undefined
     let vnodeDirectives: VNodeCall['directives']
+    let vnodeShapeFlag: VNodeCall['shapeFlag']
+    let shapeFlag: number = !isComponent
+      ? ShapeFlags.ELEMENT
+      : vnodeTag === TELEPORT
+        ? ShapeFlags.TELEPORT
+        : vnodeTag === SUSPENSE
+          ? ShapeFlags.SUSPENSE
+          : 0
 
     let shouldUseBlock =
       // dynamic component may resolve to plain elements
@@ -185,11 +201,14 @@ export const transformElement: NodeTransform = (node, context) => {
         // (plain / interpolation / expression)
         if (hasDynamicTextChild || type === NodeTypes.TEXT) {
           vnodeChildren = child as TemplateTextChildNode
+          shapeFlag |= ShapeFlags.TEXT_CHILDREN
         } else {
           vnodeChildren = node.children
+          shapeFlag |= ShapeFlags.ARRAY_CHILDREN
         }
       } else {
         vnodeChildren = node.children
+        shapeFlag |= ShapeFlags.ARRAY_CHILDREN
       }
     }
 
@@ -216,6 +235,19 @@ export const transformElement: NodeTransform = (node, context) => {
       }
     }
 
+    if (shapeFlag > 1) {
+      if (__DEV__) {
+        // bitwise flags
+        const flagNames = Object.keys(ShapeFlagNames)
+          .map(Number)
+          .filter(n => shapeFlag & n)
+          .map(n => ShapeFlagNames[n])
+          .join(`, `)
+        vnodeShapeFlag = shapeFlag + ` /* ${flagNames} */`
+      } else {
+        vnodeShapeFlag = String(shapeFlag)
+      }
+    }
     node.codegenNode = createVNodeCall(
       context,
       vnodeTag,
@@ -226,6 +258,8 @@ export const transformElement: NodeTransform = (node, context) => {
       vnodeDirectives,
       !!shouldUseBlock,
       false /* disableTracking */,
+      isComponent,
+      vnodeShapeFlag,
       node.loc
     )
   }
@@ -401,15 +435,24 @@ export function buildProps(
         // skip if the prop is a cached handler or has constant value
         return
       }
+
       if (name === 'ref') {
         hasRef = true
-      } else if (name === 'class' && !isComponent) {
+      } else if (name === 'class') {
         hasClassBinding = true
-      } else if (name === 'style' && !isComponent) {
+      } else if (name === 'style') {
         hasStyleBinding = true
       } else if (name !== 'key' && !dynamicPropNames.includes(name)) {
         dynamicPropNames.push(name)
       }
+
+      if (
+        isComponent &&
+        (name === 'class' || name === 'style') &&
+        !dynamicPropNames.includes(name)
+      ) {
+        dynamicPropNames.push(name)
+      }
     } else {
       hasDynamicKeys = true
     }
@@ -627,10 +670,10 @@ export function buildProps(
   if (hasDynamicKeys) {
     patchFlag |= PatchFlags.FULL_PROPS
   } else {
-    if (hasClassBinding) {
+    if (hasClassBinding && !isComponent) {
       patchFlag |= PatchFlags.CLASS
     }
-    if (hasStyleBinding) {
+    if (hasStyleBinding && !isComponent) {
       patchFlag |= PatchFlags.STYLE
     }
     if (dynamicPropNames.length) {
@@ -647,6 +690,94 @@ export function buildProps(
     patchFlag |= PatchFlags.NEED_PATCH
   }
 
+  // pre-normalize props, SSR skip for now
+  if (!context.forSSR && propsExpression) {
+    switch (propsExpression.type) {
+      case NodeTypes.JS_OBJECT_EXPRESSION:
+        // indicates that there is no v-bind="obj" binding
+        const helperToUse = doNormalize(
+          context,
+          propsExpression.properties,
+          hasClassBinding,
+          hasStyleBinding
+        )
+
+        if (helperToUse) {
+          propsExpression = createCallExpression(context.helper(helperToUse), [
+            propsExpression
+          ])
+        }
+        break
+      case NodeTypes.JS_CALL_EXPRESSION:
+        // call of `mergeProps`
+        if (propsExpression.callee === MERGE_PROPS) {
+          let vBindIndex = -1
+          let lastObjectExpressionIndex = -1
+          const args = propsExpression.arguments as PropsExpression[]
+          // 1. find the index of v-bind and object express
+          for (let i = 0; i < propsExpression.arguments.length; i++) {
+            const arg = args[i]
+            if (
+              arg.type === NodeTypes.SIMPLE_EXPRESSION ||
+              arg.type === NodeTypes.COMPOUND_EXPRESSION
+            ) {
+              // v-bind="obj"   -->  SIMPLE_EXPRESSION
+              // v-bind="fn()"  -->  COMPOUND_EXPRESSION
+              vBindIndex = i
+            } else if (arg.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+              lastObjectExpressionIndex = i
+            }
+          }
+          /**
+           * 1. <p v-bind="xx" class="xx" />
+           *    mergeProps(ExpressionNode, ObjectExpression)
+           *      - vBindIndex: 0
+           *      - objectExpressionIndex: 1
+           * 2. <p class="xx" v-bind="xx" />
+           *    mergeProps(ObjectExpression, ExpressionNode)
+           *      - vBindIndex: 1
+           *      - objectExpressionIndex: 0
+           * 3. <p class="xx" v-bind="xx" style="xx" />
+           *    mergeProps(ObjectExpression, ExpressionNode, ObjectExpression)
+           *       - vBindIndex: 1
+           *       - objectExpressionIndex: 2
+           */
+          if (vBindIndex < lastObjectExpressionIndex) {
+            const helperToUse = doNormalize(
+              context,
+              (args[lastObjectExpressionIndex] as ObjectExpression).properties,
+              hasClassBinding,
+              hasStyleBinding,
+              false
+            )
+            if (helperToUse) {
+              propsExpression = createCallExpression(
+                context.helper(helperToUse),
+                [propsExpression]
+              )
+            }
+          } else {
+            propsExpression = createCallExpression(
+              context.helper(NORMALIZE_PROPS),
+              [propsExpression]
+            )
+          }
+        }
+        break
+      default:
+        // single v-bind
+        propsExpression = createCallExpression(
+          context.helper(NORMALIZE_PROPS),
+          [
+            createCallExpression(context.helper(GUARD_REACTIVE_PROPS), [
+              propsExpression
+            ])
+          ]
+        )
+        break
+    }
+  }
+
   return {
     props: propsExpression,
     directives: runtimeDirectives,
@@ -655,6 +786,98 @@ export function buildProps(
   }
 }
 
+// normalization is only needed when the dynamic binding key is before the binding of class and style
+// i.e. <p :[dynamic]="val" :class="cls" :style="stl" />
+function doNormalize(
+  context: TransformContext,
+  properties: Property[],
+  hasClassBinding: boolean,
+  hasStyleBinding: boolean,
+  treatAbsentAsNormalized: boolean = true
+) {
+  let classKeyIndex = -1
+  let styleKeyIndex = -1
+  let dynamicKeyIndex = -1
+
+  for (let i = 0; i < properties.length; i++) {
+    const p = properties[i]
+    if (!isStaticExp(p.key)) dynamicKeyIndex = i
+    if (isStaticExp(p.key) && p.key.content === 'class') classKeyIndex = i
+    if (isStaticExp(p.key) && p.key.content === 'style') styleKeyIndex = i
+  }
+
+  /**
+   * 1. in the case of no dynamic binding key, e.g. <p :class="cls" :style="stl" />
+   *    shouldNormalizeClass = true
+   *    shouldNormalizeStyle = true
+   * 1. in the case of <p :[id]="foo" :class="cls" :style="stl" />
+   *    shouldNormalizeClass = true
+   *    shouldNormalizeStyle = true
+   * 2. in the case of <p :class="cls" :[id]="foo" :style="stl" />
+   *    shouldNormalizeClass = false
+   *    shouldNormalizeStyle = true
+   * 3. in the case of <p :class="cls" style="stl" :[id]="foo" />
+   *    shouldNormalizeClass = false
+   *    shouldNormalizeStyle = false
+   * 4. in the case of <p />
+   *    shouldNormalizeClass = false
+   *    shouldNormalizeStyle = false
+   */
+  const shouldNormalizeClass = dynamicKeyIndex < classKeyIndex
+  const shouldNormalizeStyle = dynamicKeyIndex < styleKeyIndex
+
+  if (shouldNormalizeClass || shouldNormalizeStyle) {
+    for (let i = 0; i < properties.length; i++) {
+      const p = properties[i]
+      if (
+        p.key.type !== NodeTypes.SIMPLE_EXPRESSION ||
+        (p.key.content !== 'class' && p.key.content !== 'style')
+      )
+        continue
+
+      // wrap with normalizeClass/normalizeStyle
+      let helperToUse = null
+      if (
+        p.key.content === 'class' &&
+        (hasClassBinding ||
+          // class may bind a constant and be skipped during patchFlag analysis,
+          // but it should still be normalized
+          // e.g. <p :class="{ bar: true }" />
+          !isStaticExp(p.value))
+      ) {
+        helperToUse = NORMALIZE_CLASS
+      } else if (
+        p.key.content === 'style' &&
+        (hasClassBinding || !isStaticExp(p.value))
+      ) {
+        helperToUse = NORMALIZE_STYLE
+      }
+
+      p.value = helperToUse
+        ? createCallExpression(context.helper(helperToUse), [p.value])
+        : p.value
+    }
+  }
+
+  const isClassNormalized =
+    shouldNormalizeClass || (treatAbsentAsNormalized && classKeyIndex === -1)
+  const isStyleNormalized =
+    shouldNormalizeStyle || (treatAbsentAsNormalized && styleKeyIndex === -1)
+  let helperToUse = null
+  if (!isClassNormalized && !isStyleNormalized) {
+    // normalize both
+    helperToUse = NORMALIZE_PROPS
+  } else if (isClassNormalized && !isStyleNormalized) {
+    // class has been normalized, only need to normalize style
+    helperToUse = NORMALIZE_PROPS_FOR_STYLE
+  } else if (isStyleNormalized && !isClassNormalized) {
+    // style has been normalized, only need to normalize class
+    helperToUse = NORMALIZE_PROPS_FOR_CLASS
+  }
+
+  return helperToUse
+}
+
 // Dedupe props in an object literal.
 // Literal duplicated attributes would have been warned during the parse phase,
 // however, it's possible to encounter duplicated `onXXX` handlers with different
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index 4060912c648..33d9828f0e9 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -37,13 +37,22 @@ import {
 import {
   RENDER_LIST,
   OPEN_BLOCK,
-  CREATE_BLOCK,
   FRAGMENT,
+  CREATE_COMPONENT_BLOCK,
+  CREATE_ELEMENT_BLOCK,
+  CREATE_COMPONENT_VNODE,
+  CREATE_ELEMENT_VNODE,
+  CREATE_BLOCK,
   CREATE_VNODE
 } from '../runtimeHelpers'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import { PatchFlags, PatchFlagNames } from '@vue/shared'
+import {
+  PatchFlags,
+  PatchFlagNames,
+  ShapeFlags,
+  ShapeFlagNames
+} from '@vue/shared'
 
 export const transformFor = createStructuralDirectiveTransform(
   'for',
@@ -85,6 +94,7 @@ export const transformFor = createStructuralDirectiveTransform(
         : keyProp
           ? PatchFlags.KEYED_FRAGMENT
           : PatchFlags.UNKEYED_FRAGMENT
+
       forNode.codegenNode = createVNodeCall(
         context,
         helper(FRAGMENT),
@@ -96,6 +106,11 @@ export const transformFor = createStructuralDirectiveTransform(
         undefined,
         true /* isBlock */,
         !isStableFragment /* disableTracking */,
+        false /* isComponent */,
+        ShapeFlags.ARRAY_CHILDREN +
+          (__DEV__
+            ? ` /* ${ShapeFlagNames[ShapeFlags.ARRAY_CHILDREN]} */`
+            : ``),
         node.loc
       ) as ForCodegenNode
 
@@ -156,7 +171,13 @@ export const transformFor = createStructuralDirectiveTransform(
                 : ``),
             undefined,
             undefined,
-            true
+            true,
+            undefined,
+            false /* isComponent */,
+            ShapeFlags.ARRAY_CHILDREN +
+              (__DEV__
+                ? ` /* ${ShapeFlagNames[ShapeFlags.ARRAY_CHILDREN]} */`
+                : ``)
           )
         } else {
           // Normal element v-for. Directly use the child's codegenNode
@@ -179,9 +200,21 @@ export const transformFor = createStructuralDirectiveTransform(
           childBlock.isBlock = !isStableFragment
           if (childBlock.isBlock) {
             helper(OPEN_BLOCK)
-            helper(CREATE_BLOCK)
+            helper(
+              context.forSSR
+                ? CREATE_BLOCK
+                : childBlock.isComponent
+                  ? CREATE_COMPONENT_BLOCK
+                  : CREATE_ELEMENT_BLOCK
+            )
           } else {
-            helper(CREATE_VNODE)
+            helper(
+              context.forSSR
+                ? CREATE_VNODE
+                : childBlock.isComponent
+                  ? CREATE_COMPONENT_VNODE
+                  : CREATE_ELEMENT_VNODE
+            )
           }
         }
 
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index e9089fed6a6..bb9d1b67eca 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -28,14 +28,23 @@ import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
 import {
-  CREATE_BLOCK,
   FRAGMENT,
   CREATE_COMMENT,
   OPEN_BLOCK,
-  CREATE_VNODE
+  CREATE_VNODE,
+  CREATE_COMPONENT_BLOCK,
+  CREATE_ELEMENT_BLOCK,
+  CREATE_BLOCK,
+  CREATE_COMPONENT_VNODE,
+  CREATE_ELEMENT_VNODE
 } from '../runtimeHelpers'
 import { injectProp, findDir, findProp, isBuiltInType } from '../utils'
-import { PatchFlags, PatchFlagNames } from '@vue/shared'
+import {
+  PatchFlags,
+  PatchFlagNames,
+  ShapeFlags,
+  ShapeFlagNames
+} from '@vue/shared'
 
 export const transformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
@@ -278,6 +287,11 @@ function createChildrenCodegenNode(
         undefined,
         true,
         false,
+        false /* isComponent */,
+        ShapeFlags.ARRAY_CHILDREN +
+          (__DEV__
+            ? ` /* ${ShapeFlagNames[ShapeFlags.ARRAY_CHILDREN]} */`
+            : ``),
         branch.loc
       )
     }
@@ -286,10 +300,22 @@ function createChildrenCodegenNode(
       .codegenNode as BlockCodegenNode
     // Change createVNode to createBlock.
     if (vnodeCall.type === NodeTypes.VNODE_CALL && !vnodeCall.isBlock) {
-      removeHelper(CREATE_VNODE)
+      removeHelper(
+        context.forSSR
+          ? CREATE_VNODE
+          : vnodeCall.isComponent
+            ? CREATE_COMPONENT_VNODE
+            : CREATE_ELEMENT_VNODE
+      )
       vnodeCall.isBlock = true
       helper(OPEN_BLOCK)
-      helper(CREATE_BLOCK)
+      helper(
+        context.forSSR
+          ? CREATE_BLOCK
+          : vnodeCall.isComponent
+            ? CREATE_COMPONENT_BLOCK
+            : CREATE_ELEMENT_BLOCK
+      )
     }
     // inject branch key
     injectProp(vnodeCall, keyProperty, context)
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index d69446d8909..d8f18e7af64 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -30,9 +30,14 @@ import {
   SUSPENSE,
   KEEP_ALIVE,
   BASE_TRANSITION,
-  TO_HANDLERS
+  TO_HANDLERS,
+  NORMALIZE_PROPS,
+  NORMALIZE_PROPS_FOR_CLASS,
+  NORMALIZE_PROPS_FOR_STYLE,
+  GUARD_REACTIVE_PROPS
 } from './runtimeHelpers'
 import { isString, isObject, hyphenate, extend } from '@vue/shared'
+import { PropsExpression } from './transforms/transformElement'
 
 export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
   p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic
@@ -215,14 +220,73 @@ export function isSlotOutlet(
   return node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
 }
 
+const propsHelperSet = new Set([
+  NORMALIZE_PROPS,
+  NORMALIZE_PROPS_FOR_CLASS,
+  NORMALIZE_PROPS_FOR_STYLE,
+  GUARD_REACTIVE_PROPS
+])
+
+function getUnnormalizedProps(
+  props: PropsExpression | '{}',
+  callPath: CallExpression[] = []
+): [PropsExpression | '{}', CallExpression[]] {
+  if (
+    props &&
+    !isString(props) &&
+    props.type === NodeTypes.JS_CALL_EXPRESSION
+  ) {
+    const callee = props.callee
+    if (!isString(callee) && propsHelperSet.has(callee)) {
+      return getUnnormalizedProps(
+        props.arguments[0] as PropsExpression,
+        callPath.concat(props)
+      )
+    }
+  }
+  return [props, callPath]
+}
 export function injectProp(
   node: VNodeCall | RenderSlotCall,
   prop: Property,
   context: TransformContext
 ) {
   let propsWithInjection: ObjectExpression | CallExpression | undefined
-  const props =
+  const originalProps =
     node.type === NodeTypes.VNODE_CALL ? node.props : node.arguments[2]
+
+  /**
+   * 1. mergeProps(...)
+   * 2. toHandlers(...)
+   *
+   * 3. normalizeProps(...)
+   * 4. normalizeProps(mergeProps(...))
+   *
+   * 5. normalizePropsForClass(...)
+   * 6. normalizePropsForClass(mergeProps(...))
+   *
+   * 7. normalizePropsForStyle(...)
+   * 8. normalizePropsForStyle(mergeProps(...))
+   *
+   * 9. guardReactiveProps(...)
+   * 10. normalizeProps(guardReactiveProps(...))
+   *
+   * we need to get the real props before normalization
+   */
+  let props = originalProps
+  let callPath: CallExpression[] = []
+  let parentCall: CallExpression | undefined
+  if (
+    props &&
+    !isString(props) &&
+    props.type === NodeTypes.JS_CALL_EXPRESSION
+  ) {
+    const ret = getUnnormalizedProps(props)
+    props = ret[0]
+    callPath = ret[1]
+    parentCall = callPath[callPath.length - 1]
+  }
+
   if (props == null || isString(props)) {
     propsWithInjection = createObjectExpression([prop])
   } else if (props.type === NodeTypes.JS_CALL_EXPRESSION) {
@@ -265,11 +329,25 @@ export function injectProp(
       createObjectExpression([prop]),
       props
     ])
+    // in the case of `normalizeProps(guardReactiveProps(props))`,
+    // will be rewritten as `normalizeProps(mergeProps({ key: 0 }, props))`,
+    // `guardReactiveProps` will no longer be needed
+    if (parentCall && parentCall.callee === GUARD_REACTIVE_PROPS) {
+      parentCall = callPath[callPath.length - 2]
+    }
   }
   if (node.type === NodeTypes.VNODE_CALL) {
-    node.props = propsWithInjection
+    if (parentCall) {
+      parentCall.arguments[0] = propsWithInjection
+    } else {
+      node.props = propsWithInjection
+    }
   } else {
-    node.arguments[2] = propsWithInjection
+    if (parentCall) {
+      parentCall.arguments[0] = propsWithInjection
+    } else {
+      node.arguments[2] = propsWithInjection
+    }
   }
 }
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index d74d7448aa9..12bfaa5db50 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -218,9 +218,9 @@ const myEmit = defineEmit(['foo', 'bar'])
         { inlineTemplate: true }
       )
       expect(content).toMatch('[_unref(myDir)]')
-      expect(content).toMatch('_createVNode(ChildComp)')
+      expect(content).toMatch('_createComponentVNode(ChildComp)')
       // kebab-case component support
-      expect(content).toMatch('_createVNode(SomeOtherComp)')
+      expect(content).toMatch('_createComponentVNode(SomeOtherComp)')
       assertCode(content)
     })
 
@@ -245,7 +245,7 @@ const myEmit = defineEmit(['foo', 'bar'])
         { inlineTemplate: true }
       )
       // no need to unref vue component import
-      expect(content).toMatch(`createVNode(Foo,`)
+      expect(content).toMatch(`createComponentVNode(Foo,`)
       // #2699 should unref named imports from .vue
       expect(content).toMatch(`unref(bar)`)
       // should unref other imports
diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index 6b981f18899..29a98e36dac 100644
--- a/packages/compiler-ssr/src/index.ts
+++ b/packages/compiler-ssr/src/index.ts
@@ -35,6 +35,7 @@ export function compile(
     // apply DOM-specific parsing options
     ...parserOptions,
     ssr: true,
+    forSSR: true,
     scopeId: options.mode === 'function' ? null : options.scopeId,
     // always prefix since compiler-ssr doesn't have size concern
     prefixIdentifiers: true,
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index bcfc7a1e687..471bf655183 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -240,6 +240,7 @@ function createVNodeSlotBranch(
 ): ReturnStatement {
   // apply a sub-transform using vnode-based transforms.
   const rawOptions = rawOptionsMap.get(parentContext.root)!
+
   const subOptions = {
     ...rawOptions,
     // overwrite with vnode-based transforms
diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
index bddd7d1d318..a5dbf00a739 100644
--- a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
+++ b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -20,7 +20,13 @@ import {
   onBeforeUnmount,
   createTextVNode,
   SetupContext,
-  createApp
+  createApp,
+  createElementVNode,
+  reactive,
+  guardReactiveProps,
+  normalizeProps,
+  normalizeClass,
+  normalizeStyle
 } from '@vue/runtime-test'
 import { PatchFlags, SlotFlags } from '@vue/shared'
 import { SuspenseImpl } from '../src/components/Suspense'
@@ -821,4 +827,39 @@ describe('renderer: optimized mode', () => {
     await nextTick()
     expect(inner(root)).toBe('<div><div>true</div></div>')
   })
+  describe('optimized VNode creation', () => {
+    test('single v-bind', () => {
+      // in case <div v-bind="reactiveObj" />
+      // 1. use `guardReactiveProps` to make sure it gets rid of reactive data
+      // 2. use `normalizeProps` to normalize `class` and `style`
+      const p = createElementVNode(
+        'p',
+        normalizeProps(
+          guardReactiveProps(reactive({ class: ['foo', { bar: true }] }))
+        )
+      )
+      render(p, root)
+      expect(inner(root)).toBe('<p class="foo bar"></p>')
+    })
+
+    test('dynamic class binding', () => {
+      // in case <div :class="cls" class="bar" />
+      const p = createElementVNode('p', {
+        class: normalizeClass([{ foo: true }, 'bar'])
+      })
+      render(p, root)
+      expect(inner(root)).toBe('<p class="foo bar"></p>')
+    })
+
+    test('dynamic style binding', () => {
+      // in case <div :style="stl" style="color: red;" />
+      const p = createElementVNode('p', {
+        style: normalizeStyle([['background: green;'], { color: 'red' }])
+      })
+      render(p, root)
+      expect(inner(root)).toBe(
+        '<p style={"background":"green","color":"red"}></p>'
+      )
+    })
+  })
 })
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index bb90574d071..762f80f73c2 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -245,13 +245,23 @@ export {
   setBlockTracking,
   createTextVNode,
   createCommentVNode,
-  createStaticVNode
+  createStaticVNode,
+  createElementVNode,
+  createComponentVNode,
+  createElementBlock,
+  createComponentBlock,
+  guardReactiveProps
 } from './vnode'
 export {
   toDisplayString,
   camelize,
   capitalize,
-  toHandlerKey
+  toHandlerKey,
+  normalizeProps,
+  normalizeClass,
+  normalizeStyle,
+  normalizePropsForStyle,
+  normalizePropsForClass
 } from '@vue/shared'
 
 // For test-utils
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index ec5a8f5dc61..8c2e71eaa2e 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -243,6 +243,90 @@ export function setBlockTracking(value: number) {
   isBlockTreeEnabled += value
 }
 
+function setupBlock(vnode: VNode) {
+  // save current block children on the block vnode
+  vnode.dynamicChildren = isBlockTreeEnabled > 0 ? currentBlock || (EMPTY_ARR as any) : null
+  // close block
+  closeBlock()
+  // a block is always going to be patched, so track it as a child of its
+  // parent block
+  if (isBlockTreeEnabled > 0 && currentBlock) {
+    currentBlock.push(vnode)
+  }
+}
+
+function trackVNode(
+  vnode: VNode,
+  isBlockNode: boolean,
+  patchFlag: number,
+  shapeFlag: number
+) {
+  if (
+    isBlockTreeEnabled > 0 &&
+    // avoid a block node from tracking itself
+    !isBlockNode &&
+    // has current parent block
+    currentBlock &&
+    // presence of a patch flag indicates this node needs patching on updates.
+    // component nodes also should always be patched, because even if the
+    // component doesn't need to update, it needs to persist the instance on to
+    // the next vnode so that it can be properly unmounted later.
+    (patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
+    // the EVENTS flag is only for hydration and if it is the only flag, the
+    // vnode should not be considered dynamic due to handler caching.
+    patchFlag !== PatchFlags.HYDRATE_EVENTS
+  ) {
+    currentBlock.push(vnode)
+  }
+}
+
+export function createElementBlock(
+  type: string,
+  props?: Record<string, any> | null,
+  children?: any,
+  patchFlag?: number,
+  dynamicProps?: string[],
+  shapeFlag?: number
+) {
+  const vnode = createElementVNode(
+    type,
+    props,
+    children,
+    patchFlag,
+    dynamicProps,
+    shapeFlag,
+    true /* isBlock */
+  )
+  setupBlock(vnode)
+  return vnode
+}
+
+export function createComponentBlock(
+  type:
+    | Component
+    | VNode
+    | typeof NULL_DYNAMIC_COMPONENT
+    | typeof TeleportImpl
+    | typeof SuspenseImpl,
+  props?: Record<string, any> | null,
+  children?: any,
+  patchFlag?: number,
+  dynamicProps?: string[],
+  shapeFlag?: number
+) {
+  const vnode = createComponentVNode(
+    type,
+    props,
+    children,
+    patchFlag,
+    dynamicProps,
+    shapeFlag,
+    true /* isBlock */
+  )
+  setupBlock(vnode)
+  return vnode
+}
+
 /**
  * Create a block root vnode. Takes the same exact arguments as `createVNode`.
  * A block root keeps track of dynamic nodes within the block in the
@@ -265,16 +349,7 @@ export function createBlock(
     dynamicProps,
     true /* isBlock: prevent a block from tracking itself */
   )
-  // save current block children on the block vnode
-  vnode.dynamicChildren =
-    isBlockTreeEnabled > 0 ? currentBlock || (EMPTY_ARR as any) : null
-  // close block
-  closeBlock()
-  // a block is always going to be patched, so track it as a child of its
-  // parent block
-  if (isBlockTreeEnabled > 0 && currentBlock) {
-    currentBlock.push(vnode)
-  }
+  setupBlock(vnode)
   return vnode
 }
 
@@ -338,6 +413,143 @@ export const createVNode = (__DEV__
   ? createVNodeWithArgsTransform
   : _createVNode) as typeof _createVNode
 
+export function createElementVNode(
+  type: string,
+  props: (Data & VNodeProps) | null = null,
+  children: Exclude<VNodeNormalizedChildren, RawSlots> = null,
+  patchFlag: number = 0,
+  dynamicProps: string[] | null = null,
+  shapeFlag = ShapeFlags.ELEMENT,
+  isBlockNode = false
+) {
+  const vnode: VNode = {
+    __v_isVNode: true,
+    [ReactiveFlags.SKIP]: true,
+    type,
+    props,
+    key: props && normalizeKey(props),
+    ref: props && normalizeRef(props),
+    scopeId: currentScopeId,
+    slotScopeIds: null,
+    children,
+    component: null,
+    suspense: null,
+    ssContent: null,
+    ssFallback: null,
+    dirs: null,
+    transition: null,
+    el: null,
+    anchor: null,
+    target: null,
+    targetAnchor: null,
+    staticCount: 0,
+    shapeFlag,
+    patchFlag,
+    dynamicProps,
+    dynamicChildren: null,
+    appContext: null
+  }
+
+  trackVNode(vnode, isBlockNode, patchFlag, shapeFlag)
+
+  return vnode
+}
+
+export function createComponentVNode(
+  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
+  props: (Data & VNodeProps) | null = null,
+  children: Exclude<VNodeNormalizedChildren, RawSlots> = null,
+  patchFlag: number = 0,
+  dynamicProps: string[] | null = null,
+  shapeFlag: ShapeFlags = 0,
+  isBlockNode = false
+) {
+  if (!type || type === NULL_DYNAMIC_COMPONENT) {
+    if (__DEV__ && !type) {
+      warn(`Invalid vnode type when creating vnode: ${type}.`)
+    }
+    type = Comment
+  }
+
+  if (isVNode(type)) {
+    const cloned = cloneVNode(type, props, true /* mergeRef: true */)
+    if (children) {
+      normalizeChildren(cloned, children)
+    }
+    return cloned
+  }
+
+  // class component normalization.
+  if (isClassComponent(type)) {
+    type = type.__vccOpts
+  }
+
+  // Suspense and Teleport analysis at compile time
+  if (!shapeFlag) {
+    shapeFlag = isObject(type)
+      ? ShapeFlags.STATEFUL_COMPONENT
+      : isFunction(type)
+        ? ShapeFlags.FUNCTIONAL_COMPONENT
+        : 0
+  }
+
+  if (__DEV__ && shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isProxy(type)) {
+    type = toRaw(type)
+    warn(
+      `Vue received a Component which was made a reactive object. This can ` +
+        `lead to unnecessary performance overhead, and should be avoided by ` +
+        `marking the component with \`markRaw\` or using \`shallowRef\` ` +
+        `instead of \`ref\`.`,
+      `\nComponent that was made reactive: `,
+      type
+    )
+  }
+
+  const vnode: VNode = {
+    __v_isVNode: true,
+    [ReactiveFlags.SKIP]: true,
+    type,
+    props,
+    key: props && normalizeKey(props),
+    ref: props && normalizeRef(props),
+    scopeId: currentScopeId,
+    slotScopeIds: null,
+    children: null,
+    component: null,
+    suspense: null,
+    ssContent: null,
+    ssFallback: null,
+    dirs: null,
+    transition: null,
+    el: null,
+    anchor: null,
+    target: null,
+    targetAnchor: null,
+    staticCount: 0,
+    shapeFlag,
+    patchFlag,
+    dynamicProps,
+    dynamicChildren: null,
+    appContext: null
+  }
+
+  // validate key
+  if (__DEV__ && vnode.key !== vnode.key) {
+    warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type)
+  }
+
+  normalizeChildren(vnode, children)
+
+  // normalize suspense children
+  if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
+    ;(type as typeof SuspenseImpl).normalize(vnode)
+  }
+
+  trackVNode(vnode, isBlockNode, patchFlag, shapeFlag)
+
+  return vnode
+}
+
 function _createVNode(
   type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
   props: (Data & VNodeProps) | null = null,
@@ -486,6 +698,13 @@ function _createVNode(
   return vnode
 }
 
+export function guardReactiveProps(props: (Data & VNodeProps) | null) {
+  if (!props) return null
+  return isProxy(props) || InternalObjectKey in props
+    ? extend({}, props)
+    : props
+}
+
 export function cloneVNode<T, U>(
   vnode: VNode<T, U>,
   extraProps?: Data & VNodeProps | null,
diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index 76eec4b582d..6fe8489df15 100644
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -76,3 +76,32 @@ export function normalizeClass(value: unknown): string {
   }
   return res.trim()
 }
+
+export function normalizeProps(props: Record<string, any> | null) {
+  if (!props) return null
+  let { class: klass, style } = props
+  if (klass && !isString(klass)) {
+    props.class = normalizeClass(klass)
+  }
+  if (style) {
+    props.style = normalizeStyle(style)
+  }
+  return props
+}
+
+export function normalizePropsForStyle(props: Record<string, any> | null) {
+  if (!props) return null
+  if (props.style) {
+    props.style = normalizeStyle(props.style)
+  }
+  return props
+}
+
+export function normalizePropsForClass(props: Record<string, any> | null) {
+  if (!props) return null
+  const { class: klass } = props
+  if (klass && !isString(klass)) {
+    props.class = normalizeClass(klass)
+  }
+  return props
+}
diff --git a/packages/shared/src/shapeFlags.ts b/packages/shared/src/shapeFlags.ts
index 8defb8a3bf3..366b48b6d19 100644
--- a/packages/shared/src/shapeFlags.ts
+++ b/packages/shared/src/shapeFlags.ts
@@ -11,3 +11,20 @@ export const enum ShapeFlags {
   COMPONENT_KEPT_ALIVE = 1 << 9,
   COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
 }
+
+/**
+ * dev only ShapeFlag -> name mapping
+ */
+export const ShapeFlagNames = {
+  [ShapeFlags.ELEMENT]: `ELEMENT`,
+  [ShapeFlags.FUNCTIONAL_COMPONENT]: `FUNCTIONAL_COMPONENT`,
+  [ShapeFlags.STATEFUL_COMPONENT]: `STATEFUL_COMPONENT`,
+  [ShapeFlags.TEXT_CHILDREN]: `TEXT_CHILDREN`,
+  [ShapeFlags.ARRAY_CHILDREN]: `ARRAY_CHILDREN`,
+  [ShapeFlags.SLOTS_CHILDREN]: `SLOTS_CHILDREN`,
+  [ShapeFlags.TELEPORT]: `TELEPORT`,
+  [ShapeFlags.SUSPENSE]: `SUSPENSE`,
+  [ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE]: `COMPONENT_SHOULD_KEEP_ALIVE`,
+  [ShapeFlags.COMPONENT_KEPT_ALIVE]: `COMPONENT_KEPT_ALIVE`,
+  [ShapeFlags.COMPONENT]: `COMPONENT`
+}

From 801c72e65dd65785f396bc0115fda821709f3219 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Mon, 1 Mar 2021 22:04:27 +0800
Subject: [PATCH 02/15] test: update snapshots

---
 .../__snapshots__/codegen.spec.ts.snap        |  10 +-
 .../__snapshots__/compile.spec.ts.snap        |  72 ++---
 .../__snapshots__/scopeId.spec.ts.snap        |  36 +--
 .../compiler-core/__tests__/codegen.spec.ts   |   6 +-
 .../__snapshots__/hoistStatic.spec.ts.snap    | 260 +++++++++---------
 .../transformExpressions.spec.ts.snap         |   6 +-
 .../__snapshots__/transformText.spec.ts.snap  |  42 +--
 .../__snapshots__/vFor.spec.ts.snap           | 124 ++++-----
 .../transforms/__snapshots__/vIf.spec.ts.snap |  60 ++--
 .../__snapshots__/vModel.spec.ts.snap         |  32 +--
 .../__snapshots__/vOnce.spec.ts.snap          |  34 +--
 .../__snapshots__/vSlot.spec.ts.snap          |  54 ++--
 .../src/transforms/transformElement.ts        |   4 +-
 .../__snapshots__/index.spec.ts.snap          |  20 +-
 .../__snapshots__/vModel.spec.ts.snap         |  54 ++--
 .../__snapshots__/vShow.spec.ts.snap          |   4 +-
 .../transforms/transformStyle.spec.ts         |  15 +-
 .../__snapshots__/compileScript.spec.ts.snap  |  86 +++---
 .../compileTemplate.spec.ts.snap              |   2 +-
 .../templateTransformAssetUrl.spec.ts.snap    |  68 ++---
 .../templateTransformSrcset.spec.ts.snap      |  90 +++---
 21 files changed, 547 insertions(+), 532 deletions(-)

diff --git a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
index 74d0ab70d38..f15432c7de9 100644
--- a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
@@ -48,13 +48,13 @@ exports[`compiler: codegen Element (callExpression + objectExpression + Template
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return _createVNode(\\"div\\", {
+    return _createElementVNode(\\"div\\", {
       id: \\"foo\\",
       [prop]: bar,
       [foo + bar]: bar
     }, [
-      _createVNode(\\"p\\", { \\"some-key\\": \\"foo\\" })
-    ], 16)
+      _createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" }, null, null, null, 1)
+    ], 16, null, 1)
   }
 }"
 `;
@@ -98,7 +98,7 @@ exports[`compiler: codegen forNode 1`] = `
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(), 1))
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(), 1))
   }
 }"
 `;
@@ -107,7 +107,7 @@ exports[`compiler: codegen forNode with constant expression 1`] = `
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(), 64 /* STABLE_FRAGMENT */))
+    return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(), 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
index 6879301b64d..f77a9a4bce2 100644
--- a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
@@ -5,70 +5,70 @@ exports[`compiler: integration tests function mode 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createVNode: _createVNode } = _Vue
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, normalizeClass: _normalizeClass } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", {
+    return (_openBlock(), _createElementBlock(\\"div\\", {
       id: \\"foo\\",
-      class: bar.baz
+      class: _normalizeClass(bar.baz)
     }, [
       _createTextVNode(_toDisplayString(world.burn()) + \\" \\", 1 /* TEXT */),
       ok
-        ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
-        : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
+        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+        : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
             _createTextVNode(\\"no\\")
-          ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
-      (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (value, index) => {
-        return (_openBlock(), _createBlock(\\"div\\", null, [
-          _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
-        ]))
-      }), 256 /* UNKEYED_FRAGMENT */))
-    ], 2 /* CLASS */))
+          ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */)),
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => {
+        return (_openBlock(), _createElementBlock(\\"div\\", null, [
+          _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+        ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+      }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], 2 /* CLASS */, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 1`] = `
-"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createVNode: _createVNode } = Vue
+"const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, normalizeClass: _normalizeClass } = Vue
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"div\\", {
+  return (_openBlock(), _createElementBlock(\\"div\\", {
     id: \\"foo\\",
-    class: _ctx.bar.baz
+    class: _normalizeClass(_ctx.bar.baz)
   }, [
     _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
     (_ctx.ok)
-      ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
-      : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
+      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+      : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
           _createTextVNode(\\"no\\")
-        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
-    (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
-      return (_openBlock(), _createBlock(\\"div\\", null, [
-        _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
-      ]))
-    }), 256 /* UNKEYED_FRAGMENT */))
-  ], 2 /* CLASS */))
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */)),
+    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
+      return (_openBlock(), _createElementBlock(\\"div\\", null, [
+        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+      ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 2 /* CLASS */, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
 }"
 `;
 
 exports[`compiler: integration tests module mode 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createVNode as _createVNode } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, normalizeClass as _normalizeClass } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"div\\", {
+  return (_openBlock(), _createElementBlock(\\"div\\", {
     id: \\"foo\\",
-    class: _ctx.bar.baz
+    class: _normalizeClass(_ctx.bar.baz)
   }, [
     _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
     (_ctx.ok)
-      ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
-      : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
+      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+      : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
           _createTextVNode(\\"no\\")
-        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
-    (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
-      return (_openBlock(), _createBlock(\\"div\\", null, [
-        _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
-      ]))
-    }), 256 /* UNKEYED_FRAGMENT */))
-  ], 2 /* CLASS */))
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */)),
+    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
+      return (_openBlock(), _createElementBlock(\\"div\\", null, [
+        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+      ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 2 /* CLASS */, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
 }"
 `;
diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index aa74c6c43d1..bea3954a0f2 100644
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -1,33 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
-"import { createVNode as _createVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 _pushScopeId(\\"test\\")
-const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
-_popScopeId()
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+_popScopeId(null)
 
-export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return (_openBlock(), _createBlock(\\"div\\", null, [
+export function render(_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
     _hoisted_1,
     _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
     _hoisted_2
-  ]))
-})"
+  ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+}"
 `;
 
 exports[`scopeId compiler support should wrap default slot 1`] = `
-"import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createComponentVNode as _createComponentVNode, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
   const _component_Child = _resolveComponent(\\"Child\\")
 
-  return (_openBlock(), _createBlock(_component_Child, null, {
+  return (_openBlock(), _createComponentBlock(_component_Child, null, {
     default: _withId(() => [
-      _createVNode(\\"div\\")
+      _createElementVNode(\\"div\\")
     ]),
     _: 1 /* STABLE */
   }))
@@ -35,18 +35,18 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
 `;
 
 exports[`scopeId compiler support should wrap dynamic slots 1`] = `
-"import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, createComponentVNode as _createComponentVNode, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
   const _component_Child = _resolveComponent(\\"Child\\")
 
-  return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+  return (_openBlock(), _createComponentBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
           name: \\"foo\\",
           fn: _withId(() => [
-            _createVNode(\\"div\\")
+            _createElementVNode(\\"div\\")
           ])
         }
       : undefined,
@@ -54,7 +54,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
       return {
         name: i,
         fn: _withId(() => [
-          _createVNode(\\"div\\")
+          _createElementVNode(\\"div\\")
         ])
       }
     })
@@ -63,18 +63,18 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
 `;
 
 exports[`scopeId compiler support should wrap named slots 1`] = `
-"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createComponentVNode as _createComponentVNode, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
   const _component_Child = _resolveComponent(\\"Child\\")
 
-  return (_openBlock(), _createBlock(_component_Child, null, {
+  return (_openBlock(), _createComponentBlock(_component_Child, null, {
     foo: _withId(({ msg }) => [
       _createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
     ]),
     bar: _withId(() => [
-      _createVNode(\\"div\\")
+      _createElementVNode(\\"div\\")
     ]),
     _: 1 /* STABLE */
   }))
diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts
index 61908a9105b..f542caf0637 100644
--- a/packages/compiler-core/__tests__/codegen.spec.ts
+++ b/packages/compiler-core/__tests__/codegen.spec.ts
@@ -401,8 +401,10 @@ describe('compiler: codegen', () => {
       [prop]: bar,
       [foo + bar]: bar
     }, [
-      _${helperNameMap[CREATE_ELEMENT_VNODE]}("p", { "some-key": "foo" })
-    ], ${PatchFlags.FULL_PROPS})`)
+      _${
+        helperNameMap[CREATE_ELEMENT_VNODE]
+      }("p", { "some-key": "foo" }, null, null, null, 1)
+    ], ${PatchFlags.FULL_PROPS}, null, 1)`)
     expect(code).toMatchSnapshot()
   })
 
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
index 022b243e367..415c1fce1ca 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
@@ -2,217 +2,219 @@
 
 exports[`compiler: hoistStatic transform hoist element with static key 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform hoist nested static tree 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createVNode(\\"p\\", null, [
-  /*#__PURE__*/_createVNode(\\"span\\"),
-  /*#__PURE__*/_createVNode(\\"span\\")
-], -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"p\\", null, [
+  /*#__PURE__*/_createElementVNode(\\"span\\"),
+  /*#__PURE__*/_createElementVNode(\\"span\\")
+], -1 /* HOISTED */, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform hoist nested static tree with comments 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue
+const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, [
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
   /*#__PURE__*/_createCommentVNode(\\"comment\\")
-], -1 /* HOISTED */)
+], -1 /* HOISTED */, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createCommentVNode: _createCommentVNode, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform hoist siblings with common non-hoistable parent 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createVNode(\\"span\\", null, null, -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createVNode(\\"div\\", null, null, -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1,
       _hoisted_2
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform hoist simple element 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform hoist static props for elements with directives 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
 const _hoisted_1 = { id: \\"foo\\" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { resolveDirective: _resolveDirective, createElementVNode: _createElementVNode, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _directive_foo = _resolveDirective(\\"foo\\")
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      _withDirectives(_createVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      _withDirectives(_createElementVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [
         [_directive_foo]
       ])
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform hoist static props for elements with dynamic text children 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
 const _hoisted_1 = { id: \\"foo\\" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      _createVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
-    ]))
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      _createElementVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform hoist static props for elements with unhoistable children 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode, createComponentVNode: _createComponentVNode } = _Vue
 
 const _hoisted_1 = { id: \\"foo\\" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      _createVNode(\\"div\\", _hoisted_1, [
-        _createVNode(_component_Comp)
-      ])
-    ]))
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      _createElementVNode(\\"div\\", _hoisted_1, [
+        _createComponentVNode(_component_Comp)
+      ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform prefixIdentifiers hoist class with static object value 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = { class: { foo: true } }
+const _hoisted_1 = {
+  class: /*#__PURE__*/_normalizeClass({ foo: true })
+}
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      _createVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
-    ]))
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      _createElementVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static tree with static interpolation 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static tree with static prop value 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist elements with cached handlers 1`] = `
-"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"div\\", null, [
-    _createVNode(\\"div\\", null, [
-      _createVNode(\\"div\\", {
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    _createElementVNode(\\"div\\", null, [
+      _createElementVNode(\\"div\\", {
         onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.foo && _ctx.foo(...args)))
       })
-    ])
-  ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
+  ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
 }"
 `;
 
@@ -221,15 +223,15 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue
-
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
-        return (_openBlock(), _createBlock(\\"p\\", null, [
-          _createVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
-        ]))
-      }), 256 /* UNKEYED_FRAGMENT */))
-    ]))
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
+
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
+        return (_openBlock(), _createElementBlock(\\"p\\", null, [
+          _createElementVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+        ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+      }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -239,11 +241,11 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createBlock(_component_Comp, null, {
+    return (_openBlock(), _createComponentBlock(_component_Comp, null, {
       default: _withCtx(({ foo }) => [
         _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
       ]),
@@ -258,15 +260,15 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue
-
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
-        return (_openBlock(), _createBlock(\\"p\\", null, [
-          _createVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */)
-        ]))
-      }), 256 /* UNKEYED_FRAGMENT */))
-    ]))
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
+
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
+        return (_openBlock(), _createElementBlock(\\"p\\", null, [
+          _createElementVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+        ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+      }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -276,13 +278,13 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist keye
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
-        return (_openBlock(), _createBlock(\\"span\\", { key: item }))
-      }), 128 /* KEYED_FRAGMENT */))
-    ]))
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+        return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
+      }), 128 /* KEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -292,13 +294,13 @@ exports[`compiler: hoistStatic transform should NOT hoist components 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      _createVNode(_component_Comp)
-    ]))
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      _createComponentVNode(_component_Comp)
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -308,11 +310,11 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic k
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      (_openBlock(), _createBlock(\\"div\\", { key: foo }))
-    ]))
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      (_openBlock(), _createElementBlock(\\"div\\", { key: foo }))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -322,11 +324,11 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic p
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      _createVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"])
-    ]))
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"])
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -336,11 +338,11 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic r
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      _createVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */)
-    ]))
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      _createElementVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */)
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -350,56 +352,56 @@ exports[`compiler: hoistStatic transform should NOT hoist root node 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\"))
+    return (_openBlock(), _createElementBlock(\\"div\\"))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform should hoist v-for children if static 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
 const _hoisted_1 = { id: \\"foo\\" }
-const _hoisted_2 = /*#__PURE__*/_createVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
-        return (_openBlock(), _createBlock(\\"div\\", _hoisted_1, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
+        return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, [
           _hoisted_2
-        ]))
-      }), 256 /* UNKEYED_FRAGMENT */))
-    ]))
+        ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+      }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
 
 exports[`compiler: hoistStatic transform should hoist v-if props/children if static 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue
+const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
 
 const _hoisted_1 = {
   key: 0,
   id: \\"foo\\"
 }
-const _hoisted_2 = /*#__PURE__*/_createVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       ok
-        ? (_openBlock(), _createBlock(\\"div\\", _hoisted_1, [
+        ? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, [
             _hoisted_2
-          ]))
+          ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
         : _createCommentVNode(\\"v-if\\", true)
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
index 165df1e1ae8..2a41250e6c4 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -2,14 +2,14 @@
 
 exports[`compiler: expression transform bindingMetadata inline mode 1`] = `
 "(_ctx, _cache) => {
-  return (_openBlock(), _createBlock(\\"div\\", null, _toDisplayString(__props.props) + \\" \\" + _toDisplayString(_unref(setup)) + \\" \\" + _toDisplayString(setupConst) + \\" \\" + _toDisplayString(_ctx.data) + \\" \\" + _toDisplayString(_ctx.options), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.props) + \\" \\" + _toDisplayString(_unref(setup)) + \\" \\" + _toDisplayString(setupConst) + \\" \\" + _toDisplayString(_ctx.data) + \\" \\" + _toDisplayString(_ctx.options), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */))
 }"
 `;
 
 exports[`compiler: expression transform bindingMetadata non-inline mode 1`] = `
-"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createBlock(\\"div\\", null, _toDisplayString($props.props) + \\" \\" + _toDisplayString($setup.setup) + \\" \\" + _toDisplayString($data.data) + \\" \\" + _toDisplayString($options.options), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString($props.props) + \\" \\" + _toDisplayString($setup.setup) + \\" \\" + _toDisplayString($data.data) + \\" \\" + _toDisplayString($options.options), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */))
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
index 07dadbcdc64..18175530d30 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
@@ -5,13 +5,13 @@ exports[`compiler: transform text <template v-for> 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createTextVNode: _createTextVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createTextVNode: _createTextVNode } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
-      return (_openBlock(), _createBlock(_Fragment, null, [
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
+      return (_openBlock(), _createElementBlock(_Fragment, null, [
         _createTextVNode(\\"foo\\")
-      ], 64 /* STABLE_FRAGMENT */))
-    }), 256 /* UNKEYED_FRAGMENT */))
+      ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -33,13 +33,13 @@ exports[`compiler: transform text consecutive text between elements 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(_Fragment, null, [
-      _createVNode(\\"div\\"),
+    return (_openBlock(), _createElementBlock(_Fragment, null, [
+      _createElementVNode(\\"div\\"),
       _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
-      _createVNode(\\"div\\")
-    ], 64 /* STABLE_FRAGMENT */))
+      _createElementVNode(\\"div\\")
+    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -49,15 +49,15 @@ exports[`compiler: transform text consecutive text mixed with elements 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(_Fragment, null, [
-      _createVNode(\\"div\\"),
+    return (_openBlock(), _createElementBlock(_Fragment, null, [
+      _createElementVNode(\\"div\\"),
       _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
-      _createVNode(\\"div\\"),
+      _createElementVNode(\\"div\\"),
       _createTextVNode(\\"hello\\"),
-      _createVNode(\\"div\\")
-    ], 64 /* STABLE_FRAGMENT */))
+      _createElementVNode(\\"div\\")
+    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -97,13 +97,13 @@ exports[`compiler: transform text text between elements (static) 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(_Fragment, null, [
-      _createVNode(\\"div\\"),
+    return (_openBlock(), _createElementBlock(_Fragment, null, [
+      _createElementVNode(\\"div\\"),
       _createTextVNode(\\"hello\\"),
-      _createVNode(\\"div\\")
-    ], 64 /* STABLE_FRAGMENT */))
+      _createElementVNode(\\"div\\")
+    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index 47c990674cc..315f71eac94 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -5,11 +5,11 @@ exports[`compiler: v-for codegen basic v-for 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */))
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock(\\"span\\"))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -19,14 +19,14 @@ exports[`compiler: v-for codegen keyed template v-for 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createBlock(_Fragment, { key: item }, [
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [
         \\"hello\\",
-        _createVNode(\\"span\\")
-      ], 64 /* STABLE_FRAGMENT */))
-    }), 128 /* KEYED_FRAGMENT */))
+        _createElementVNode(\\"span\\")
+      ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 128 /* KEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -36,11 +36,11 @@ exports[`compiler: v-for codegen keyed v-for 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createBlock(\\"span\\", { key: item }))
-    }), 128 /* KEYED_FRAGMENT */))
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
+    }), 128 /* KEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -50,11 +50,11 @@ exports[`compiler: v-for codegen skipped key 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item, __, index) => {
-      return (_openBlock(), _createBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */))
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => {
+      return (_openBlock(), _createElementBlock(\\"span\\"))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -64,11 +64,11 @@ exports[`compiler: v-for codegen skipped value & key 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (_, __, index) => {
-      return (_openBlock(), _createBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */))
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => {
+      return (_openBlock(), _createElementBlock(\\"span\\"))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -78,11 +78,11 @@ exports[`compiler: v-for codegen skipped value 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (_, key, index) => {
-      return (_openBlock(), _createBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */))
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => {
+      return (_openBlock(), _createElementBlock(\\"span\\"))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -92,14 +92,14 @@ exports[`compiler: v-for codegen template v-for 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createBlock(_Fragment, null, [
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock(_Fragment, null, [
         \\"hello\\",
-        _createVNode(\\"span\\")
-      ], 64 /* STABLE_FRAGMENT */))
-    }), 256 /* UNKEYED_FRAGMENT */))
+        _createElementVNode(\\"span\\")
+      ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -109,14 +109,14 @@ exports[`compiler: v-for codegen template v-for key injection with single child
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createBlock(\\"span\\", {
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
+      return (_openBlock(), _createElementBlock(\\"span\\", {
         key: item.id,
         id: item.id
       }, null, 8 /* PROPS */, [\\"id\\"]))
-    }), 128 /* KEYED_FRAGMENT */))
+    }), 128 /* KEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -126,11 +126,11 @@ exports[`compiler: v-for codegen template v-for w/ <slot/> 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, renderSlot: _renderSlot } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return _renderSlot($slots, \\"default\\")
-    }), 256 /* UNKEYED_FRAGMENT */))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -140,11 +140,11 @@ exports[`compiler: v-for codegen v-for on <slot/> 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, renderSlot: _renderSlot } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return _renderSlot($slots, \\"default\\")
-    }), 256 /* UNKEYED_FRAGMENT */))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -154,15 +154,15 @@ exports[`compiler: v-for codegen v-for on element with custom directive 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue
 
     const _directive_foo = _resolveDirective(\\"foo\\")
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
-      return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
+      return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
         [_directive_foo]
       ])
-    }), 256 /* UNKEYED_FRAGMENT */))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -172,11 +172,11 @@ exports[`compiler: v-for codegen v-for with constant expression 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(), _createBlock(_Fragment, null, _renderList(10, (item) => {
-      return _createVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */)
-    }), 64 /* STABLE_FRAGMENT */))
+    return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
+      return _createElementVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+    }), 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -186,12 +186,12 @@ exports[`compiler: v-for codegen v-if + v-for 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(true), _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
-          return (_openBlock(), _createBlock(\\"div\\"))
-        }), 256 /* UNKEYED_FRAGMENT */))
+      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
+          return (_openBlock(), _createElementBlock(\\"div\\"))
+        }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
       : _createCommentVNode(\\"v-if\\", true)
   }
 }"
@@ -202,12 +202,12 @@ exports[`compiler: v-for codegen v-if + v-for on <template> 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(true), _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
-          return (_openBlock(), _createBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */))
-        }), 256 /* UNKEYED_FRAGMENT */))
+      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
+          return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+        }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
       : _createCommentVNode(\\"v-if\\", true)
   }
 }"
@@ -218,11 +218,11 @@ exports[`compiler: v-for codegen value + key + index 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item, key, index) => {
-      return (_openBlock(), _createBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */))
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => {
+      return (_openBlock(), _createElementBlock(\\"span\\"))
+    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index 518a3f1ffb0..aca6a109b94 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -5,10 +5,10 @@ exports[`compiler: v-if codegen basic v-if 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
+      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
       : _createCommentVNode(\\"v-if\\", true)
   }
 }"
@@ -19,18 +19,18 @@ exports[`compiler: v-if codegen increasing key: v-if + v-else-if + v-else 1`] =
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
 
-    return (_openBlock(), _createBlock(_Fragment, null, [
+    return (_openBlock(), _createElementBlock(_Fragment, null, [
       ok
-        ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
-        : (_openBlock(), _createBlock(\\"p\\", { key: 1 })),
+        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
+        : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })),
       another
-        ? (_openBlock(), _createBlock(\\"div\\", { key: 2 }))
+        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }))
         : orNot
-          ? (_openBlock(), _createBlock(\\"p\\", { key: 3 }))
-          : (_openBlock(), _createBlock(\\"p\\", { key: 4 }))
-    ], 64 /* STABLE_FRAGMENT */))
+          ? (_openBlock(), _createElementBlock(\\"p\\", { key: 3 }))
+          : (_openBlock(), _createElementBlock(\\"p\\", { key: 4 }))
+    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -40,16 +40,16 @@ exports[`compiler: v-if codegen multiple v-if that are sibling nodes should have
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
 
-    return (_openBlock(), _createBlock(_Fragment, null, [
+    return (_openBlock(), _createElementBlock(_Fragment, null, [
       ok
-        ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
+        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
         : _createCommentVNode(\\"v-if\\", true),
       orNot
-        ? (_openBlock(), _createBlock(\\"p\\", { key: 1 }))
+        ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
         : _createCommentVNode(\\"v-if\\", true)
-    ], 64 /* STABLE_FRAGMENT */))
+    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -59,14 +59,14 @@ exports[`compiler: v-if codegen template v-if 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
+    const { createElementVNode: _createElementVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createBlock(_Fragment, { key: 0 }, [
-          _createVNode(\\"div\\"),
+      ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+          _createElementVNode(\\"div\\"),
           \\"hello\\",
-          _createVNode(\\"p\\")
-        ], 64 /* STABLE_FRAGMENT */))
+          _createElementVNode(\\"p\\")
+        ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
       : _createCommentVNode(\\"v-if\\", true)
   }
 }"
@@ -91,11 +91,11 @@ exports[`compiler: v-if codegen v-if + v-else 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
-      : (_openBlock(), _createBlock(\\"p\\", { key: 1 }))
+      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
+      : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
   }
 }"
 `;
@@ -105,13 +105,13 @@ exports[`compiler: v-if codegen v-if + v-else-if + v-else 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
 
     return ok
-      ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
+      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
       : orNot
-        ? (_openBlock(), _createBlock(\\"p\\", { key: 1 }))
-        : (_openBlock(), _createBlock(_Fragment, { key: 2 }, [\\"fine\\"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+        ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
+        : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -121,12 +121,12 @@ exports[`compiler: v-if codegen v-if + v-else-if 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
+      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
       : orNot
-        ? (_openBlock(), _createBlock(\\"p\\", { key: 1 }))
+        ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
         : _createCommentVNode(\\"v-if\\", true)
   }
 }"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index d3bc85bf756..0224412ece4 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`compiler: transform v-model compound expression (with prefixIdentifiers) 1`] = `
-"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"input\\", {
+  return (_openBlock(), _createElementBlock(\\"input\\", {
     modelValue: _ctx.model[_ctx.index],
     \\"onUpdate:modelValue\\": $event => (_ctx.model[_ctx.index] = $event)
   }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
@@ -16,9 +16,9 @@ exports[`compiler: transform v-model compound expression 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock(\\"input\\", {
       modelValue: model[index],
       \\"onUpdate:modelValue\\": $event => (model[index] = $event)
     }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
@@ -31,9 +31,9 @@ exports[`compiler: transform v-model simple expression (with multilines) 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock(\\"input\\", {
       modelValue: 
  model
 .
@@ -50,10 +50,10 @@ foo
 `;
 
 exports[`compiler: transform v-model simple expression (with prefixIdentifiers) 1`] = `
-"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"input\\", {
+  return (_openBlock(), _createElementBlock(\\"input\\", {
     modelValue: _ctx.model,
     \\"onUpdate:modelValue\\": $event => (_ctx.model = $event)
   }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
@@ -65,9 +65,9 @@ exports[`compiler: transform v-model simple expression 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock(\\"input\\", {
       modelValue: model,
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
@@ -80,9 +80,9 @@ exports[`compiler: transform v-model with argument 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock(\\"input\\", {
       value: model,
       \\"onUpdate:value\\": $event => (model = $event)
     }, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"value\\", \\"onUpdate:value\\"]))
@@ -91,10 +91,10 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform v-model with dynamic argument (with prefixIdentifiers) 1`] = `
-"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"input\\", {
+  return (_openBlock(), _createElementBlock(\\"input\\", {
     [_ctx.value]: _ctx.model,
     [\\"onUpdate:\\" + _ctx.value]: $event => (_ctx.model = $event)
   }, null, 16 /* FULL_PROPS */))
@@ -106,9 +106,9 @@ exports[`compiler: transform v-model with dynamic argument 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock(\\"input\\", {
       [value]: model,
       [\\"onUpdate:\\" + value]: $event => (model = $event)
     }, null, 16 /* FULL_PROPS */))
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index f4897194f03..e717b9aaf9a 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -5,11 +5,11 @@ exports[`compiler: v-once transform as root node 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { setBlockTracking: _setBlockTracking, createVNode: _createVNode } = _Vue
+    const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode } = _Vue
 
     return _cache[1] || (
       _setBlockTracking(-1),
-      _cache[1] = _createVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+      _cache[1] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
       _setBlockTracking(1),
       _cache[1]
     )
@@ -22,18 +22,18 @@ exports[`compiler: v-once transform on component 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _cache[1] || (
         _setBlockTracking(-1),
-        _cache[1] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+        _cache[1] = _createComponentVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
         _setBlockTracking(1),
         _cache[1]
       )
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -43,16 +43,16 @@ exports[`compiler: v-once transform on nested plain element 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _cache[1] || (
         _setBlockTracking(-1),
-        _cache[1] = _createVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+        _cache[1] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
         _setBlockTracking(1),
         _cache[1]
       )
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -62,16 +62,16 @@ exports[`compiler: v-once transform on slot outlet 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _cache[1] || (
         _setBlockTracking(-1),
         _cache[1] = _renderSlot($slots, \\"default\\"),
         _setBlockTracking(1),
         _cache[1]
       )
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
@@ -81,16 +81,16 @@ exports[`compiler: v-once transform with hoistStatic: true 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _cache[1] || (
         _setBlockTracking(-1),
-        _cache[1] = _createVNode(\\"div\\"),
+        _cache[1] = _createElementVNode(\\"div\\"),
         _setBlockTracking(1),
         _cache[1]
       )
-    ]))
+    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
index 008fc7ba5be..ae0158c05e5 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`compiler: transform component slots dynamically named slots 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     [_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     [_ctx.two]: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]),
     _: 2 /* DYNAMIC */
@@ -15,14 +15,14 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots implicit default slot 1`] = `
-"const { createVNode: _createVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     default: _withCtx(() => [
-      _createVNode(\\"div\\")
+      _createElementVNode(\\"div\\")
     ]),
     _: 1 /* STABLE */
   }))
@@ -30,12 +30,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots named slot with v-for w/ prefixIdentifiers: true 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     _renderList(_ctx.list, (name) => {
       return {
         name: name,
@@ -47,12 +47,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots named slot with v-if + prefixIdentifiers: true 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
           name: \\"one\\",
@@ -68,11 +68,11 @@ exports[`compiler: transform component slots named slot with v-if + v-else-if +
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+    return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
             name: \\"one\\",
@@ -97,11 +97,11 @@ exports[`compiler: transform component slots named slot with v-if 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+    return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
             name: \\"one\\",
@@ -118,15 +118,15 @@ exports[`compiler: transform component slots named slots w/ implicit default slo
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createBlock(_component_Comp, null, {
+    return (_openBlock(), _createComponentBlock(_component_Comp, null, {
       one: _withCtx(() => [\\"foo\\"]),
       default: _withCtx(() => [
         \\"bar\\",
-        _createVNode(\\"span\\")
+        _createElementVNode(\\"span\\")
       ]),
       _: 1 /* STABLE */
     }))
@@ -135,15 +135,15 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots nested slots scoping 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Inner = _resolveComponent(\\"Inner\\")
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     default: _withCtx(({ foo }) => [
-      _createVNode(_component_Inner, null, {
+      _createComponentVNode(_component_Inner, null, {
         default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
         _: 2 /* DYNAMIC */
       }, 1024 /* DYNAMIC_SLOTS */),
@@ -158,12 +158,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots on component dynamically named slot 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     [_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     _: 2 /* DYNAMIC */
   }, 1024 /* DYNAMIC_SLOTS */))
@@ -171,12 +171,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots on component named slot 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     _: 1 /* STABLE */
   }))
@@ -184,12 +184,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots on-component default slot 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     _: 1 /* STABLE */
   }))
@@ -197,12 +197,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots template named slots 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     two: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]),
     _: 1 /* STABLE */
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 6e3a4d9356a..718c4957c2a 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -204,11 +204,11 @@ export const transformElement: NodeTransform = (node, context) => {
           shapeFlag |= ShapeFlags.TEXT_CHILDREN
         } else {
           vnodeChildren = node.children
-          shapeFlag |= ShapeFlags.ARRAY_CHILDREN
+          vnodeTag !== KEEP_ALIVE && (shapeFlag |= ShapeFlags.ARRAY_CHILDREN)
         }
       } else {
         vnodeChildren = node.children
-        shapeFlag |= ShapeFlags.ARRAY_CHILDREN
+        vnodeTag !== KEEP_ALIVE && (shapeFlag |= ShapeFlags.ARRAY_CHILDREN)
       }
     }
 
diff --git a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
index c094979fcd3..d68e3bb328f 100644
--- a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
@@ -5,17 +5,21 @@ exports[`compile should contain standard transforms 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, normalizeStyle: _normalizeStyle, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createBlock(_Fragment, null, [
-      _createVNode(\\"div\\", {
+    return (_openBlock(), _createElementBlock(_Fragment, null, [
+      _createElementVNode(\\"div\\", {
         textContent: _toDisplayString(text)
       }, null, 8 /* PROPS */, [\\"textContent\\"]),
-      _createVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
-      _createVNode(\\"div\\", null, \\"test\\"),
-      _createVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
-      _createVNode(\\"div\\", { style: {color: 'green'} }, null, 4 /* STYLE */)
-    ], 64 /* STABLE_FRAGMENT */))
+      _createElementVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
+      _createElementVNode(\\"div\\", null, \\"test\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */),
+      _createElementVNode(\\"div\\", {
+        style: _normalizeStyle({\\"color\\":\\"red\\"})
+      }, \\"red\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */),
+      _createElementVNode(\\"div\\", {
+        style: _normalizeStyle({color: 'green'})
+      }, null, 4 /* STYLE */)
+    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
   }
 }"
 `;
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index 8070ff942d7..3d1205fc3ef 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -5,9 +5,9 @@ exports[`compiler: transform v-model errors should allow usage on custom element
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"my-input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"my-input\\", {
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
       [_vModelText, model]
@@ -21,11 +21,11 @@ exports[`compiler: transform v-model input w/ dynamic v-bind 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, normalizeProps: _normalizeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", _mergeProps(obj, {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _normalizeProps(_mergeProps(obj, {
       \\"onUpdate:modelValue\\": $event => (model = $event)
-    }), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
+    })), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
       [_vModelDynamic, model]
     ])
   }
@@ -37,11 +37,11 @@ exports[`compiler: transform v-model input w/ dynamic v-bind 2`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _directive_bind = _resolveDirective(\\"bind\\")
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
       [_directive_bind, val, key],
@@ -56,9 +56,9 @@ exports[`compiler: transform v-model modifiers .lazy 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
       [
@@ -77,9 +77,9 @@ exports[`compiler: transform v-model modifiers .number 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
       [
@@ -98,9 +98,9 @@ exports[`compiler: transform v-model modifiers .trim 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
       [
@@ -119,9 +119,9 @@ exports[`compiler: transform v-model simple expression 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
       [_vModelText, model]
@@ -135,9 +135,9 @@ exports[`compiler: transform v-model simple expression for input (checkbox) 1`]
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       type: \\"checkbox\\",
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
@@ -152,11 +152,11 @@ exports[`compiler: transform v-model simple expression for input (dynamic type)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _directive_bind = _resolveDirective(\\"bind\\")
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
       [_directive_bind, foo, \\"type\\"],
@@ -171,9 +171,9 @@ exports[`compiler: transform v-model simple expression for input (radio) 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       type: \\"radio\\",
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
@@ -188,9 +188,9 @@ exports[`compiler: transform v-model simple expression for input (text) 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       type: \\"text\\",
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
@@ -205,9 +205,9 @@ exports[`compiler: transform v-model simple expression for select 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"select\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"select\\", {
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
       [_vModelSelect, model]
@@ -221,9 +221,9 @@ exports[`compiler: transform v-model simple expression for textarea 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"textarea\\", {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"textarea\\", {
       \\"onUpdate:modelValue\\": $event => (model = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
       [_vModelText, model]
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
index 954a8d07940..a0d5e72002b 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
@@ -5,9 +5,9 @@ exports[`compiler: v-show transform simple expression 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vShow: _vShow, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { vShow: _vShow, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
+    return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
       [_vShow, a]
     ])
   }
diff --git a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
index 6eee9f8ba38..5aedd9f1110 100644
--- a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
@@ -4,7 +4,8 @@ import {
   CompilerOptions,
   ElementNode,
   NodeTypes,
-  VNodeCall
+  VNodeCall,
+  NORMALIZE_STYLE
 } from '@vue/compiler-core'
 import { transformBind } from '../../../compiler-core/src/transforms/vBind'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
@@ -61,9 +62,15 @@ describe('compiler: style transform', () => {
             isStatic: true
           },
           value: {
-            type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `{"color":"red"}`,
-            isStatic: false
+            type: NodeTypes.JS_CALL_EXPRESSION,
+            callee: NORMALIZE_STYLE,
+            arguments: [
+              {
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                content: `{"color":"red"}`,
+                isStatic: false
+              }
+            ]
           }
         }
       ]
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 7397228fb3b..94116ed3776 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -214,7 +214,7 @@ return { ref }
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode avoid unref() when necessary 1`] = `
-"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createComponentVNode as _createComponentVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         import Foo, { bar } from './Foo.vue'
@@ -231,15 +231,15 @@ export default {
         function fn() {}
         
 return (_ctx, _cache) => {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(Foo, null, {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createComponentVNode(Foo, null, {
       default: _withCtx(() => [
         _createTextVNode(_toDisplayString(_unref(bar)), 1 /* TEXT */)
       ]),
       _: 1 /* STABLE */
     }),
-    _createVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */)
-  ], 64 /* STABLE_FRAGMENT */))
+    _createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }
 }
 
@@ -247,7 +247,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode referencing scope components and directives 1`] = `
-"import { unref as _unref, createVNode as _createVNode, withDirectives as _withDirectives, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createComponentVNode as _createComponentVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import ChildComp from './Child.vue'
         import SomeOtherComp from './Other.vue'
@@ -259,13 +259,13 @@ export default {
 
         
 return (_ctx, _cache) => {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _withDirectives(_createVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
       [_unref(myDir)]
     ]),
-    _createVNode(ChildComp),
-    _createVNode(SomeOtherComp)
-  ], 64 /* STABLE_FRAGMENT */))
+    _createComponentVNode(ChildComp),
+    _createComponentVNode(SomeOtherComp)
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }
 }
 
@@ -292,9 +292,9 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode should work 1`] = `
-"import { toDisplayString as _toDisplayString, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
-const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
 
 import { ref } from 'vue'
         
@@ -305,10 +305,10 @@ export default {
         const count = ref(0)
         
 return (_ctx, _cache) => {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */),
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */),
     _hoisted_1
-  ], 64 /* STABLE_FRAGMENT */))
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }
 }
 
@@ -350,7 +350,7 @@ return (_ctx, _push, _parent, _attrs) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode template assignment expression codegen 1`] = `
-"import { createVNode as _createVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         
@@ -363,17 +363,17 @@ export default {
         let lett = 1
         
 return (_ctx, _cache) => {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"div\\", {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"div\\", {
       onClick: _cache[1] || (_cache[1] = $event => (count.value = 1))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[2] || (_cache[2] = $event => (maybe.value = count.value))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[3] || (_cache[3] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
     })
-  ], 64 /* STABLE_FRAGMENT */))
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }
 }
 
@@ -381,7 +381,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode template destructure assignment codegen 1`] = `
-"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         
@@ -395,17 +395,17 @@ export default {
         let lett = 1
         
 return (_ctx, _cache) => {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"div\\", {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"div\\", {
       onClick: _cache[1] || (_cache[1] = $event => (({ count: count.value } = val)))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[2] || (_cache[2] = $event => ([maybe.value] = val))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[3] || (_cache[3] = $event => (({ lett: lett } = val)))
     })
-  ], 64 /* STABLE_FRAGMENT */))
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }
 }
 
@@ -413,7 +413,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode template update expression codegen 1`] = `
-"import { createVNode as _createVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         
@@ -426,26 +426,26 @@ export default {
         let lett = 1
         
 return (_ctx, _cache) => {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"div\\", {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"div\\", {
       onClick: _cache[1] || (_cache[1] = $event => (count.value++))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[2] || (_cache[2] = $event => (--count.value))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[3] || (_cache[3] = $event => (maybe.value++))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[4] || (_cache[4] = $event => (--maybe.value))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[5] || (_cache[5] = $event => (_isRef(lett) ? lett.value++ : lett++))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[6] || (_cache[6] = $event => (_isRef(lett) ? --lett.value : --lett))
     })
-  ], 64 /* STABLE_FRAGMENT */))
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }
 }
 
@@ -453,7 +453,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode v-model codegen 1`] = `
-"import { vModelText as _vModelText, createVNode as _createVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         
@@ -466,23 +466,23 @@ export default {
         let lett = 1
         
 return (_ctx, _cache) => {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _withDirectives(_createVNode(\\"input\\", {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _withDirectives(_createElementVNode(\\"input\\", {
       \\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (count.value = $event))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, count.value]
     ]),
-    _withDirectives(_createVNode(\\"input\\", {
+    _withDirectives(_createElementVNode(\\"input\\", {
       \\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(maybe) ? maybe.value = $event : null))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, _unref(maybe)]
     ]),
-    _withDirectives(_createVNode(\\"input\\", {
+    _withDirectives(_createElementVNode(\\"input\\", {
       \\"onUpdate:modelValue\\": _cache[3] || (_cache[3] = $event => (_isRef(lett) ? lett.value = $event : lett = $event))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, _unref(lett)]
     ])
-  ], 64 /* STABLE_FRAGMENT */))
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }
 }
 
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
index 706539abe39..0af6bed672f 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`source map 1`] = `
 Object {
-  "mappings": ";;;wBACE,aAA8B;IAAzB,aAAmB,4BAAbA,WAAM",
+  "mappings": ";;;wBACE,oBAA8B;IAAzB,oBAAmB,4BAAbA,WAAM",
   "names": Array [
     "render",
   ],
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index c1d8c39fa6c..89cb5798415 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
@@ -1,102 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`compiler sfc: transform asset url should allow for full base URLs, with paths 1`] = `
-"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" }))
+  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url should allow for full base URLs, without paths 1`] = `
-"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" }))
+  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url should allow for full base URLs, without port 1`] = `
-"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" }))
+  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url should allow for full base URLs, without protocol 1`] = `
-"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"img\\", { src: \\"//localhost/logo.png\\" }))
+  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"//localhost/logo.png\\" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url support uri fragment 1`] = `
-"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from '@svg/file.svg'
 
 
 const _hoisted_1 = _imports_0 + '#fragment'
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"use\\", { href: _hoisted_1 }))
+  return (_openBlock(), _createElementBlock(\\"use\\", { href: _hoisted_1 }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url support uri is empty 1`] = `
-"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(\\"use\\", { href: '' }))
+  return (_openBlock(), _createElementBlock(\\"use\\", { href: '' }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url transform assetUrls 1`] = `
-"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './logo.png'
 import _imports_1 from 'fixtures/logo.png'
 
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"img\\", { src: _imports_0 }),
-    _createVNode(\\"img\\", { src: _imports_1 }),
-    _createVNode(\\"img\\", { src: _imports_1 }),
-    _createVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }),
-    _createVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }),
-    _createVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" })
-  ], 64 /* STABLE_FRAGMENT */))
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"img\\", { src: _imports_0 }),
+    _createElementVNode(\\"img\\", { src: _imports_1 }),
+    _createElementVNode(\\"img\\", { src: _imports_1 }),
+    _createElementVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }),
+    _createElementVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }),
+    _createElementVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" })
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }"
 `;
 
 exports[`compiler sfc: transform asset url with explicit base 1`] = `
-"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from 'bar.png'
 import _imports_1 from '@theme/bar.png'
 
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
-    _createVNode(\\"img\\", { src: \\"bar.png\\" }),
-    _createVNode(\\"img\\", { src: _imports_0 }),
-    _createVNode(\\"img\\", { src: _imports_1 })
-  ], 64 /* STABLE_FRAGMENT */))
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
+    _createElementVNode(\\"img\\", { src: \\"bar.png\\" }),
+    _createElementVNode(\\"img\\", { src: _imports_0 }),
+    _createElementVNode(\\"img\\", { src: _imports_1 })
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }"
 `;
 
 exports[`compiler sfc: transform asset url with includeAbsolute: true 1`] = `
-"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './bar.png'
 import _imports_1 from '/bar.png'
 
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"img\\", { src: _imports_0 }),
-    _createVNode(\\"img\\", { src: _imports_1 }),
-    _createVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" })
-  ], 64 /* STABLE_FRAGMENT */))
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"img\\", { src: _imports_0 }),
+    _createElementVNode(\\"img\\", { src: _imports_1 }),
+    _createElementVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" })
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }"
 `;
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
index a4cc85003a5..51deeaa34ab 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`compiler sfc: transform srcset transform srcset 1`] = `
-"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './logo.png'
 
 
@@ -15,118 +15,118 @@ const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + ' 2x'
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"img\\", {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_1
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_2
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_3
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_4
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_5
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_6
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_7
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"/logo.png\\",
       srcset: \\"/logo.png, /logo.png 2x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"https://example.com/logo.png\\",
       srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"/logo.png\\",
       srcset: _hoisted_8
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"data:image/png;base64,i\\",
       srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
     })
-  ], 64 /* STABLE_FRAGMENT */))
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset transform srcset w/ base 1`] = `
-"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"img\\", {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"/foo/logo.png\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"/foo/logo.png 2x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"/foo/logo.png 2x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"/foo/logo.png, /foo/logo.png 2x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"/foo/logo.png 2x, /foo/logo.png\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"/foo/logo.png 2x, /foo/logo.png 3x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"/logo.png\\",
       srcset: \\"/logo.png, /logo.png 2x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"https://example.com/logo.png\\",
       srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"/logo.png\\",
       srcset: \\"/logo.png, /foo/logo.png 2x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"data:image/png;base64,i\\",
       srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
     })
-  ], 64 /* STABLE_FRAGMENT */))
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset transform srcset w/ includeAbsolute: true 1`] = `
-"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './logo.png'
 import _imports_1 from '/logo.png'
 
@@ -142,55 +142,55 @@ const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
 const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(\\"img\\", {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_1
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_2
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_3
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_4
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_5
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_6
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_7
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"/logo.png\\",
       srcset: _hoisted_8
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"https://example.com/logo.png\\",
       srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"/logo.png\\",
       srcset: _hoisted_9
     }),
-    _createVNode(\\"img\\", {
+    _createElementVNode(\\"img\\", {
       src: \\"data:image/png;base64,i\\",
       srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
     })
-  ], 64 /* STABLE_FRAGMENT */))
+  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }"
 `;

From daa3598a9014023206d097904cb3950f59ec7069 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Mon, 1 Mar 2021 23:52:06 +0800
Subject: [PATCH 03/15] chore: comments

---
 packages/compiler-core/src/codegen.ts               |  4 ++--
 packages/compiler-core/src/transform.ts             |  4 ++--
 .../compiler-core/src/transforms/hoistStatic.ts     | 13 +++++++------
 .../src/transforms/transformElement.ts              |  8 +++++---
 packages/compiler-core/src/utils.ts                 |  6 +++---
 packages/runtime-core/src/vnode.ts                  |  4 +---
 6 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index c74891ea1d9..0f522cc762d 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -776,7 +776,7 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
     push(PURE_ANNOTATION)
   }
   let callHelper: symbol = isBlock ? CREATE_BLOCK : CREATE_VNODE
-  if (!context.ssr) {
+  if (!context.forSSR) {
     callHelper = isBlock
       ? isComponent
         ? CREATE_COMPONENT_BLOCK
@@ -793,7 +793,7 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
       children,
       patchFlag,
       dynamicProps,
-      context.ssr ? null : shapeFlag
+      context.forSSR ? null : shapeFlag
     ]),
     context
   )
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 98d4238fa40..8baedb32d47 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -356,7 +356,7 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
         if (!codegenNode.isBlock) {
           codegenNode.isBlock = true
           removeHelper(
-            context.ssr
+            context.forSSR
               ? CREATE_VNODE
               : codegenNode.isComponent
                 ? CREATE_COMPONENT_VNODE
@@ -364,7 +364,7 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
           )
           helper(OPEN_BLOCK)
           helper(
-            context.ssr
+            context.forSSR
               ? CREATE_BLOCK
               : codegenNode.isComponent
                 ? CREATE_COMPONENT_BLOCK
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index 4e5455e9fb9..e0829a543fc 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -238,7 +238,7 @@ export function getConstantType(
           )
           codegenNode.isBlock = false
           context.helper(
-            context.ssr
+            context.forSSR
               ? CREATE_VNODE
               : codegenNode.isComponent
                 ? CREATE_COMPONENT_VNODE
@@ -288,7 +288,7 @@ export function getConstantType(
   }
 }
 
-const allowHoistedHelperSet = new Set<string | symbol>([
+const allowHoistedHelperSet = new Set([
   NORMALIZE_CLASS,
   NORMALIZE_STYLE,
   NORMALIZE_PROPS,
@@ -303,13 +303,14 @@ function getConstantTypeOfHelperCall(
 ): ConstantTypes {
   if (
     value.type === NodeTypes.JS_CALL_EXPRESSION &&
+    !isString(value.callee) &&
     allowHoistedHelperSet.has(value.callee)
   ) {
     const arg = value.arguments[0] as JSChildNode
     if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
       return getConstantType(arg, context)
     } else if (arg.type === NodeTypes.JS_CALL_EXPRESSION) {
-      // in the case of nested calls, e.g. `normalizeProps(guardReactiveProps(exp))`
+      // in the case of nested helper call, e.g. `normalizeProps(guardReactiveProps(exp))`
       return getConstantTypeOfHelperCall(arg, context)
     }
   }
@@ -334,9 +335,9 @@ function getGeneratedPropsConstantType(
         returnType = keyType
       }
       if (value.type !== NodeTypes.SIMPLE_EXPRESSION) {
-        // some function calls can be hoisted,
-        // such as the `normalizeClass` call generated by the compiler for pre-normalize class,
-        // in this case we need to respect the ConstanType of the function's argments
+        // some helper calls can be hoisted,
+        // such as the `normalizeProps` generated by the compiler for pre-normalize class,
+        // in this case we need to respect the ConstanType of the helper's argments
         if (value.type === NodeTypes.JS_CALL_EXPRESSION) {
           return getConstantTypeOfHelperCall(value, context)
         }
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 718c4957c2a..60b0daacdeb 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -204,6 +204,7 @@ export const transformElement: NodeTransform = (node, context) => {
           shapeFlag |= ShapeFlags.TEXT_CHILDREN
         } else {
           vnodeChildren = node.children
+          // KeepAlive is a component, but no slot is built for it at compile time
           vnodeTag !== KEEP_ALIVE && (shapeFlag |= ShapeFlags.ARRAY_CHILDREN)
         }
       } else {
@@ -446,6 +447,7 @@ export function buildProps(
         dynamicPropNames.push(name)
       }
 
+      // treat the dynamic binding class and style of the component as dynamic props
       if (
         isComponent &&
         (name === 'class' || name === 'style') &&
@@ -690,7 +692,7 @@ export function buildProps(
     patchFlag |= PatchFlags.NEED_PATCH
   }
 
-  // pre-normalize props, SSR skip for now
+  // pre-normalize props, SSR is skipped for now
   if (!context.forSSR && propsExpression) {
     switch (propsExpression.type) {
       case NodeTypes.JS_OBJECT_EXPRESSION:
@@ -786,8 +788,8 @@ export function buildProps(
   }
 }
 
-// normalization is only needed when the dynamic binding key is before the binding of class and style
-// i.e. <p :[dynamic]="val" :class="cls" :style="stl" />
+// normalization is only needed when the dynamic binding key is before the class and style
+// e.g. <p :[dynamic]="val" :class="cls" :style="stl" />
 function doNormalize(
   context: TransformContext,
   properties: Property[],
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index d8f18e7af64..6cbdd6f7874 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -329,9 +329,9 @@ export function injectProp(
       createObjectExpression([prop]),
       props
     ])
-    // in the case of `normalizeProps(guardReactiveProps(props))`,
-    // will be rewritten as `normalizeProps(mergeProps({ key: 0 }, props))`,
-    // `guardReactiveProps` will no longer be needed
+    // in the case of nested helper call, e.g. `normalizeProps(guardReactiveProps(props))`,
+    // it will be rewritten as `normalizeProps(mergeProps({ key: 0 }, props))`,
+    // the `guardReactiveProps` will no longer be needed
     if (parentCall && parentCall.callee === GUARD_REACTIVE_PROPS) {
       parentCall = callPath[callPath.length - 2]
     }
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 8c2e71eaa2e..cdb7bcc6eb0 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -589,9 +589,7 @@ function _createVNode(
   // class & style normalization.
   if (props) {
     // for reactive or proxy objects, we need to clone it to enable mutation.
-    if (isProxy(props) || InternalObjectKey in props) {
-      props = extend({}, props)
-    }
+    props = guardReactiveProps(props)!
     let { class: klass, style } = props
     if (klass && !isString(klass)) {
       props.class = normalizeClass(klass)

From fe4347c32437f726ffec4d3a7adaafa6397aa1b2 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Tue, 2 Mar 2021 11:27:36 +0800
Subject: [PATCH 04/15] feat: introduce createPlainVnode

---
 packages/runtime-core/src/vnode.ts | 225 +++++++++++++----------------
 1 file changed, 97 insertions(+), 128 deletions(-)

diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index cdb7bcc6eb0..df24bfce9d1 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -242,7 +242,9 @@ let isBlockTreeEnabled = 1
 export function setBlockTracking(value: number) {
   isBlockTreeEnabled += value
 }
-
+/**
+ * @private
+ */
 function setupBlock(vnode: VNode) {
   // save current block children on the block vnode
   vnode.dynamicChildren = isBlockTreeEnabled > 0 ? currentBlock || (EMPTY_ARR as any) : null
@@ -254,7 +256,9 @@ function setupBlock(vnode: VNode) {
     currentBlock.push(vnode)
   }
 }
-
+/**
+ * @private
+ */
 function trackVNode(
   vnode: VNode,
   isBlockNode: boolean,
@@ -278,8 +282,16 @@ function trackVNode(
   ) {
     currentBlock.push(vnode)
   }
-}
 
+  if (__COMPAT__) {
+    convertLegacyVModelProps(vnode)
+    convertLegacyRefInFor(vnode)
+    defineLegacyVNodeProperties(vnode)
+  }
+}
+/**
+ * @private
+ */
 export function createElementBlock(
   type: string,
   props?: Record<string, any> | null,
@@ -301,6 +313,9 @@ export function createElementBlock(
   return vnode
 }
 
+/**
+ * @private
+ */
 export function createComponentBlock(
   type:
     | Component
@@ -409,22 +424,16 @@ const normalizeRef = ({ ref }: VNodeProps): VNodeNormalizedRefAtom | null => {
     : null) as any
 }
 
-export const createVNode = (__DEV__
-  ? createVNodeWithArgsTransform
-  : _createVNode) as typeof _createVNode
-
-export function createElementVNode(
-  type: string,
+function createPlainVNode(
+  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
   props: (Data & VNodeProps) | null = null,
-  children: Exclude<VNodeNormalizedChildren, RawSlots> = null,
+  children: unknown = null,
   patchFlag: number = 0,
-  dynamicProps: string[] | null = null,
-  shapeFlag = ShapeFlags.ELEMENT,
-  isBlockNode = false
+  dynamicProps: string[] | null = null
 ) {
-  const vnode: VNode = {
+  return {
     __v_isVNode: true,
-    [ReactiveFlags.SKIP]: true,
+    __v_skip: true,
     type,
     props,
     key: props && normalizeKey(props),
@@ -443,27 +452,26 @@ export function createElementVNode(
     target: null,
     targetAnchor: null,
     staticCount: 0,
-    shapeFlag,
+    shapeFlag: 0,
     patchFlag,
     dynamicProps,
     dynamicChildren: null,
     appContext: null
-  }
-
-  trackVNode(vnode, isBlockNode, patchFlag, shapeFlag)
-
-  return vnode
+  } as VNode
 }
 
-export function createComponentVNode(
+export const createVNode = (__DEV__
+  ? createVNodeWithArgsTransform
+  : _createVNode) as typeof _createVNode
+
+function _createVNode(
   type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
   props: (Data & VNodeProps) | null = null,
-  children: Exclude<VNodeNormalizedChildren, RawSlots> = null,
+  children: unknown = null,
   patchFlag: number = 0,
   dynamicProps: string[] | null = null,
-  shapeFlag: ShapeFlags = 0,
   isBlockNode = false
-) {
+): VNode {
   if (!type || type === NULL_DYNAMIC_COMPONENT) {
     if (__DEV__ && !type) {
       warn(`Invalid vnode type when creating vnode: ${type}.`)
@@ -472,6 +480,9 @@ export function createComponentVNode(
   }
 
   if (isVNode(type)) {
+    // createVNode receiving an existing vnode. This happens in cases like
+    // <component :is="vnode"/>
+    // #2078 make sure to merge refs during the clone instead of overwriting it
     const cloned = cloneVNode(type, props, true /* mergeRef: true */)
     if (children) {
       normalizeChildren(cloned, children)
@@ -484,15 +495,37 @@ export function createComponentVNode(
     type = type.__vccOpts
   }
 
-  // Suspense and Teleport analysis at compile time
-  if (!shapeFlag) {
-    shapeFlag = isObject(type)
-      ? ShapeFlags.STATEFUL_COMPONENT
-      : isFunction(type)
-        ? ShapeFlags.FUNCTIONAL_COMPONENT
-        : 0
+  // class & style normalization.
+  if (props) {
+    // for reactive or proxy objects, we need to clone it to enable mutation.
+    props = guardReactiveProps(props)!
+    let { class: klass, style } = props
+    if (klass && !isString(klass)) {
+      props.class = normalizeClass(klass)
+    }
+    if (isObject(style)) {
+      // reactive state objects need to be cloned since they are likely to be
+      // mutated
+      if (isProxy(style) && !isArray(style)) {
+        style = extend({}, style)
+      }
+      props.style = normalizeStyle(style)
+    }
   }
 
+  // encode the vnode type information into a bitmap
+  const shapeFlag = isString(type)
+    ? ShapeFlags.ELEMENT
+    : __FEATURE_SUSPENSE__ && isSuspense(type)
+      ? ShapeFlags.SUSPENSE
+      : isTeleport(type)
+        ? ShapeFlags.TELEPORT
+        : isObject(type)
+          ? ShapeFlags.STATEFUL_COMPONENT
+          : isFunction(type)
+            ? ShapeFlags.FUNCTIONAL_COMPONENT
+            : 0
+
   if (__DEV__ && shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isProxy(type)) {
     type = toRaw(type)
     warn(
@@ -505,33 +538,8 @@ export function createComponentVNode(
     )
   }
 
-  const vnode: VNode = {
-    __v_isVNode: true,
-    [ReactiveFlags.SKIP]: true,
-    type,
-    props,
-    key: props && normalizeKey(props),
-    ref: props && normalizeRef(props),
-    scopeId: currentScopeId,
-    slotScopeIds: null,
-    children: null,
-    component: null,
-    suspense: null,
-    ssContent: null,
-    ssFallback: null,
-    dirs: null,
-    transition: null,
-    el: null,
-    anchor: null,
-    target: null,
-    targetAnchor: null,
-    staticCount: 0,
-    shapeFlag,
-    patchFlag,
-    dynamicProps,
-    dynamicChildren: null,
-    appContext: null
-  }
+  const vnode = createPlainVNode(type, props, children, patchFlag, dynamicProps)
+  vnode.shapeFlag = shapeFlag
 
   // validate key
   if (__DEV__ && vnode.key !== vnode.key) {
@@ -550,14 +558,30 @@ export function createComponentVNode(
   return vnode
 }
 
-function _createVNode(
+export function createElementVNode(
+  type: string,
+  props: (Data & VNodeProps) | null = null,
+  children: Exclude<VNodeNormalizedChildren, RawSlots> = null,
+  patchFlag: number = 0,
+  dynamicProps: string[] | null = null,
+  shapeFlag = ShapeFlags.ELEMENT,
+  isBlockNode = false
+) {
+  const vnode = createPlainVNode(type, props, children, patchFlag, dynamicProps)
+  vnode.shapeFlag = shapeFlag
+  trackVNode(vnode, isBlockNode, patchFlag, shapeFlag)
+  return vnode
+}
+
+export function createComponentVNode(
   type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
   props: (Data & VNodeProps) | null = null,
-  children: unknown = null,
+  children: Exclude<VNodeNormalizedChildren, RawSlots> = null,
   patchFlag: number = 0,
   dynamicProps: string[] | null = null,
+  shapeFlag: ShapeFlags = 0,
   isBlockNode = false
-): VNode {
+) {
   if (!type || type === NULL_DYNAMIC_COMPONENT) {
     if (__DEV__ && !type) {
       warn(`Invalid vnode type when creating vnode: ${type}.`)
@@ -566,9 +590,6 @@ function _createVNode(
   }
 
   if (isVNode(type)) {
-    // createVNode receiving an existing vnode. This happens in cases like
-    // <component :is="vnode"/>
-    // #2078 make sure to merge refs during the clone instead of overwriting it
     const cloned = cloneVNode(type, props, true /* mergeRef: true */)
     if (children) {
       normalizeChildren(cloned, children)
@@ -604,18 +625,14 @@ function _createVNode(
     }
   }
 
-  // encode the vnode type information into a bitmap
-  const shapeFlag = isString(type)
-    ? ShapeFlags.ELEMENT
-    : __FEATURE_SUSPENSE__ && isSuspense(type)
-      ? ShapeFlags.SUSPENSE
-      : isTeleport(type)
-        ? ShapeFlags.TELEPORT
-        : isObject(type)
-          ? ShapeFlags.STATEFUL_COMPONENT
-          : isFunction(type)
-            ? ShapeFlags.FUNCTIONAL_COMPONENT
-            : 0
+  // Suspense and Teleport analysis at compile time
+  if (!shapeFlag) {
+    shapeFlag = isObject(type)
+      ? ShapeFlags.STATEFUL_COMPONENT
+      : isFunction(type)
+        ? ShapeFlags.FUNCTIONAL_COMPONENT
+        : 0
+  }
 
   if (__DEV__ && shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isProxy(type)) {
     type = toRaw(type)
@@ -629,33 +646,8 @@ function _createVNode(
     )
   }
 
-  const vnode: VNode = {
-    __v_isVNode: true,
-    __v_skip: true,
-    type,
-    props,
-    key: props && normalizeKey(props),
-    ref: props && normalizeRef(props),
-    scopeId: currentScopeId,
-    slotScopeIds: null,
-    children: null,
-    component: null,
-    suspense: null,
-    ssContent: null,
-    ssFallback: null,
-    dirs: null,
-    transition: null,
-    el: null,
-    anchor: null,
-    target: null,
-    targetAnchor: null,
-    staticCount: 0,
-    shapeFlag,
-    patchFlag,
-    dynamicProps,
-    dynamicChildren: null,
-    appContext: null
-  }
+  const vnode = createPlainVNode(type, props, children, patchFlag, dynamicProps)
+  vnode.shapeFlag = shapeFlag
 
   // validate key
   if (__DEV__ && vnode.key !== vnode.key) {
@@ -669,30 +661,7 @@ function _createVNode(
     ;(type as typeof SuspenseImpl).normalize(vnode)
   }
 
-  if (
-    isBlockTreeEnabled > 0 &&
-    // avoid a block node from tracking itself
-    !isBlockNode &&
-    // has current parent block
-    currentBlock &&
-    // presence of a patch flag indicates this node needs patching on updates.
-    // component nodes also should always be patched, because even if the
-    // component doesn't need to update, it needs to persist the instance on to
-    // the next vnode so that it can be properly unmounted later.
-    (patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
-    // the EVENTS flag is only for hydration and if it is the only flag, the
-    // vnode should not be considered dynamic due to handler caching.
-    patchFlag !== PatchFlags.HYDRATE_EVENTS
-  ) {
-    currentBlock.push(vnode)
-  }
-
-  if (__COMPAT__) {
-    convertLegacyVModelProps(vnode)
-    convertLegacyRefInFor(vnode)
-    defineLegacyVNodeProperties(vnode)
-  }
-
+  trackVNode(vnode, isBlockNode, patchFlag, shapeFlag)
   return vnode
 }
 

From ad4b7ae85cd9de0ca0711cb8c2136574afdccf2d Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Tue, 2 Mar 2021 14:04:50 +0800
Subject: [PATCH 05/15] fix: treat constant style or clase as not requiring
 normalization

---
 .../src/transforms/transformElement.ts            | 14 ++++++++------
 packages/compiler-core/src/utils.ts               |  2 ++
 .../__tests__/__snapshots__/index.spec.ts.snap    |  4 +---
 .../__tests__/transforms/transformStyle.spec.ts   | 15 ++++-----------
 4 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 60b0daacdeb..f3ff07346b6 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -58,7 +58,8 @@ import {
   isCoreComponent,
   isBindKey,
   findDir,
-  isStaticExp
+  isStaticExp,
+  isConstantExp
 } from '../utils'
 import { buildSlots } from './vSlot'
 import { getConstantType } from './hoistStatic'
@@ -831,16 +832,17 @@ function doNormalize(
   if (shouldNormalizeClass || shouldNormalizeStyle) {
     for (let i = 0; i < properties.length; i++) {
       const p = properties[i]
+      const key = p.key
       if (
-        p.key.type !== NodeTypes.SIMPLE_EXPRESSION ||
-        (p.key.content !== 'class' && p.key.content !== 'style')
+        !isStaticExp(key) ||
+        (key.content !== 'class' && key.content !== 'style')
       )
         continue
 
       // wrap with normalizeClass/normalizeStyle
       let helperToUse = null
       if (
-        p.key.content === 'class' &&
+        key.content === 'class' &&
         (hasClassBinding ||
           // class may bind a constant and be skipped during patchFlag analysis,
           // but it should still be normalized
@@ -849,8 +851,8 @@ function doNormalize(
       ) {
         helperToUse = NORMALIZE_CLASS
       } else if (
-        p.key.content === 'style' &&
-        (hasClassBinding || !isStaticExp(p.value))
+        key.content === 'style' &&
+        ((hasClassBinding || !isStaticExp(p.value)) && !isConstantExp(p.value))
       ) {
         helperToUse = NORMALIZE_STYLE
       }
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index 6cbdd6f7874..509ebd0a8ea 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -41,6 +41,8 @@ import { PropsExpression } from './transforms/transformElement'
 
 export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
   p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic
+export const isConstantExp = (p: JSChildNode): p is SimpleExpressionNode =>
+  p.type === NodeTypes.SIMPLE_EXPRESSION && p.constType > 0
 
 export const isBuiltInType = (tag: string, expected: string): boolean =>
   tag === expected || tag === hyphenate(expected)
diff --git a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
index d68e3bb328f..ea013174f25 100644
--- a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
@@ -13,9 +13,7 @@ return function render(_ctx, _cache) {
       }, null, 8 /* PROPS */, [\\"textContent\\"]),
       _createElementVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
       _createElementVNode(\\"div\\", null, \\"test\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */),
-      _createElementVNode(\\"div\\", {
-        style: _normalizeStyle({\\"color\\":\\"red\\"})
-      }, \\"red\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */),
+      _createElementVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */),
       _createElementVNode(\\"div\\", {
         style: _normalizeStyle({color: 'green'})
       }, null, 4 /* STYLE */)
diff --git a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
index 5aedd9f1110..6eee9f8ba38 100644
--- a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
@@ -4,8 +4,7 @@ import {
   CompilerOptions,
   ElementNode,
   NodeTypes,
-  VNodeCall,
-  NORMALIZE_STYLE
+  VNodeCall
 } from '@vue/compiler-core'
 import { transformBind } from '../../../compiler-core/src/transforms/vBind'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
@@ -62,15 +61,9 @@ describe('compiler: style transform', () => {
             isStatic: true
           },
           value: {
-            type: NodeTypes.JS_CALL_EXPRESSION,
-            callee: NORMALIZE_STYLE,
-            arguments: [
-              {
-                type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `{"color":"red"}`,
-                isStatic: false
-              }
-            ]
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `{"color":"red"}`,
+            isStatic: false
           }
         }
       ]

From e2d0b8c75ba33b4e326a7b110024753ceb0ae77f Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Wed, 3 Mar 2021 18:05:08 +0800
Subject: [PATCH 06/15] feat: simplify implementation

---
 .../__snapshots__/vModel.spec.ts.snap         |  12 +-
 .../transforms/transformElement.spec.ts       | 126 ++++-------
 .../__tests__/transforms/vBind.spec.ts        |  72 ++++--
 .../__tests__/transforms/vIf.spec.ts          |  36 +--
 .../__tests__/transforms/vModel.spec.ts       | 156 +++++++------
 packages/compiler-core/src/runtimeHelpers.ts  |   8 -
 .../src/transforms/hoistStatic.ts             |   4 -
 .../src/transforms/transformElement.ts        | 206 ++++--------------
 packages/compiler-core/src/utils.ts           |  21 +-
 .../__snapshots__/vModel.spec.ts.snap         |   6 +-
 packages/runtime-core/src/index.ts            |   4 +-
 packages/shared/src/normalizeProp.ts          |  17 --
 12 files changed, 252 insertions(+), 416 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index 0224412ece4..877561f9531 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -91,13 +91,13 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform v-model with dynamic argument (with prefixIdentifiers) 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"input\\", {
+  return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
     [_ctx.value]: _ctx.model,
     [\\"onUpdate:\\" + _ctx.value]: $event => (_ctx.model = $event)
-  }, null, 16 /* FULL_PROPS */))
+  }), null, 16 /* FULL_PROPS */))
 }"
 `;
 
@@ -106,12 +106,12 @@ exports[`compiler: transform v-model with dynamic argument 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { normalizeProps: _normalizeProps, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
       [value]: model,
       [\\"onUpdate:\\" + value]: $event => (model = $event)
-    }, null, 16 /* FULL_PROPS */))
+    }), null, 16 /* FULL_PROPS */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index a5c5e866085..40ff62a99fa 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -21,7 +21,6 @@ import {
   NORMALIZE_CLASS,
   NORMALIZE_STYLE,
   NORMALIZE_PROPS,
-  NORMALIZE_PROPS_FOR_STYLE,
   GUARD_REACTIVE_PROPS
 } from '../../src/runtimeHelpers'
 import {
@@ -190,24 +189,17 @@ describe('compiler: element transform', () => {
       `<div id="foo" v-bind="obj" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
-    expect(root.helpers).toContain(NORMALIZE_PROPS)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: NORMALIZE_PROPS,
+      callee: MERGE_PROPS,
       arguments: [
+        createObjectMatcher({
+          id: 'foo'
+        }),
         {
-          type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: MERGE_PROPS,
-          arguments: [
-            createObjectMatcher({
-              id: 'foo'
-            }),
-            {
-              type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
-            }
-          ]
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: `obj`
         }
       ]
     })
@@ -218,25 +210,18 @@ describe('compiler: element transform', () => {
       `<div v-bind="obj" id="foo" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
-    expect(root.helpers).toContain(NORMALIZE_PROPS)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: NORMALIZE_PROPS,
+      callee: MERGE_PROPS,
       arguments: [
         {
-          type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: MERGE_PROPS,
-          arguments: [
-            {
-              type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
-            },
-            createObjectMatcher({
-              id: 'foo'
-            })
-          ]
-        }
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: `obj`
+        },
+        createObjectMatcher({
+          id: 'foo'
+        })
       ]
     })
   })
@@ -246,28 +231,21 @@ describe('compiler: element transform', () => {
       `<div id="foo" v-bind="obj" class="bar" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
-    expect(root.helpers).toContain(NORMALIZE_PROPS_FOR_STYLE)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: NORMALIZE_PROPS_FOR_STYLE,
+      callee: MERGE_PROPS,
       arguments: [
+        createObjectMatcher({
+          id: 'foo'
+        }),
         {
-          type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: MERGE_PROPS,
-          arguments: [
-            createObjectMatcher({
-              id: 'foo'
-            }),
-            {
-              type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
-            },
-            createObjectMatcher({
-              class: 'bar'
-            })
-          ]
-        }
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: `obj`
+        },
+        createObjectMatcher({
+          class: 'bar'
+        })
       ]
     })
   })
@@ -277,34 +255,27 @@ describe('compiler: element transform', () => {
       `<div id="foo" v-on="obj" class="bar" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
-    expect(root.helpers).toContain(NORMALIZE_PROPS_FOR_STYLE)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: NORMALIZE_PROPS_FOR_STYLE,
+      callee: MERGE_PROPS,
       arguments: [
+        createObjectMatcher({
+          id: 'foo'
+        }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: MERGE_PROPS,
+          callee: TO_HANDLERS,
           arguments: [
-            createObjectMatcher({
-              id: 'foo'
-            }),
             {
-              type: NodeTypes.JS_CALL_EXPRESSION,
-              callee: TO_HANDLERS,
-              arguments: [
-                {
-                  type: NodeTypes.SIMPLE_EXPRESSION,
-                  content: `obj`
-                }
-              ]
-            },
-            createObjectMatcher({
-              class: 'bar'
-            })
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: `obj`
+            }
           ]
-        }
+        },
+        createObjectMatcher({
+          class: 'bar'
+        })
       ]
     })
   })
@@ -314,34 +285,27 @@ describe('compiler: element transform', () => {
       `<div id="foo" v-on="handlers" v-bind="obj" />`
     )
     expect(root.helpers).toContain(MERGE_PROPS)
-    expect(root.helpers).toContain(NORMALIZE_PROPS)
 
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: NORMALIZE_PROPS,
+      callee: MERGE_PROPS,
       arguments: [
+        createObjectMatcher({
+          id: 'foo'
+        }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: MERGE_PROPS,
+          callee: TO_HANDLERS,
           arguments: [
-            createObjectMatcher({
-              id: 'foo'
-            }),
-            {
-              type: NodeTypes.JS_CALL_EXPRESSION,
-              callee: TO_HANDLERS,
-              arguments: [
-                {
-                  type: NodeTypes.SIMPLE_EXPRESSION,
-                  content: `handlers`
-                }
-              ]
-            },
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
+              content: `handlers`
             }
           ]
+        },
+        {
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: `obj`
         }
       ]
     })
diff --git a/packages/compiler-core/__tests__/transforms/vBind.spec.ts b/packages/compiler-core/__tests__/transforms/vBind.spec.ts
index aec02647ca7..287be477bb3 100644
--- a/packages/compiler-core/__tests__/transforms/vBind.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vBind.spec.ts
@@ -5,11 +5,17 @@ import {
   ObjectExpression,
   CompilerOptions,
   ErrorCodes,
-  VNodeCall
+  VNodeCall,
+  NodeTypes,
+  CallExpression
 } from '../../src'
 import { transformBind } from '../../src/transforms/vBind'
 import { transformElement } from '../../src/transforms/transformElement'
-import { CAMELIZE, helperNameMap } from '../../src/runtimeHelpers'
+import {
+  CAMELIZE,
+  helperNameMap,
+  NORMALIZE_PROPS
+} from '../../src/runtimeHelpers'
 import { transformExpression } from '../../src/transforms/transformExpression'
 
 function parseWithVBind(
@@ -68,16 +74,27 @@ describe('compiler: transform v-bind', () => {
 
   test('dynamic arg', () => {
     const node = parseWithVBind(`<div v-bind:[id]="id"/>`)
-    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
-    expect(props.properties[0]).toMatchObject({
-      key: {
-        content: `id || ""`,
-        isStatic: false
-      },
-      value: {
-        content: `id`,
-        isStatic: false
-      }
+    const props = (node.codegenNode as VNodeCall).props as CallExpression
+    expect(props).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: NORMALIZE_PROPS,
+      arguments: [
+        {
+          type: NodeTypes.JS_OBJECT_EXPRESSION,
+          properties: [
+            {
+              key: {
+                content: `id || ""`,
+                isStatic: false
+              },
+              value: {
+                content: `id`,
+                isStatic: false
+              }
+            }
+          ]
+        }
+      ]
     })
   })
 
@@ -127,16 +144,27 @@ describe('compiler: transform v-bind', () => {
 
   test('.camel modifier w/ dynamic arg', () => {
     const node = parseWithVBind(`<div v-bind:[foo].camel="id"/>`)
-    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
-    expect(props.properties[0]).toMatchObject({
-      key: {
-        content: `_${helperNameMap[CAMELIZE]}(foo || "")`,
-        isStatic: false
-      },
-      value: {
-        content: `id`,
-        isStatic: false
-      }
+    const props = (node.codegenNode as VNodeCall).props as CallExpression
+    expect(props).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: NORMALIZE_PROPS,
+      arguments: [
+        {
+          type: NodeTypes.JS_OBJECT_EXPRESSION,
+          properties: [
+            {
+              key: {
+                content: `_${helperNameMap[CAMELIZE]}(foo || "")`,
+                isStatic: false
+              },
+              value: {
+                content: `id`,
+                isStatic: false
+              }
+            }
+          ]
+        }
+      ]
     })
   })
 
diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
index 5d0371a738a..dcf8d186001 100644
--- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
@@ -575,19 +575,13 @@ describe('compiler: v-if', () => {
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: NORMALIZE_PROPS,
+        callee: MERGE_PROPS,
         arguments: [
-          {
-            type: NodeTypes.JS_CALL_EXPRESSION,
-            callee: MERGE_PROPS,
-            arguments: [
-              createObjectMatcher({
-                key: '[0]',
-                id: 'foo'
-              }),
-              { content: `obj` }
-            ]
-          }
+          createObjectMatcher({
+            key: '[0]',
+            id: 'foo'
+          }),
+          { content: `obj` }
         ]
       })
     })
@@ -599,19 +593,13 @@ describe('compiler: v-if', () => {
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: NORMALIZE_PROPS,
+        callee: MERGE_PROPS,
         arguments: [
-          {
-            type: NodeTypes.JS_CALL_EXPRESSION,
-            callee: MERGE_PROPS,
-            arguments: [
-              createObjectMatcher({ key: `[0]` }),
-              { content: `obj` },
-              createObjectMatcher({
-                id: 'foo'
-              })
-            ]
-          }
+          createObjectMatcher({ key: `[0]` }),
+          { content: `obj` },
+          createObjectMatcher({
+            id: 'foo'
+          })
         ]
       })
     })
diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
index 3c429b31915..8acaa493e2c 100644
--- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
@@ -9,7 +9,8 @@ import {
   PlainElementNode,
   ComponentNode,
   NodeTypes,
-  VNodeCall
+  VNodeCall,
+  NORMALIZE_PROPS
 } from '../../src'
 import { ErrorCodes } from '../../src/errors'
 import { transformModel } from '../../src/transforms/vModel'
@@ -17,6 +18,7 @@ import { transformElement } from '../../src/transforms/transformElement'
 import { transformExpression } from '../../src/transforms/transformExpression'
 import { transformFor } from '../../src/transforms/vFor'
 import { trackSlotScopes } from '../../src/transforms/vSlot'
+import { CallExpression } from '@babel/types'
 
 function parseWithVModel(template: string, options: CompilerOptions = {}) {
   const ast = parse(template)
@@ -288,40 +290,50 @@ describe('compiler: transform v-model', () => {
   test('with dynamic argument', () => {
     const root = parseWithVModel('<input v-model:[value]="model" />')
     const node = root.children[0] as ElementNode
-    const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
-      .properties
+    const props = ((node.codegenNode as VNodeCall)
+      .props as unknown) as CallExpression
 
-    expect(props[0]).toMatchObject({
-      key: {
-        content: 'value',
-        isStatic: false
-      },
-      value: {
-        content: 'model',
-        isStatic: false
-      }
-    })
-
-    expect(props[1]).toMatchObject({
-      key: {
-        children: [
-          '"onUpdate:" + ',
-          {
-            content: 'value',
-            isStatic: false
-          }
-        ]
-      },
-      value: {
-        children: [
-          '$event => (',
-          {
-            content: 'model',
-            isStatic: false
-          },
-          ' = $event)'
-        ]
-      }
+    expect(props).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: NORMALIZE_PROPS,
+      arguments: [
+        {
+          type: NodeTypes.JS_OBJECT_EXPRESSION,
+          properties: [
+            {
+              key: {
+                content: 'value',
+                isStatic: false
+              },
+              value: {
+                content: 'model',
+                isStatic: false
+              }
+            },
+            {
+              key: {
+                children: [
+                  '"onUpdate:" + ',
+                  {
+                    content: 'value',
+                    isStatic: false
+                  }
+                ]
+              },
+              value: {
+                children: [
+                  '$event => (',
+                  {
+                    content: 'model',
+                    isStatic: false
+                  },
+                  ' = $event)'
+                ]
+              }
+            }
+          ]
+        }
+      ]
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -332,40 +344,50 @@ describe('compiler: transform v-model', () => {
       prefixIdentifiers: true
     })
     const node = root.children[0] as ElementNode
-    const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
-      .properties
+    const props = ((node.codegenNode as VNodeCall)
+      .props as unknown) as CallExpression
 
-    expect(props[0]).toMatchObject({
-      key: {
-        content: '_ctx.value',
-        isStatic: false
-      },
-      value: {
-        content: '_ctx.model',
-        isStatic: false
-      }
-    })
-
-    expect(props[1]).toMatchObject({
-      key: {
-        children: [
-          '"onUpdate:" + ',
-          {
-            content: '_ctx.value',
-            isStatic: false
-          }
-        ]
-      },
-      value: {
-        children: [
-          '$event => (',
-          {
-            content: '_ctx.model',
-            isStatic: false
-          },
-          ' = $event)'
-        ]
-      }
+    expect(props).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: NORMALIZE_PROPS,
+      arguments: [
+        {
+          type: NodeTypes.JS_OBJECT_EXPRESSION,
+          properties: [
+            {
+              key: {
+                content: '_ctx.value',
+                isStatic: false
+              },
+              value: {
+                content: '_ctx.model',
+                isStatic: false
+              }
+            },
+            {
+              key: {
+                children: [
+                  '"onUpdate:" + ',
+                  {
+                    content: '_ctx.value',
+                    isStatic: false
+                  }
+                ]
+              },
+              value: {
+                children: [
+                  '$event => (',
+                  {
+                    content: '_ctx.model',
+                    isStatic: false
+                  },
+                  ' = $event)'
+                ]
+              }
+            }
+          ]
+        }
+      ]
     })
 
     expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index 269e270f8de..25103b8b47f 100644
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -32,12 +32,6 @@ export const MERGE_PROPS = Symbol(__DEV__ ? `mergeProps` : ``)
 export const NORMALIZE_CLASS = Symbol(__DEV__ ? `normalizeClass` : ``)
 export const NORMALIZE_STYLE = Symbol(__DEV__ ? `normalizeStyle` : ``)
 export const NORMALIZE_PROPS = Symbol(__DEV__ ? `normalizeProps` : ``)
-export const NORMALIZE_PROPS_FOR_CLASS = Symbol(
-  __DEV__ ? `normalizePropsForClass` : ``
-)
-export const NORMALIZE_PROPS_FOR_STYLE = Symbol(
-  __DEV__ ? `normalizePropsForStyle` : ``
-)
 export const GUARD_REACTIVE_PROPS = Symbol(__DEV__ ? `guardReactiveProps` : ``)
 export const TO_HANDLERS = Symbol(__DEV__ ? `toHandlers` : ``)
 export const CAMELIZE = Symbol(__DEV__ ? `camelize` : ``)
@@ -83,8 +77,6 @@ export const helperNameMap: any = {
   [NORMALIZE_CLASS]: `normalizeClass`,
   [NORMALIZE_STYLE]: `normalizeStyle`,
   [NORMALIZE_PROPS]: `normalizeProps`,
-  [NORMALIZE_PROPS_FOR_CLASS]: `normalizePropsForClass`,
-  [NORMALIZE_PROPS_FOR_STYLE]: `normalizePropsForStyle`,
   [GUARD_REACTIVE_PROPS]: `guardReactiveProps`,
   [TO_HANDLERS]: `toHandlers`,
   [CAMELIZE]: `camelize`,
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index e0829a543fc..5e76342dca6 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -25,8 +25,6 @@ import {
   GUARD_REACTIVE_PROPS,
   NORMALIZE_CLASS,
   NORMALIZE_PROPS,
-  NORMALIZE_PROPS_FOR_CLASS,
-  NORMALIZE_PROPS_FOR_STYLE,
   NORMALIZE_STYLE,
   CREATE_COMPONENT_BLOCK,
   CREATE_ELEMENT_BLOCK
@@ -292,8 +290,6 @@ const allowHoistedHelperSet = new Set([
   NORMALIZE_CLASS,
   NORMALIZE_STYLE,
   NORMALIZE_PROPS,
-  NORMALIZE_PROPS_FOR_CLASS,
-  NORMALIZE_PROPS_FOR_STYLE,
   GUARD_REACTIVE_PROPS
 ])
 
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index f3ff07346b6..857364071e6 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -42,8 +42,6 @@ import {
   NORMALIZE_CLASS,
   NORMALIZE_STYLE,
   NORMALIZE_PROPS,
-  NORMALIZE_PROPS_FOR_CLASS,
-  NORMALIZE_PROPS_FOR_STYLE,
   TO_HANDLERS,
   TELEPORT,
   KEEP_ALIVE,
@@ -58,8 +56,7 @@ import {
   isCoreComponent,
   isBindKey,
   findDir,
-  isStaticExp,
-  isConstantExp
+  isStaticExp
 } from '../utils'
 import { buildSlots } from './vSlot'
 import { getConstantType } from './hoistStatic'
@@ -448,7 +445,7 @@ export function buildProps(
         dynamicPropNames.push(name)
       }
 
-      // treat the dynamic binding class and style of the component as dynamic props
+      // treat the dynamic class and style binding of the component as dynamic props
       if (
         isComponent &&
         (name === 'class' || name === 'style') &&
@@ -697,76 +694,54 @@ export function buildProps(
   if (!context.forSSR && propsExpression) {
     switch (propsExpression.type) {
       case NodeTypes.JS_OBJECT_EXPRESSION:
-        // indicates that there is no v-bind="obj" binding
-        const helperToUse = doNormalize(
-          context,
-          propsExpression.properties,
-          hasClassBinding,
-          hasStyleBinding
-        )
-
-        if (helperToUse) {
-          propsExpression = createCallExpression(context.helper(helperToUse), [
-            propsExpression
-          ])
+        // means that there is no v-bind,
+        // but still need to deal with dynamic key binding
+        let classKeyIndex = -1
+        let styleKeyIndex = -1
+        let dynamicKeyIndex = -1
+
+        for (let i = 0; i < propsExpression.properties.length; i++) {
+          const p = propsExpression.properties[i]
+          if (p.key.type !== NodeTypes.SIMPLE_EXPRESSION) continue
+          if (!isStaticExp(p.key)) dynamicKeyIndex = i
+          if (isStaticExp(p.key) && p.key.content === 'class') classKeyIndex = i
+          if (isStaticExp(p.key) && p.key.content === 'style') styleKeyIndex = i
         }
-        break
-      case NodeTypes.JS_CALL_EXPRESSION:
-        // call of `mergeProps`
-        if (propsExpression.callee === MERGE_PROPS) {
-          let vBindIndex = -1
-          let lastObjectExpressionIndex = -1
-          const args = propsExpression.arguments as PropsExpression[]
-          // 1. find the index of v-bind and object express
-          for (let i = 0; i < propsExpression.arguments.length; i++) {
-            const arg = args[i]
-            if (
-              arg.type === NodeTypes.SIMPLE_EXPRESSION ||
-              arg.type === NodeTypes.COMPOUND_EXPRESSION
-            ) {
-              // v-bind="obj"   -->  SIMPLE_EXPRESSION
-              // v-bind="fn()"  -->  COMPOUND_EXPRESSION
-              vBindIndex = i
-            } else if (arg.type === NodeTypes.JS_OBJECT_EXPRESSION) {
-              lastObjectExpressionIndex = i
-            }
-          }
-          /**
-           * 1. <p v-bind="xx" class="xx" />
-           *    mergeProps(ExpressionNode, ObjectExpression)
-           *      - vBindIndex: 0
-           *      - objectExpressionIndex: 1
-           * 2. <p class="xx" v-bind="xx" />
-           *    mergeProps(ObjectExpression, ExpressionNode)
-           *      - vBindIndex: 1
-           *      - objectExpressionIndex: 0
-           * 3. <p class="xx" v-bind="xx" style="xx" />
-           *    mergeProps(ObjectExpression, ExpressionNode, ObjectExpression)
-           *       - vBindIndex: 1
-           *       - objectExpressionIndex: 2
-           */
-          if (vBindIndex < lastObjectExpressionIndex) {
-            const helperToUse = doNormalize(
-              context,
-              (args[lastObjectExpressionIndex] as ObjectExpression).properties,
-              hasClassBinding,
-              hasStyleBinding,
-              false
+
+        const classProp = propsExpression.properties[classKeyIndex]
+        const styleProp = propsExpression.properties[styleKeyIndex]
+
+        // no dynamic key
+        if (dynamicKeyIndex === -1) {
+          if (classProp && !isStaticExp(classProp.value)) {
+            classProp.value = createCallExpression(
+              context.helper(NORMALIZE_CLASS),
+              [classProp.value]
             )
-            if (helperToUse) {
-              propsExpression = createCallExpression(
-                context.helper(helperToUse),
-                [propsExpression]
-              )
-            }
-          } else {
-            propsExpression = createCallExpression(
-              context.helper(NORMALIZE_PROPS),
-              [propsExpression]
+          }
+          if (
+            styleProp &&
+            !isStaticExp(styleProp.value) &&
+            // the static style is compiled into an object,
+            // so use `hasStyleBinding` to ensure that it is a dynamic style binding
+            hasStyleBinding
+          ) {
+            styleProp.value = createCallExpression(
+              context.helper(NORMALIZE_STYLE),
+              [styleProp.value]
             )
           }
+        } else {
+          // dynamic key binding, wrap with `normalizeProps`
+          propsExpression = createCallExpression(
+            context.helper(NORMALIZE_PROPS),
+            [propsExpression]
+          )
         }
         break
+      case NodeTypes.JS_CALL_EXPRESSION:
+        // mergeProps call, do nothing
+        break
       default:
         // single v-bind
         propsExpression = createCallExpression(
@@ -789,99 +764,6 @@ export function buildProps(
   }
 }
 
-// normalization is only needed when the dynamic binding key is before the class and style
-// e.g. <p :[dynamic]="val" :class="cls" :style="stl" />
-function doNormalize(
-  context: TransformContext,
-  properties: Property[],
-  hasClassBinding: boolean,
-  hasStyleBinding: boolean,
-  treatAbsentAsNormalized: boolean = true
-) {
-  let classKeyIndex = -1
-  let styleKeyIndex = -1
-  let dynamicKeyIndex = -1
-
-  for (let i = 0; i < properties.length; i++) {
-    const p = properties[i]
-    if (!isStaticExp(p.key)) dynamicKeyIndex = i
-    if (isStaticExp(p.key) && p.key.content === 'class') classKeyIndex = i
-    if (isStaticExp(p.key) && p.key.content === 'style') styleKeyIndex = i
-  }
-
-  /**
-   * 1. in the case of no dynamic binding key, e.g. <p :class="cls" :style="stl" />
-   *    shouldNormalizeClass = true
-   *    shouldNormalizeStyle = true
-   * 1. in the case of <p :[id]="foo" :class="cls" :style="stl" />
-   *    shouldNormalizeClass = true
-   *    shouldNormalizeStyle = true
-   * 2. in the case of <p :class="cls" :[id]="foo" :style="stl" />
-   *    shouldNormalizeClass = false
-   *    shouldNormalizeStyle = true
-   * 3. in the case of <p :class="cls" style="stl" :[id]="foo" />
-   *    shouldNormalizeClass = false
-   *    shouldNormalizeStyle = false
-   * 4. in the case of <p />
-   *    shouldNormalizeClass = false
-   *    shouldNormalizeStyle = false
-   */
-  const shouldNormalizeClass = dynamicKeyIndex < classKeyIndex
-  const shouldNormalizeStyle = dynamicKeyIndex < styleKeyIndex
-
-  if (shouldNormalizeClass || shouldNormalizeStyle) {
-    for (let i = 0; i < properties.length; i++) {
-      const p = properties[i]
-      const key = p.key
-      if (
-        !isStaticExp(key) ||
-        (key.content !== 'class' && key.content !== 'style')
-      )
-        continue
-
-      // wrap with normalizeClass/normalizeStyle
-      let helperToUse = null
-      if (
-        key.content === 'class' &&
-        (hasClassBinding ||
-          // class may bind a constant and be skipped during patchFlag analysis,
-          // but it should still be normalized
-          // e.g. <p :class="{ bar: true }" />
-          !isStaticExp(p.value))
-      ) {
-        helperToUse = NORMALIZE_CLASS
-      } else if (
-        key.content === 'style' &&
-        ((hasClassBinding || !isStaticExp(p.value)) && !isConstantExp(p.value))
-      ) {
-        helperToUse = NORMALIZE_STYLE
-      }
-
-      p.value = helperToUse
-        ? createCallExpression(context.helper(helperToUse), [p.value])
-        : p.value
-    }
-  }
-
-  const isClassNormalized =
-    shouldNormalizeClass || (treatAbsentAsNormalized && classKeyIndex === -1)
-  const isStyleNormalized =
-    shouldNormalizeStyle || (treatAbsentAsNormalized && styleKeyIndex === -1)
-  let helperToUse = null
-  if (!isClassNormalized && !isStyleNormalized) {
-    // normalize both
-    helperToUse = NORMALIZE_PROPS
-  } else if (isClassNormalized && !isStyleNormalized) {
-    // class has been normalized, only need to normalize style
-    helperToUse = NORMALIZE_PROPS_FOR_STYLE
-  } else if (isStyleNormalized && !isClassNormalized) {
-    // style has been normalized, only need to normalize class
-    helperToUse = NORMALIZE_PROPS_FOR_CLASS
-  }
-
-  return helperToUse
-}
-
 // Dedupe props in an object literal.
 // Literal duplicated attributes would have been warned during the parse phase,
 // however, it's possible to encounter duplicated `onXXX` handlers with different
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index 509ebd0a8ea..582331853c7 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -32,8 +32,6 @@ import {
   BASE_TRANSITION,
   TO_HANDLERS,
   NORMALIZE_PROPS,
-  NORMALIZE_PROPS_FOR_CLASS,
-  NORMALIZE_PROPS_FOR_STYLE,
   GUARD_REACTIVE_PROPS
 } from './runtimeHelpers'
 import { isString, isObject, hyphenate, extend } from '@vue/shared'
@@ -41,8 +39,6 @@ import { PropsExpression } from './transforms/transformElement'
 
 export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
   p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic
-export const isConstantExp = (p: JSChildNode): p is SimpleExpressionNode =>
-  p.type === NodeTypes.SIMPLE_EXPRESSION && p.constType > 0
 
 export const isBuiltInType = (tag: string, expected: string): boolean =>
   tag === expected || tag === hyphenate(expected)
@@ -222,12 +218,7 @@ export function isSlotOutlet(
   return node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
 }
 
-const propsHelperSet = new Set([
-  NORMALIZE_PROPS,
-  NORMALIZE_PROPS_FOR_CLASS,
-  NORMALIZE_PROPS_FOR_STYLE,
-  GUARD_REACTIVE_PROPS
-])
+const propsHelperSet = new Set([NORMALIZE_PROPS, GUARD_REACTIVE_PROPS])
 
 function getUnnormalizedProps(
   props: PropsExpression | '{}',
@@ -262,16 +253,8 @@ export function injectProp(
    * 2. toHandlers(...)
    *
    * 3. normalizeProps(...)
-   * 4. normalizeProps(mergeProps(...))
-   *
-   * 5. normalizePropsForClass(...)
-   * 6. normalizePropsForClass(mergeProps(...))
-   *
-   * 7. normalizePropsForStyle(...)
-   * 8. normalizePropsForStyle(mergeProps(...))
    *
-   * 9. guardReactiveProps(...)
-   * 10. normalizeProps(guardReactiveProps(...))
+   * 4. normalizeProps(guardReactiveProps(...))
    *
    * we need to get the real props before normalization
    */
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index 3d1205fc3ef..f92b6768515 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -21,11 +21,11 @@ exports[`compiler: transform v-model input w/ dynamic v-bind 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, normalizeProps: _normalizeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _normalizeProps(_mergeProps(obj, {
+    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _mergeProps(obj, {
       \\"onUpdate:modelValue\\": $event => (model = $event)
-    })), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
+    }), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
       [_vModelDynamic, model]
     ])
   }
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 762f80f73c2..e979e1488ad 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -259,9 +259,7 @@ export {
   toHandlerKey,
   normalizeProps,
   normalizeClass,
-  normalizeStyle,
-  normalizePropsForStyle,
-  normalizePropsForClass
+  normalizeStyle
 } from '@vue/shared'
 
 // For test-utils
diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index 6fe8489df15..9cedafe30f0 100644
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -88,20 +88,3 @@ export function normalizeProps(props: Record<string, any> | null) {
   }
   return props
 }
-
-export function normalizePropsForStyle(props: Record<string, any> | null) {
-  if (!props) return null
-  if (props.style) {
-    props.style = normalizeStyle(props.style)
-  }
-  return props
-}
-
-export function normalizePropsForClass(props: Record<string, any> | null) {
-  if (!props) return null
-  const { class: klass } = props
-  if (klass && !isString(klass)) {
-    props.class = normalizeClass(klass)
-  }
-  return props
-}

From c2ab22fef7854e4497104a0d7b899b199f4cb246 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Tue, 9 Mar 2021 15:23:41 +0800
Subject: [PATCH 07/15] chore: fix snapshots

---
 .../__tests__/__snapshots__/scopeId.spec.ts.snap              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index bea3954a0f2..0b4a741c567 100644
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -9,7 +9,7 @@ const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\"
 const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
 _popScopeId(null)
 
-export function render(_ctx, _cache) => {
+export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"div\\", null, [
     _hoisted_1,
     _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
@@ -78,5 +78,5 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
     ]),
     _: 1 /* STABLE */
   }))
-})"
+}"
 `;

From c632d90261359a5e9c80bf0c918e34ca1d815871 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Sun, 28 Mar 2021 10:25:32 +0800
Subject: [PATCH 08/15] chore: resolve conflicts

---
 .../__tests__/__snapshots__/compile.spec.ts.snap |  6 +++---
 .../__tests__/__snapshots__/scopeId.spec.ts.snap | 14 +++++++-------
 .../__snapshots__/hoistStatic.spec.ts.snap       | 10 +++++-----
 .../transforms/__snapshots__/vOnce.spec.ts.snap  |  2 +-
 .../transforms/__snapshots__/vSlot.spec.ts.snap  |  4 ++--
 packages/compiler-core/src/codegen.ts            |  1 -
 .../compiler-core/src/transforms/hoistStatic.ts  |  2 +-
 packages/compiler-core/src/transforms/vFor.ts    | 16 ++++++++++++++--
 8 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
index f77a9a4bce2..8c252597555 100644
--- a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`compiler: integration tests function mode 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, normalizeClass: _normalizeClass } = _Vue
+    const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = _Vue
 
     return (_openBlock(), _createElementBlock(\\"div\\", {
       id: \\"foo\\",
@@ -28,7 +28,7 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 1`] = `
-"const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, normalizeClass: _normalizeClass } = Vue
+"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = Vue
 
 return function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"div\\", {
@@ -51,7 +51,7 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: integration tests module mode 1`] = `
-"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, normalizeClass as _normalizeClass } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from \\"vue\\"
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"div\\", {
diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index 0b4a741c567..1881a532f11 100644
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -7,19 +7,19 @@ const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 _pushScopeId(\\"test\\")
 const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
 const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-_popScopeId(null)
+_popScopeId()
 
-export function render(_ctx, _cache) {
+export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(\\"div\\", null, [
     _hoisted_1,
     _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
     _hoisted_2
   ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
-}"
+})"
 `;
 
 exports[`scopeId compiler support should wrap default slot 1`] = `
-"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createComponentVNode as _createComponentVNode, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
@@ -35,7 +35,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
 `;
 
 exports[`scopeId compiler support should wrap dynamic slots 1`] = `
-"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, createComponentVNode as _createComponentVNode, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
@@ -63,7 +63,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
 `;
 
 exports[`scopeId compiler support should wrap named slots 1`] = `
-"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createComponentVNode as _createComponentVNode, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
@@ -78,5 +78,5 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
     ]),
     _: 1 /* STABLE */
   }))
-}"
+})"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
index 415c1fce1ca..da16adc95e6 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
@@ -132,7 +132,7 @@ return function render(_ctx, _cache) {
 
 exports[`compiler: hoistStatic transform hoist static props for elements with unhoistable children 1`] = `
 "const _Vue = Vue
-const { createElementVNode: _createElementVNode, createComponentVNode: _createComponentVNode } = _Vue
+const { createElementVNode: _createElementVNode } = _Vue
 
 const _hoisted_1 = { id: \\"foo\\" }
 
@@ -241,7 +241,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
@@ -278,7 +278,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist keye
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
@@ -294,7 +294,7 @@ exports[`compiler: hoistStatic transform should NOT hoist components 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
@@ -310,7 +310,7 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic k
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       (_openBlock(), _createElementBlock(\\"div\\", { key: foo }))
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index e717b9aaf9a..85cbdf4a99c 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -22,7 +22,7 @@ exports[`compiler: v-once transform on component 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
index ae0158c05e5..2eb14e357b7 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -15,7 +15,7 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots implicit default slot 1`] = `
-"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
@@ -118,7 +118,7 @@ exports[`compiler: transform component slots named slots w/ implicit default slo
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
+    const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 0f522cc762d..1d196cdd332 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -362,7 +362,6 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
         const staticHelpers = [
           CREATE_VNODE,
           CREATE_ELEMENT_VNODE,
-          CREATE_COMPONENT_VNODE,
           CREATE_COMMENT,
           CREATE_TEXT,
           CREATE_STATIC
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index 5e76342dca6..76ef7bb90ad 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -228,7 +228,7 @@ export function getConstantType(
         if (codegenNode.isBlock) {
           context.removeHelper(OPEN_BLOCK)
           context.removeHelper(
-            context.ssr
+            context.forSSR
               ? CREATE_BLOCK
               : codegenNode.isComponent
                 ? CREATE_COMPONENT_BLOCK
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index 33d9828f0e9..f1b68535c08 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -191,10 +191,22 @@ export const transformFor = createStructuralDirectiveTransform(
             if (childBlock.isBlock) {
               // switch from block to vnode
               removeHelper(OPEN_BLOCK)
-              removeHelper(CREATE_BLOCK)
+              removeHelper(
+                context.forSSR
+                  ? CREATE_BLOCK
+                  : childBlock.isComponent
+                    ? CREATE_COMPONENT_BLOCK
+                    : CREATE_ELEMENT_BLOCK
+              )
             } else {
               // switch from vnode to block
-              removeHelper(CREATE_VNODE)
+              removeHelper(
+                context.forSSR
+                  ? CREATE_VNODE
+                  : childBlock.isComponent
+                    ? CREATE_COMPONENT_VNODE
+                    : CREATE_ELEMENT_VNODE
+              )
             }
           }
           childBlock.isBlock = !isStableFragment

From 0df05f417fed1c6628a096e5e9bfe392b7b4ef6b Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Sun, 28 Mar 2021 11:38:36 +0800
Subject: [PATCH 09/15] refactor: use getVNodeHelper and getVNodeBlockHelper

---
 packages/compiler-core/src/ast.ts             | 25 ++---------
 packages/compiler-core/src/codegen.ts         | 21 +++------
 packages/compiler-core/src/transform.ts       | 26 ++---------
 .../src/transforms/hoistStatic.ts             | 22 ++--------
 packages/compiler-core/src/transforms/vFor.ts | 44 ++++---------------
 packages/compiler-core/src/transforms/vIf.ts  | 33 +++++---------
 packages/compiler-core/src/utils.ts           | 26 +++++++++--
 7 files changed, 60 insertions(+), 137 deletions(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index 7e97919f419..efdb7f2362f 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -6,16 +6,11 @@ import {
   RENDER_LIST,
   OPEN_BLOCK,
   FRAGMENT,
-  WITH_DIRECTIVES,
-  CREATE_COMPONENT_VNODE,
-  CREATE_ELEMENT_VNODE,
-  CREATE_COMPONENT_BLOCK,
-  CREATE_ELEMENT_BLOCK,
-  CREATE_BLOCK,
-  CREATE_VNODE
+  WITH_DIRECTIVES
 } from './runtimeHelpers'
 import { PropsExpression } from './transforms/transformElement'
 import { ImportItem, TransformContext } from './transform'
+import { getVNodeBlockHelper, getVNodeHelper } from './utils'
 
 // Vue template is a platform-agnostic superset of HTML (syntax only).
 // More namespaces like SVG and MathML are declared by platform specific
@@ -573,21 +568,9 @@ export function createVNodeCall(
   if (context) {
     if (isBlock) {
       context.helper(OPEN_BLOCK)
-      context.helper(
-        context.forSSR
-          ? CREATE_BLOCK
-          : isComponent
-            ? CREATE_COMPONENT_BLOCK
-            : CREATE_ELEMENT_BLOCK
-      )
+      context.helper(getVNodeBlockHelper(context.forSSR, isComponent))
     } else {
-      context.helper(
-        context.forSSR
-          ? CREATE_VNODE
-          : isComponent
-            ? CREATE_COMPONENT_VNODE
-            : CREATE_ELEMENT_VNODE
-      )
+      context.helper(getVNodeHelper(context.forSSR, isComponent))
     }
     if (directives) {
       context.helper(WITH_DIRECTIVES)
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 1d196cdd332..63335d42a3f 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -30,6 +30,8 @@ import { SourceMapGenerator, RawSourceMap } from 'source-map'
 import {
   advancePositionWithMutation,
   assert,
+  getVNodeBlockHelper,
+  getVNodeHelper,
   isSimpleIdentifier,
   toValidAssetId
 } from './utils'
@@ -47,15 +49,11 @@ import {
   POP_SCOPE_ID,
   WITH_SCOPE_ID,
   WITH_DIRECTIVES,
-  CREATE_ELEMENT_BLOCK,
-  CREATE_COMPONENT_BLOCK,
   CREATE_ELEMENT_VNODE,
-  CREATE_COMPONENT_VNODE,
   OPEN_BLOCK,
   CREATE_STATIC,
   WITH_CTX,
-  RESOLVE_FILTER,
-  CREATE_BLOCK
+  RESOLVE_FILTER
 } from './runtimeHelpers'
 import { ImportItem } from './transform'
 
@@ -774,16 +772,9 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
   if (pure) {
     push(PURE_ANNOTATION)
   }
-  let callHelper: symbol = isBlock ? CREATE_BLOCK : CREATE_VNODE
-  if (!context.forSSR) {
-    callHelper = isBlock
-      ? isComponent
-        ? CREATE_COMPONENT_BLOCK
-        : CREATE_ELEMENT_BLOCK
-      : isComponent
-        ? CREATE_COMPONENT_VNODE
-        : CREATE_ELEMENT_VNODE
-  }
+  const callHelper: symbol = isBlock
+    ? getVNodeBlockHelper(context.forSSR, isComponent)
+    : getVNodeHelper(context.forSSR, isComponent)
   push(helper(callHelper) + `(`, node)
   genNodeList(
     genNullableArgs([
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 8baedb32d47..775dc8ec240 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -36,15 +36,9 @@ import {
   FRAGMENT,
   helperNameMap,
   CREATE_COMMENT,
-  OPEN_BLOCK,
-  CREATE_ELEMENT_BLOCK,
-  CREATE_COMPONENT_BLOCK,
-  CREATE_BLOCK,
-  CREATE_VNODE,
-  CREATE_COMPONENT_VNODE,
-  CREATE_ELEMENT_VNODE
+  OPEN_BLOCK
 } from './runtimeHelpers'
-import { isVSlot } from './utils'
+import { getVNodeBlockHelper, getVNodeHelper, isVSlot } from './utils'
 import { hoistStatic, isSingleElementRoot } from './transforms/hoistStatic'
 import { CompilerCompatOptions } from './compat/compatConfig'
 
@@ -355,21 +349,9 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
       if (codegenNode.type === NodeTypes.VNODE_CALL) {
         if (!codegenNode.isBlock) {
           codegenNode.isBlock = true
-          removeHelper(
-            context.forSSR
-              ? CREATE_VNODE
-              : codegenNode.isComponent
-                ? CREATE_COMPONENT_VNODE
-                : CREATE_ELEMENT_VNODE
-          )
+          removeHelper(getVNodeHelper(context.forSSR, codegenNode.isComponent))
           helper(OPEN_BLOCK)
-          helper(
-            context.forSSR
-              ? CREATE_BLOCK
-              : codegenNode.isComponent
-                ? CREATE_COMPONENT_BLOCK
-                : CREATE_ELEMENT_BLOCK
-          )
+          helper(getVNodeBlockHelper(context.forSSR, codegenNode.isComponent))
         }
       }
       root.codegenNode = codegenNode
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index 76ef7bb90ad..d683ef3c544 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -15,19 +15,13 @@ import {
 } from '../ast'
 import { TransformContext } from '../transform'
 import { PatchFlags, isString, isSymbol } from '@vue/shared'
-import { isSlotOutlet } from '../utils'
+import { getVNodeBlockHelper, getVNodeHelper, isSlotOutlet } from '../utils'
 import {
   OPEN_BLOCK,
-  CREATE_BLOCK,
-  CREATE_COMPONENT_VNODE,
-  CREATE_ELEMENT_VNODE,
-  CREATE_VNODE,
   GUARD_REACTIVE_PROPS,
   NORMALIZE_CLASS,
   NORMALIZE_PROPS,
-  NORMALIZE_STYLE,
-  CREATE_COMPONENT_BLOCK,
-  CREATE_ELEMENT_BLOCK
+  NORMALIZE_STYLE
 } from '../runtimeHelpers'
 
 export function hoistStatic(root: RootNode, context: TransformContext) {
@@ -228,19 +222,11 @@ export function getConstantType(
         if (codegenNode.isBlock) {
           context.removeHelper(OPEN_BLOCK)
           context.removeHelper(
-            context.forSSR
-              ? CREATE_BLOCK
-              : codegenNode.isComponent
-                ? CREATE_COMPONENT_BLOCK
-                : CREATE_ELEMENT_BLOCK
+            getVNodeBlockHelper(context.forSSR, codegenNode.isComponent)
           )
           codegenNode.isBlock = false
           context.helper(
-            context.forSSR
-              ? CREATE_VNODE
-              : codegenNode.isComponent
-                ? CREATE_COMPONENT_VNODE
-                : CREATE_ELEMENT_VNODE
+            getVNodeHelper(context.forSSR, codegenNode.isComponent)
           )
         }
 
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index f1b68535c08..6952d457937 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -32,19 +32,11 @@ import {
   findProp,
   isTemplateNode,
   isSlotOutlet,
-  injectProp
+  injectProp,
+  getVNodeBlockHelper,
+  getVNodeHelper
 } from '../utils'
-import {
-  RENDER_LIST,
-  OPEN_BLOCK,
-  FRAGMENT,
-  CREATE_COMPONENT_BLOCK,
-  CREATE_ELEMENT_BLOCK,
-  CREATE_COMPONENT_VNODE,
-  CREATE_ELEMENT_VNODE,
-  CREATE_BLOCK,
-  CREATE_VNODE
-} from '../runtimeHelpers'
+import { RENDER_LIST, OPEN_BLOCK, FRAGMENT } from '../runtimeHelpers'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
 import {
@@ -192,41 +184,21 @@ export const transformFor = createStructuralDirectiveTransform(
               // switch from block to vnode
               removeHelper(OPEN_BLOCK)
               removeHelper(
-                context.forSSR
-                  ? CREATE_BLOCK
-                  : childBlock.isComponent
-                    ? CREATE_COMPONENT_BLOCK
-                    : CREATE_ELEMENT_BLOCK
+                getVNodeBlockHelper(context.forSSR, childBlock.isComponent)
               )
             } else {
               // switch from vnode to block
               removeHelper(
-                context.forSSR
-                  ? CREATE_VNODE
-                  : childBlock.isComponent
-                    ? CREATE_COMPONENT_VNODE
-                    : CREATE_ELEMENT_VNODE
+                getVNodeHelper(context.forSSR, childBlock.isComponent)
               )
             }
           }
           childBlock.isBlock = !isStableFragment
           if (childBlock.isBlock) {
             helper(OPEN_BLOCK)
-            helper(
-              context.forSSR
-                ? CREATE_BLOCK
-                : childBlock.isComponent
-                  ? CREATE_COMPONENT_BLOCK
-                  : CREATE_ELEMENT_BLOCK
-            )
+            helper(getVNodeBlockHelper(context.forSSR, childBlock.isComponent))
           } else {
-            helper(
-              context.forSSR
-                ? CREATE_VNODE
-                : childBlock.isComponent
-                  ? CREATE_COMPONENT_VNODE
-                  : CREATE_ELEMENT_VNODE
-            )
+            helper(getVNodeHelper(context.forSSR, childBlock.isComponent))
           }
         }
 
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index bb9d1b67eca..252a7940632 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -30,15 +30,16 @@ import { validateBrowserExpression } from '../validateExpression'
 import {
   FRAGMENT,
   CREATE_COMMENT,
-  OPEN_BLOCK,
-  CREATE_VNODE,
-  CREATE_COMPONENT_BLOCK,
-  CREATE_ELEMENT_BLOCK,
-  CREATE_BLOCK,
-  CREATE_COMPONENT_VNODE,
-  CREATE_ELEMENT_VNODE
+  OPEN_BLOCK
 } from '../runtimeHelpers'
-import { injectProp, findDir, findProp, isBuiltInType } from '../utils'
+import {
+  injectProp,
+  findDir,
+  findProp,
+  isBuiltInType,
+  getVNodeHelper,
+  getVNodeBlockHelper
+} from '../utils'
 import {
   PatchFlags,
   PatchFlagNames,
@@ -300,22 +301,10 @@ function createChildrenCodegenNode(
       .codegenNode as BlockCodegenNode
     // Change createVNode to createBlock.
     if (vnodeCall.type === NodeTypes.VNODE_CALL && !vnodeCall.isBlock) {
-      removeHelper(
-        context.forSSR
-          ? CREATE_VNODE
-          : vnodeCall.isComponent
-            ? CREATE_COMPONENT_VNODE
-            : CREATE_ELEMENT_VNODE
-      )
+      removeHelper(getVNodeHelper(context.forSSR, vnodeCall.isComponent))
       vnodeCall.isBlock = true
       helper(OPEN_BLOCK)
-      helper(
-        context.forSSR
-          ? CREATE_BLOCK
-          : vnodeCall.isComponent
-            ? CREATE_COMPONENT_BLOCK
-            : CREATE_ELEMENT_BLOCK
-      )
+      helper(getVNodeBlockHelper(context.forSSR, vnodeCall.isComponent))
     }
     // inject branch key
     injectProp(vnodeCall, keyProperty, context)
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index 582331853c7..a5c3ca37fd8 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -32,7 +32,13 @@ import {
   BASE_TRANSITION,
   TO_HANDLERS,
   NORMALIZE_PROPS,
-  GUARD_REACTIVE_PROPS
+  GUARD_REACTIVE_PROPS,
+  CREATE_BLOCK,
+  CREATE_COMPONENT_BLOCK,
+  CREATE_ELEMENT_BLOCK,
+  CREATE_VNODE,
+  CREATE_COMPONENT_VNODE,
+  CREATE_ELEMENT_VNODE
 } from './runtimeHelpers'
 import { isString, isObject, hyphenate, extend } from '@vue/shared'
 import { PropsExpression } from './transforms/transformElement'
@@ -218,6 +224,22 @@ export function isSlotOutlet(
   return node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
 }
 
+export function getVNodeHelper(ssr: boolean, isComponent: boolean) {
+  return ssr
+    ? CREATE_VNODE
+    : isComponent
+      ? CREATE_COMPONENT_VNODE
+      : CREATE_ELEMENT_VNODE
+}
+
+export function getVNodeBlockHelper(ssr: boolean, isComponent: boolean) {
+  return ssr
+    ? CREATE_BLOCK
+    : isComponent
+      ? CREATE_COMPONENT_BLOCK
+      : CREATE_ELEMENT_BLOCK
+}
+
 const propsHelperSet = new Set([NORMALIZE_PROPS, GUARD_REACTIVE_PROPS])
 
 function getUnnormalizedProps(
@@ -251,9 +273,7 @@ export function injectProp(
   /**
    * 1. mergeProps(...)
    * 2. toHandlers(...)
-   *
    * 3. normalizeProps(...)
-   *
    * 4. normalizeProps(guardReactiveProps(...))
    *
    * we need to get the real props before normalization

From 0b41b3866beed22646edb71ac9e5d4c7716ffb93 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Sun, 28 Mar 2021 13:30:59 +0800
Subject: [PATCH 10/15] chore: rename forSSR to inSSR

---
 packages/compiler-core/src/ast.ts               |  4 ++--
 packages/compiler-core/src/codegen.ts           | 10 +++++-----
 packages/compiler-core/src/options.ts           | 17 +++++++++++------
 packages/compiler-core/src/transform.ts         |  8 ++++----
 .../compiler-core/src/transforms/hoistStatic.ts |  6 ++----
 .../src/transforms/transformElement.ts          |  2 +-
 packages/compiler-core/src/transforms/vFor.ts   |  8 ++++----
 packages/compiler-core/src/transforms/vIf.ts    |  4 ++--
 packages/compiler-ssr/src/index.ts              |  2 +-
 9 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index efdb7f2362f..241122ceb60 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -568,9 +568,9 @@ export function createVNodeCall(
   if (context) {
     if (isBlock) {
       context.helper(OPEN_BLOCK)
-      context.helper(getVNodeBlockHelper(context.forSSR, isComponent))
+      context.helper(getVNodeBlockHelper(context.inSSR, isComponent))
     } else {
-      context.helper(getVNodeHelper(context.forSSR, isComponent))
+      context.helper(getVNodeHelper(context.inSSR, isComponent))
     }
     if (directives) {
       context.helper(WITH_DIRECTIVES)
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 63335d42a3f..6254883290c 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -101,7 +101,7 @@ function createCodegenContext(
     runtimeGlobalName = `Vue`,
     runtimeModuleName = `vue`,
     ssr = false,
-    forSSR = false
+    inSSR = false
   }: CodegenOptions
 ): CodegenContext {
   const context: CodegenContext = {
@@ -114,7 +114,7 @@ function createCodegenContext(
     runtimeGlobalName,
     runtimeModuleName,
     ssr,
-    forSSR,
+    inSSR,
     source: ast.loc.source,
     code: ``,
     column: 1,
@@ -773,8 +773,8 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
     push(PURE_ANNOTATION)
   }
   const callHelper: symbol = isBlock
-    ? getVNodeBlockHelper(context.forSSR, isComponent)
-    : getVNodeHelper(context.forSSR, isComponent)
+    ? getVNodeBlockHelper(context.inSSR, isComponent)
+    : getVNodeHelper(context.inSSR, isComponent)
   push(helper(callHelper) + `(`, node)
   genNodeList(
     genNullableArgs([
@@ -783,7 +783,7 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
       children,
       patchFlag,
       dynamicProps,
-      context.forSSR ? null : shapeFlag
+      context.inSSR ? null : shapeFlag
     ]),
     context
   )
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index b4a51dd730d..22988b150a5 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -122,20 +122,25 @@ interface SharedTransformCodegenOptions {
    */
   prefixIdentifiers?: boolean
   /**
-   * Generate SSR-optimized render functions instead.
+   * Control whether generate SSR-optimized render functions instead.
    * The resulting function must be attached to the component via the
    * `ssrRender` option instead of `render`.
-   * Note: it is used to indicate the runtime environment of the generated code
+   *
+   * When compiler generates code for SSR's fallback branch, we need to set it to false:
+   *  - context.ssr = false
+   *
+   * see `subTransform` in `ssrTransformCompoent.ts`
    */
   ssr?: boolean
   /**
    * Indicates whether the compiler generates code for SSR,
-   * when compiler generates code for the fallback branch of SSR:
+   * it is always true when generating code for SSR,
+   * regardless of whether we are generating code for SSR's fallback branch,
+   * this means that when the compiler generates code for SSR's fallback branch:
    *  - context.ssr = false
-   *  - context.forSSR = true
-   * see `subTransform` in `ssrTransformCompoent.ts`
+   *  - context.inSSR = true
    */
-  forSSR?: boolean
+  inSSR?: boolean
   /**
    * Optional binding metadata analyzed from script - used to optimize
    * binding access when `prefixIdentifiers` is enabled.
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 775dc8ec240..6199fd098ea 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -139,7 +139,7 @@ export function createTransformContext(
     scopeId = null,
     slotted = true,
     ssr = false,
-    forSSR = false,
+    inSSR = false,
     ssrCssVars = ``,
     bindingMetadata = EMPTY_OBJ,
     inline = false,
@@ -165,7 +165,7 @@ export function createTransformContext(
     scopeId,
     slotted,
     ssr,
-    forSSR,
+    inSSR,
     ssrCssVars,
     bindingMetadata,
     inline,
@@ -349,9 +349,9 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
       if (codegenNode.type === NodeTypes.VNODE_CALL) {
         if (!codegenNode.isBlock) {
           codegenNode.isBlock = true
-          removeHelper(getVNodeHelper(context.forSSR, codegenNode.isComponent))
+          removeHelper(getVNodeHelper(context.inSSR, codegenNode.isComponent))
           helper(OPEN_BLOCK)
-          helper(getVNodeBlockHelper(context.forSSR, codegenNode.isComponent))
+          helper(getVNodeBlockHelper(context.inSSR, codegenNode.isComponent))
         }
       }
       root.codegenNode = codegenNode
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index d683ef3c544..aad6d879413 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -222,12 +222,10 @@ export function getConstantType(
         if (codegenNode.isBlock) {
           context.removeHelper(OPEN_BLOCK)
           context.removeHelper(
-            getVNodeBlockHelper(context.forSSR, codegenNode.isComponent)
+            getVNodeBlockHelper(context.inSSR, codegenNode.isComponent)
           )
           codegenNode.isBlock = false
-          context.helper(
-            getVNodeHelper(context.forSSR, codegenNode.isComponent)
-          )
+          context.helper(getVNodeHelper(context.inSSR, codegenNode.isComponent))
         }
 
         constantCache.set(node, returnType)
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 857364071e6..747aacda567 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -691,7 +691,7 @@ export function buildProps(
   }
 
   // pre-normalize props, SSR is skipped for now
-  if (!context.forSSR && propsExpression) {
+  if (!context.inSSR && propsExpression) {
     switch (propsExpression.type) {
       case NodeTypes.JS_OBJECT_EXPRESSION:
         // means that there is no v-bind,
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index 6952d457937..f9ad1671bfb 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -184,21 +184,21 @@ export const transformFor = createStructuralDirectiveTransform(
               // switch from block to vnode
               removeHelper(OPEN_BLOCK)
               removeHelper(
-                getVNodeBlockHelper(context.forSSR, childBlock.isComponent)
+                getVNodeBlockHelper(context.inSSR, childBlock.isComponent)
               )
             } else {
               // switch from vnode to block
               removeHelper(
-                getVNodeHelper(context.forSSR, childBlock.isComponent)
+                getVNodeHelper(context.inSSR, childBlock.isComponent)
               )
             }
           }
           childBlock.isBlock = !isStableFragment
           if (childBlock.isBlock) {
             helper(OPEN_BLOCK)
-            helper(getVNodeBlockHelper(context.forSSR, childBlock.isComponent))
+            helper(getVNodeBlockHelper(context.inSSR, childBlock.isComponent))
           } else {
-            helper(getVNodeHelper(context.forSSR, childBlock.isComponent))
+            helper(getVNodeHelper(context.inSSR, childBlock.isComponent))
           }
         }
 
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index 252a7940632..a75527526be 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -301,10 +301,10 @@ function createChildrenCodegenNode(
       .codegenNode as BlockCodegenNode
     // Change createVNode to createBlock.
     if (vnodeCall.type === NodeTypes.VNODE_CALL && !vnodeCall.isBlock) {
-      removeHelper(getVNodeHelper(context.forSSR, vnodeCall.isComponent))
+      removeHelper(getVNodeHelper(context.inSSR, vnodeCall.isComponent))
       vnodeCall.isBlock = true
       helper(OPEN_BLOCK)
-      helper(getVNodeBlockHelper(context.forSSR, vnodeCall.isComponent))
+      helper(getVNodeBlockHelper(context.inSSR, vnodeCall.isComponent))
     }
     // inject branch key
     injectProp(vnodeCall, keyProperty, context)
diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index 29a98e36dac..ef801364159 100644
--- a/packages/compiler-ssr/src/index.ts
+++ b/packages/compiler-ssr/src/index.ts
@@ -35,7 +35,7 @@ export function compile(
     // apply DOM-specific parsing options
     ...parserOptions,
     ssr: true,
-    forSSR: true,
+    inSSR: true,
     scopeId: options.mode === 'function' ? null : options.scopeId,
     // always prefix since compiler-ssr doesn't have size concern
     prefixIdentifiers: true,

From 255ef598804ffa8fec4858e435b0d1f9fde20299 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Mon, 10 May 2021 11:07:13 +0800
Subject: [PATCH 11/15] fix: tests

---
 .../__tests__/__snapshots__/compileScript.spec.ts.snap    | 4 ++--
 .../runtime-core/__tests__/rendererOptimizedMode.spec.ts  | 8 +-------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 94116ed3776..74b6d711f8f 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -273,7 +273,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode should not wrap render fn with withId when having scoped styles 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxxx\\")
 
 
@@ -284,7 +284,7 @@ export default {
         const msg = 1
         
 return (_ctx, _cache) => {
-  return (_openBlock(), _createBlock(\\"h1\\", null, _toDisplayString(msg)))
+  return (_openBlock(), _createElementBlock(\\"h1\\", null, _toDisplayString(msg), null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
 }
 }
 
diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
index a5dbf00a739..45b0b26d212 100644
--- a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
+++ b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -20,13 +20,7 @@ import {
   onBeforeUnmount,
   createTextVNode,
   SetupContext,
-  createApp,
-  createElementVNode,
-  reactive,
-  guardReactiveProps,
-  normalizeProps,
-  normalizeClass,
-  normalizeStyle
+  createApp
 } from '@vue/runtime-test'
 import { PatchFlags, SlotFlags } from '@vue/shared'
 import { SuspenseImpl } from '../src/components/Suspense'

From 5f85951f9838cdfbe13dd3e9591e7d79710563e1 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Fri, 28 May 2021 22:59:57 +0800
Subject: [PATCH 12/15] fix: tests

---
 .../__snapshots__/transformText.spec.ts.snap  |  6 ++--
 .../__snapshots__/vSlot.spec.ts.snap          | 14 ++++----
 .../warnTransitionChildren.spec.ts.snap       | 20 +++++------
 .../__tests__/rendererOptimizedMode.spec.ts   | 35 -------------------
 4 files changed, 20 insertions(+), 55 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
index 18175530d30..6fe8b5db32b 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
@@ -67,13 +67,13 @@ exports[`compiler: transform text element with custom directives and only one te
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _directive_foo = _resolveDirective(\\"foo\\")
 
-    return _withDirectives((_openBlock(), _createBlock(\\"p\\", null, [
+    return _withDirectives((_openBlock(), _createElementBlock(\\"p\\", null, [
       _createTextVNode(_toDisplayString(foo), 1 /* TEXT */)
-    ], 512 /* NEED_PATCH */)), [
+    ], 512 /* NEED_PATCH */, null, 17 /* ELEMENT, ARRAY_CHILDREN */)), [
       [_directive_foo]
     ])
   }
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
index 2eb14e357b7..900634ac8c9 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -211,16 +211,16 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots with whitespace: 'preserve' implicit default slot 1`] = `
-"const { createVNode: _createVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     header: _withCtx(() => [\\" Header \\"]),
     default: _withCtx(() => [
       \\" \\",
-      _createVNode(\\"p\\")
+      _createElementVNode(\\"p\\")
     ]),
     _: 1 /* STABLE */
   }))
@@ -228,12 +228,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots with whitespace: 'preserve' named default slot + implicit whitespace content 1`] = `
-"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     header: _withCtx(() => [\\" Header \\"]),
     default: _withCtx(() => [\\" Default \\"]),
     _: 1 /* STABLE */
@@ -242,12 +242,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots with whitespace: 'preserve' should not generate whitespace only default slot 1`] = `
-"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
+"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createBlock(_component_Comp, null, {
+  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
     header: _withCtx(() => [\\" Header \\"]),
     footer: _withCtx(() => [\\" Footer \\"]),
     _: 1 /* STABLE */
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
index 224352b2aba..53b1ff1538f 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
@@ -5,22 +5,22 @@ exports[`the v-if/else-if/else branchs in Transition should ignore comments 1`]
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, createVNode: _createVNode, Fragment: _Fragment, Transition: _Transition, withCtx: _withCtx } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, Fragment: _Fragment, Transition: _Transition, withCtx: _withCtx, createComponentBlock: _createComponentBlock } = _Vue
 
-    return (_openBlock(), _createBlock(_Transition, null, {
+    return (_openBlock(), _createComponentBlock(_Transition, null, {
       default: _withCtx(() => [
         a
-          ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"hey\\"))
+          ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
           : b
-            ? (_openBlock(), _createBlock(\\"div\\", { key: 1 }, \\"hey\\"))
-            : (_openBlock(), _createBlock(\\"div\\", { key: 2 }, [
+            ? (_openBlock(), _createElementBlock(\\"div\\", { key: 1 }, \\"hey\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+            : (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }, [
                 c
-                  ? (_openBlock(), _createBlock(\\"p\\", { key: 0 }))
-                  : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
+                  ? (_openBlock(), _createElementBlock(\\"p\\", { key: 0 }))
+                  : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
                       _createCommentVNode(\\" this should not be ignored \\"),
-                      _createVNode(\\"p\\")
-                    ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
-              ]))
+                      _createElementVNode(\\"p\\")
+                    ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+              ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
       ]),
       _: 1 /* STABLE */
     }))
diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
index 45b0b26d212..bddd7d1d318 100644
--- a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
+++ b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -821,39 +821,4 @@ describe('renderer: optimized mode', () => {
     await nextTick()
     expect(inner(root)).toBe('<div><div>true</div></div>')
   })
-  describe('optimized VNode creation', () => {
-    test('single v-bind', () => {
-      // in case <div v-bind="reactiveObj" />
-      // 1. use `guardReactiveProps` to make sure it gets rid of reactive data
-      // 2. use `normalizeProps` to normalize `class` and `style`
-      const p = createElementVNode(
-        'p',
-        normalizeProps(
-          guardReactiveProps(reactive({ class: ['foo', { bar: true }] }))
-        )
-      )
-      render(p, root)
-      expect(inner(root)).toBe('<p class="foo bar"></p>')
-    })
-
-    test('dynamic class binding', () => {
-      // in case <div :class="cls" class="bar" />
-      const p = createElementVNode('p', {
-        class: normalizeClass([{ foo: true }, 'bar'])
-      })
-      render(p, root)
-      expect(inner(root)).toBe('<p class="foo bar"></p>')
-    })
-
-    test('dynamic style binding', () => {
-      // in case <div :style="stl" style="color: red;" />
-      const p = createElementVNode('p', {
-        style: normalizeStyle([['background: green;'], { color: 'red' }])
-      })
-      render(p, root)
-      expect(inner(root)).toBe(
-        '<p style={"background":"green","color":"red"}></p>'
-      )
-    })
-  })
 })

From c8d1034599dde02a02876eecd135ae0047508aa6 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 22 Jun 2021 15:59:09 -0400
Subject: [PATCH 13/15] chore: fix merged test

---
 .../__tests__/__snapshots__/compileScript.spec.ts.snap        | 4 ++--
 packages/runtime-core/src/vnode.ts                            | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 9358b97e8c3..69ad1be48eb 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -374,10 +374,10 @@ return (_ctx, _cache) => {
     _createElementVNode(\\"div\\", {
       onClick: _cache[3] || (_cache[3] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value += 1 : v += 1))
     }),
-    _createVNode(\\"div\\", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[5] || (_cache[5] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
     })
   ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index df24bfce9d1..2f37e3b254c 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -247,7 +247,8 @@ export function setBlockTracking(value: number) {
  */
 function setupBlock(vnode: VNode) {
   // save current block children on the block vnode
-  vnode.dynamicChildren = isBlockTreeEnabled > 0 ? currentBlock || (EMPTY_ARR as any) : null
+  vnode.dynamicChildren =
+    isBlockTreeEnabled > 0 ? currentBlock || (EMPTY_ARR as any) : null
   // close block
   closeBlock()
   // a block is always going to be patched, so track it as a child of its

From 6745f6ba8662e1b01b27ba784a7445361bd38f71 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 22 Jun 2021 17:13:45 -0400
Subject: [PATCH 14/15] refactor: remove createComponentVNode, merge methods
 into createBaseVNode

---
 .../__snapshots__/scopeId.spec.ts.snap        |  12 +-
 .../__snapshots__/hoistStatic.spec.ts.snap    |  14 +-
 .../__snapshots__/vOnce.spec.ts.snap          |   4 +-
 .../__snapshots__/vSlot.spec.ts.snap          |  62 ++--
 packages/compiler-core/src/runtimeHelpers.ts  |   8 -
 packages/compiler-core/src/utils.ts           |  14 +-
 .../warnTransitionChildren.spec.ts.snap       |   4 +-
 .../__snapshots__/compileScript.spec.ts.snap  |  10 +-
 .../__tests__/compileScript.spec.ts           |   6 +-
 packages/runtime-core/src/index.ts            |   2 -
 packages/runtime-core/src/vnode.ts            | 299 +++++-------------
 11 files changed, 144 insertions(+), 291 deletions(-)

diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index 1881a532f11..cadca1fe4f4 100644
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -19,13 +19,13 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
 `;
 
 exports[`scopeId compiler support should wrap default slot 1`] = `
-"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
   const _component_Child = _resolveComponent(\\"Child\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Child, null, {
+  return (_openBlock(), _createBlock(_component_Child, null, {
     default: _withId(() => [
       _createElementVNode(\\"div\\")
     ]),
@@ -35,13 +35,13 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
 `;
 
 exports[`scopeId compiler support should wrap dynamic slots 1`] = `
-"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
   const _component_Child = _resolveComponent(\\"Child\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+  return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
           name: \\"foo\\",
@@ -63,13 +63,13 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
 `;
 
 exports[`scopeId compiler support should wrap named slots 1`] = `
-"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
   const _component_Child = _resolveComponent(\\"Child\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Child, null, {
+  return (_openBlock(), _createBlock(_component_Child, null, {
     foo: _withId(({ msg }) => [
       _createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
     ]),
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
index da16adc95e6..5392079ce7d 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
@@ -132,19 +132,19 @@ return function render(_ctx, _cache) {
 
 exports[`compiler: hoistStatic transform hoist static props for elements with unhoistable children 1`] = `
 "const _Vue = Vue
-const { createElementVNode: _createElementVNode } = _Vue
+const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
 
 const _hoisted_1 = { id: \\"foo\\" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { resolveComponent: _resolveComponent, createVNode: _createVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _createElementVNode(\\"div\\", _hoisted_1, [
-        _createComponentVNode(_component_Comp)
+        _createVNode(_component_Comp)
       ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
     ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
@@ -241,11 +241,11 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+    return (_openBlock(), _createBlock(_component_Comp, null, {
       default: _withCtx(({ foo }) => [
         _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
       ]),
@@ -294,12 +294,12 @@ exports[`compiler: hoistStatic transform should NOT hoist components 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createComponentVNode(_component_Comp)
+      _createVNode(_component_Comp)
     ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
   }
 }"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index 85cbdf4a99c..504c97ff9f1 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -22,14 +22,14 @@ exports[`compiler: v-once transform on component 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _cache[1] || (
         _setBlockTracking(-1),
-        _cache[1] = _createComponentVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+        _cache[1] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
         _setBlockTracking(1),
         _cache[1]
       )
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
index 900634ac8c9..967f2b3f45e 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`compiler: transform component slots dynamically named slots 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     [_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     [_ctx.two]: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]),
     _: 2 /* DYNAMIC */
@@ -15,12 +15,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots implicit default slot 1`] = `
-"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(() => [
       _createElementVNode(\\"div\\")
     ]),
@@ -30,12 +30,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots named slot with v-for w/ prefixIdentifiers: true 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+  return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     _renderList(_ctx.list, (name) => {
       return {
         name: name,
@@ -47,12 +47,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots named slot with v-if + prefixIdentifiers: true 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+  return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
           name: \\"one\\",
@@ -68,11 +68,11 @@ exports[`compiler: transform component slots named slot with v-if + v-else-if +
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
+    const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+    return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
             name: \\"one\\",
@@ -97,11 +97,11 @@ exports[`compiler: transform component slots named slot with v-if 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
+    const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
+    return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
             name: \\"one\\",
@@ -118,11 +118,11 @@ exports[`compiler: transform component slots named slots w/ implicit default slo
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
+    const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
 
-    return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+    return (_openBlock(), _createBlock(_component_Comp, null, {
       one: _withCtx(() => [\\"foo\\"]),
       default: _withCtx(() => [
         \\"bar\\",
@@ -135,15 +135,15 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots nested slots scoping 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Inner = _resolveComponent(\\"Inner\\")
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(({ foo }) => [
-      _createComponentVNode(_component_Inner, null, {
+      _createVNode(_component_Inner, null, {
         default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
         _: 2 /* DYNAMIC */
       }, 1024 /* DYNAMIC_SLOTS */),
@@ -158,12 +158,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots on component dynamically named slot 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     [_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     _: 2 /* DYNAMIC */
   }, 1024 /* DYNAMIC_SLOTS */))
@@ -171,12 +171,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots on component named slot 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     _: 1 /* STABLE */
   }))
@@ -184,12 +184,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots on-component default slot 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     _: 1 /* STABLE */
   }))
@@ -197,12 +197,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots template named slots 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
     two: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]),
     _: 1 /* STABLE */
@@ -211,12 +211,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots with whitespace: 'preserve' implicit default slot 1`] = `
-"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     header: _withCtx(() => [\\" Header \\"]),
     default: _withCtx(() => [
       \\" \\",
@@ -228,12 +228,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots with whitespace: 'preserve' named default slot + implicit whitespace content 1`] = `
-"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     header: _withCtx(() => [\\" Header \\"]),
     default: _withCtx(() => [\\" Default \\"]),
     _: 1 /* STABLE */
@@ -242,12 +242,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: transform component slots with whitespace: 'preserve' should not generate whitespace only default slot 1`] = `
-"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
+"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
   const _component_Comp = _resolveComponent(\\"Comp\\")
 
-  return (_openBlock(), _createComponentBlock(_component_Comp, null, {
+  return (_openBlock(), _createBlock(_component_Comp, null, {
     header: _withCtx(() => [\\" Header \\"]),
     footer: _withCtx(() => [\\" Footer \\"]),
     _: 1 /* STABLE */
diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index 25103b8b47f..d9f7d6c3e59 100644
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -6,14 +6,8 @@ export const BASE_TRANSITION = Symbol(__DEV__ ? `BaseTransition` : ``)
 export const OPEN_BLOCK = Symbol(__DEV__ ? `openBlock` : ``)
 export const CREATE_BLOCK = Symbol(__DEV__ ? `createBlock` : ``)
 export const CREATE_ELEMENT_BLOCK = Symbol(__DEV__ ? `createElementBlock` : ``)
-export const CREATE_COMPONENT_BLOCK = Symbol(
-  __DEV__ ? `createComponentBlock` : ``
-)
 export const CREATE_VNODE = Symbol(__DEV__ ? `createVNode` : ``)
 export const CREATE_ELEMENT_VNODE = Symbol(__DEV__ ? `createElementVNode` : ``)
-export const CREATE_COMPONENT_VNODE = Symbol(
-  __DEV__ ? `createComponentVNode` : ``
-)
 export const CREATE_COMMENT = Symbol(__DEV__ ? `createCommentVNode` : ``)
 export const CREATE_TEXT = Symbol(__DEV__ ? `createTextVNode` : ``)
 export const CREATE_STATIC = Symbol(__DEV__ ? `createStaticVNode` : ``)
@@ -57,10 +51,8 @@ export const helperNameMap: any = {
   [OPEN_BLOCK]: `openBlock`,
   [CREATE_BLOCK]: `createBlock`,
   [CREATE_ELEMENT_BLOCK]: `createElementBlock`,
-  [CREATE_COMPONENT_BLOCK]: `createComponentBlock`,
   [CREATE_VNODE]: `createVNode`,
   [CREATE_ELEMENT_VNODE]: `createElementVNode`,
-  [CREATE_COMPONENT_VNODE]: `createComponentVNode`,
   [CREATE_COMMENT]: `createCommentVNode`,
   [CREATE_TEXT]: `createTextVNode`,
   [CREATE_STATIC]: `createStaticVNode`,
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index a5c3ca37fd8..a3c363a7449 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -34,10 +34,8 @@ import {
   NORMALIZE_PROPS,
   GUARD_REACTIVE_PROPS,
   CREATE_BLOCK,
-  CREATE_COMPONENT_BLOCK,
   CREATE_ELEMENT_BLOCK,
   CREATE_VNODE,
-  CREATE_COMPONENT_VNODE,
   CREATE_ELEMENT_VNODE
 } from './runtimeHelpers'
 import { isString, isObject, hyphenate, extend } from '@vue/shared'
@@ -225,19 +223,11 @@ export function isSlotOutlet(
 }
 
 export function getVNodeHelper(ssr: boolean, isComponent: boolean) {
-  return ssr
-    ? CREATE_VNODE
-    : isComponent
-      ? CREATE_COMPONENT_VNODE
-      : CREATE_ELEMENT_VNODE
+  return ssr || isComponent ? CREATE_VNODE : CREATE_ELEMENT_VNODE
 }
 
 export function getVNodeBlockHelper(ssr: boolean, isComponent: boolean) {
-  return ssr
-    ? CREATE_BLOCK
-    : isComponent
-      ? CREATE_COMPONENT_BLOCK
-      : CREATE_ELEMENT_BLOCK
+  return ssr || isComponent ? CREATE_BLOCK : CREATE_ELEMENT_BLOCK
 }
 
 const propsHelperSet = new Set([NORMALIZE_PROPS, GUARD_REACTIVE_PROPS])
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
index 53b1ff1538f..5d808b476a0 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
@@ -5,9 +5,9 @@ exports[`the v-if/else-if/else branchs in Transition should ignore comments 1`]
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, Fragment: _Fragment, Transition: _Transition, withCtx: _withCtx, createComponentBlock: _createComponentBlock } = _Vue
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, Fragment: _Fragment, Transition: _Transition, withCtx: _withCtx, createBlock: _createBlock } = _Vue
 
-    return (_openBlock(), _createComponentBlock(_Transition, null, {
+    return (_openBlock(), _createBlock(_Transition, null, {
       default: _withCtx(() => [
         a
           ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 69ad1be48eb..9da0eaa3ef7 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -214,7 +214,7 @@ return { ref }
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode avoid unref() when necessary 1`] = `
-"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createComponentVNode as _createComponentVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         import Foo, { bar } from './Foo.vue'
@@ -232,7 +232,7 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createComponentVNode(Foo, null, {
+    _createVNode(Foo, null, {
       default: _withCtx(() => [
         _createTextVNode(_toDisplayString(_unref(bar)), 1 /* TEXT */)
       ]),
@@ -247,7 +247,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode referencing scope components and directives 1`] = `
-"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createComponentVNode as _createComponentVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import ChildComp from './Child.vue'
         import SomeOtherComp from './Other.vue'
@@ -263,8 +263,8 @@ return (_ctx, _cache) => {
     _withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
       [_unref(myDir)]
     ]),
-    _createComponentVNode(ChildComp),
-    _createComponentVNode(SomeOtherComp)
+    _createVNode(ChildComp),
+    _createVNode(SomeOtherComp)
   ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
 }
 }
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index eb38a58fc66..54832fcb7d7 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -218,9 +218,9 @@ const myEmit = defineEmit(['foo', 'bar'])
         { inlineTemplate: true }
       )
       expect(content).toMatch('[_unref(myDir)]')
-      expect(content).toMatch('_createComponentVNode(ChildComp)')
+      expect(content).toMatch('_createVNode(ChildComp)')
       // kebab-case component support
-      expect(content).toMatch('_createComponentVNode(SomeOtherComp)')
+      expect(content).toMatch('_createVNode(SomeOtherComp)')
       assertCode(content)
     })
 
@@ -245,7 +245,7 @@ const myEmit = defineEmit(['foo', 'bar'])
         { inlineTemplate: true }
       )
       // no need to unref vue component import
-      expect(content).toMatch(`createComponentVNode(Foo,`)
+      expect(content).toMatch(`createVNode(Foo,`)
       // #2699 should unref named imports from .vue
       expect(content).toMatch(`unref(bar)`)
       // should unref other imports
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index e979e1488ad..350979138ee 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -247,9 +247,7 @@ export {
   createCommentVNode,
   createStaticVNode,
   createElementVNode,
-  createComponentVNode,
   createElementBlock,
-  createComponentBlock,
   guardReactiveProps
 } from './vnode'
 export {
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 2f37e3b254c..ee228c39838 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -242,9 +242,7 @@ let isBlockTreeEnabled = 1
 export function setBlockTracking(value: number) {
   isBlockTreeEnabled += value
 }
-/**
- * @private
- */
+
 function setupBlock(vnode: VNode) {
   // save current block children on the block vnode
   vnode.dynamicChildren =
@@ -256,40 +254,9 @@ function setupBlock(vnode: VNode) {
   if (isBlockTreeEnabled > 0 && currentBlock) {
     currentBlock.push(vnode)
   }
+  return vnode
 }
-/**
- * @private
- */
-function trackVNode(
-  vnode: VNode,
-  isBlockNode: boolean,
-  patchFlag: number,
-  shapeFlag: number
-) {
-  if (
-    isBlockTreeEnabled > 0 &&
-    // avoid a block node from tracking itself
-    !isBlockNode &&
-    // has current parent block
-    currentBlock &&
-    // presence of a patch flag indicates this node needs patching on updates.
-    // component nodes also should always be patched, because even if the
-    // component doesn't need to update, it needs to persist the instance on to
-    // the next vnode so that it can be properly unmounted later.
-    (patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
-    // the EVENTS flag is only for hydration and if it is the only flag, the
-    // vnode should not be considered dynamic due to handler caching.
-    patchFlag !== PatchFlags.HYDRATE_EVENTS
-  ) {
-    currentBlock.push(vnode)
-  }
 
-  if (__COMPAT__) {
-    convertLegacyVModelProps(vnode)
-    convertLegacyRefInFor(vnode)
-    defineLegacyVNodeProperties(vnode)
-  }
-}
 /**
  * @private
  */
@@ -301,46 +268,17 @@ export function createElementBlock(
   dynamicProps?: string[],
   shapeFlag?: number
 ) {
-  const vnode = createElementVNode(
-    type,
-    props,
-    children,
-    patchFlag,
-    dynamicProps,
-    shapeFlag,
-    true /* isBlock */
-  )
-  setupBlock(vnode)
-  return vnode
-}
-
-/**
- * @private
- */
-export function createComponentBlock(
-  type:
-    | Component
-    | VNode
-    | typeof NULL_DYNAMIC_COMPONENT
-    | typeof TeleportImpl
-    | typeof SuspenseImpl,
-  props?: Record<string, any> | null,
-  children?: any,
-  patchFlag?: number,
-  dynamicProps?: string[],
-  shapeFlag?: number
-) {
-  const vnode = createComponentVNode(
-    type,
-    props,
-    children,
-    patchFlag,
-    dynamicProps,
-    shapeFlag,
-    true /* isBlock */
+  return setupBlock(
+    createBaseVNode(
+      type,
+      props,
+      children,
+      patchFlag,
+      dynamicProps,
+      shapeFlag,
+      true /* isBlock */
+    )
   )
-  setupBlock(vnode)
-  return vnode
 }
 
 /**
@@ -357,16 +295,16 @@ export function createBlock(
   patchFlag?: number,
   dynamicProps?: string[]
 ): VNode {
-  const vnode = createVNode(
-    type,
-    props,
-    children,
-    patchFlag,
-    dynamicProps,
-    true /* isBlock: prevent a block from tracking itself */
+  return setupBlock(
+    createVNode(
+      type,
+      props,
+      children,
+      patchFlag,
+      dynamicProps,
+      true /* isBlock: prevent a block from tracking itself */
+    )
   )
-  setupBlock(vnode)
-  return vnode
 }
 
 export function isVNode(value: any): value is VNode {
@@ -425,14 +363,17 @@ const normalizeRef = ({ ref }: VNodeProps): VNodeNormalizedRefAtom | null => {
     : null) as any
 }
 
-function createPlainVNode(
+function createBaseVNode(
   type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
   props: (Data & VNodeProps) | null = null,
   children: unknown = null,
-  patchFlag: number = 0,
-  dynamicProps: string[] | null = null
+  patchFlag = 0,
+  dynamicProps: string[] | null = null,
+  shapeFlag = ShapeFlags.ELEMENT,
+  isBlockNode = false,
+  needChildrenNormalization = false
 ) {
-  return {
+  const vnode = {
     __v_isVNode: true,
     __v_skip: true,
     type,
@@ -453,14 +394,56 @@ function createPlainVNode(
     target: null,
     targetAnchor: null,
     staticCount: 0,
-    shapeFlag: 0,
+    shapeFlag,
     patchFlag,
     dynamicProps,
     dynamicChildren: null,
     appContext: null
   } as VNode
+
+  if (needChildrenNormalization) {
+    normalizeChildren(vnode, children)
+    // normalize suspense children
+    if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
+      ;(type as typeof SuspenseImpl).normalize(vnode)
+    }
+  }
+
+  // validate key
+  if (__DEV__ && vnode.key !== vnode.key) {
+    warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type)
+  }
+
+  // track vnode for block tree
+  if (
+    isBlockTreeEnabled > 0 &&
+    // avoid a block node from tracking itself
+    !isBlockNode &&
+    // has current parent block
+    currentBlock &&
+    // presence of a patch flag indicates this node needs patching on updates.
+    // component nodes also should always be patched, because even if the
+    // component doesn't need to update, it needs to persist the instance on to
+    // the next vnode so that it can be properly unmounted later.
+    (vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
+    // the EVENTS flag is only for hydration and if it is the only flag, the
+    // vnode should not be considered dynamic due to handler caching.
+    vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
+  ) {
+    currentBlock.push(vnode)
+  }
+
+  if (__COMPAT__) {
+    convertLegacyVModelProps(vnode)
+    convertLegacyRefInFor(vnode)
+    defineLegacyVNodeProperties(vnode)
+  }
+
+  return vnode
 }
 
+export { createBaseVNode as createElementVNode }
+
 export const createVNode = (__DEV__
   ? createVNodeWithArgsTransform
   : _createVNode) as typeof _createVNode
@@ -496,6 +479,11 @@ function _createVNode(
     type = type.__vccOpts
   }
 
+  // 2.x async/functional component compat
+  if (__COMPAT__) {
+    type = convertLegacyComponent(type, currentRenderingInstance)
+  }
+
   // class & style normalization.
   if (props) {
     // for reactive or proxy objects, we need to clone it to enable mutation.
@@ -539,131 +527,16 @@ function _createVNode(
     )
   }
 
-  const vnode = createPlainVNode(type, props, children, patchFlag, dynamicProps)
-  vnode.shapeFlag = shapeFlag
-
-  // validate key
-  if (__DEV__ && vnode.key !== vnode.key) {
-    warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type)
-  }
-
-  normalizeChildren(vnode, children)
-
-  // normalize suspense children
-  if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
-    ;(type as typeof SuspenseImpl).normalize(vnode)
-  }
-
-  trackVNode(vnode, isBlockNode, patchFlag, shapeFlag)
-
-  return vnode
-}
-
-export function createElementVNode(
-  type: string,
-  props: (Data & VNodeProps) | null = null,
-  children: Exclude<VNodeNormalizedChildren, RawSlots> = null,
-  patchFlag: number = 0,
-  dynamicProps: string[] | null = null,
-  shapeFlag = ShapeFlags.ELEMENT,
-  isBlockNode = false
-) {
-  const vnode = createPlainVNode(type, props, children, patchFlag, dynamicProps)
-  vnode.shapeFlag = shapeFlag
-  trackVNode(vnode, isBlockNode, patchFlag, shapeFlag)
-  return vnode
-}
-
-export function createComponentVNode(
-  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
-  props: (Data & VNodeProps) | null = null,
-  children: Exclude<VNodeNormalizedChildren, RawSlots> = null,
-  patchFlag: number = 0,
-  dynamicProps: string[] | null = null,
-  shapeFlag: ShapeFlags = 0,
-  isBlockNode = false
-) {
-  if (!type || type === NULL_DYNAMIC_COMPONENT) {
-    if (__DEV__ && !type) {
-      warn(`Invalid vnode type when creating vnode: ${type}.`)
-    }
-    type = Comment
-  }
-
-  if (isVNode(type)) {
-    const cloned = cloneVNode(type, props, true /* mergeRef: true */)
-    if (children) {
-      normalizeChildren(cloned, children)
-    }
-    return cloned
-  }
-
-  // class component normalization.
-  if (isClassComponent(type)) {
-    type = type.__vccOpts
-  }
-
-  // 2.x async/functional component compat
-  if (__COMPAT__) {
-    type = convertLegacyComponent(type, currentRenderingInstance)
-  }
-
-  // class & style normalization.
-  if (props) {
-    // for reactive or proxy objects, we need to clone it to enable mutation.
-    props = guardReactiveProps(props)!
-    let { class: klass, style } = props
-    if (klass && !isString(klass)) {
-      props.class = normalizeClass(klass)
-    }
-    if (isObject(style)) {
-      // reactive state objects need to be cloned since they are likely to be
-      // mutated
-      if (isProxy(style) && !isArray(style)) {
-        style = extend({}, style)
-      }
-      props.style = normalizeStyle(style)
-    }
-  }
-
-  // Suspense and Teleport analysis at compile time
-  if (!shapeFlag) {
-    shapeFlag = isObject(type)
-      ? ShapeFlags.STATEFUL_COMPONENT
-      : isFunction(type)
-        ? ShapeFlags.FUNCTIONAL_COMPONENT
-        : 0
-  }
-
-  if (__DEV__ && shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isProxy(type)) {
-    type = toRaw(type)
-    warn(
-      `Vue received a Component which was made a reactive object. This can ` +
-        `lead to unnecessary performance overhead, and should be avoided by ` +
-        `marking the component with \`markRaw\` or using \`shallowRef\` ` +
-        `instead of \`ref\`.`,
-      `\nComponent that was made reactive: `,
-      type
-    )
-  }
-
-  const vnode = createPlainVNode(type, props, children, patchFlag, dynamicProps)
-  vnode.shapeFlag = shapeFlag
-
-  // validate key
-  if (__DEV__ && vnode.key !== vnode.key) {
-    warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type)
-  }
-
-  normalizeChildren(vnode, children)
-
-  // normalize suspense children
-  if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
-    ;(type as typeof SuspenseImpl).normalize(vnode)
-  }
-
-  trackVNode(vnode, isBlockNode, patchFlag, shapeFlag)
-  return vnode
+  return createBaseVNode(
+    type,
+    props,
+    children,
+    patchFlag,
+    dynamicProps,
+    shapeFlag,
+    isBlockNode,
+    true
+  )
 }
 
 export function guardReactiveProps(props: (Data & VNodeProps) | null) {

From aaa73258dee1847843b4425896f93629216eab88 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 22 Jun 2021 19:14:40 -0400
Subject: [PATCH 15/15] refactor: remove shapeFlag pre-normalization

---
 .../__snapshots__/codegen.spec.ts.snap        |  4 +-
 .../__snapshots__/compile.spec.ts.snap        | 36 ++++-----
 .../__snapshots__/scopeId.spec.ts.snap        |  6 +-
 .../compiler-core/__tests__/codegen.spec.ts   |  6 +-
 .../compiler-core/__tests__/scopeId.spec.ts   |  8 +-
 .../__snapshots__/hoistStatic.spec.ts.snap    | 80 +++++++++----------
 .../transformExpressions.spec.ts.snap         |  4 +-
 .../__snapshots__/transformText.spec.ts.snap  | 12 +--
 .../__snapshots__/vFor.spec.ts.snap           | 38 ++++-----
 .../transforms/__snapshots__/vIf.spec.ts.snap |  8 +-
 .../__snapshots__/vOnce.spec.ts.snap          |  8 +-
 packages/compiler-core/src/ast.ts             |  3 -
 packages/compiler-core/src/codegen.ts         | 10 +--
 packages/compiler-core/src/transform.ts       |  8 +-
 .../src/transforms/transformElement.ts        | 30 +------
 packages/compiler-core/src/transforms/vFor.ts | 17 +---
 packages/compiler-core/src/transforms/vIf.ts  | 17 +---
 .../__snapshots__/index.spec.ts.snap          |  6 +-
 .../warnTransitionChildren.spec.ts.snap       |  8 +-
 .../__snapshots__/compileScript.spec.ts.snap  | 22 ++---
 .../templateTransformAssetUrl.spec.ts.snap    |  6 +-
 .../templateTransformSrcset.spec.ts.snap      |  6 +-
 packages/runtime-core/src/vnode.ts            | 10 ++-
 packages/shared/src/shapeFlags.ts             | 17 ----
 24 files changed, 141 insertions(+), 229 deletions(-)

diff --git a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
index f15432c7de9..c292b032934 100644
--- a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
@@ -53,8 +53,8 @@ return function render(_ctx, _cache) {
       [prop]: bar,
       [foo + bar]: bar
     }, [
-      _createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" }, null, null, null, 1)
-    ], 16, null, 1)
+      _createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" })
+    ], 16)
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
index 8c252597555..a72a43782ce 100644
--- a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
@@ -13,16 +13,16 @@ return function render(_ctx, _cache) {
     }, [
       _createTextVNode(_toDisplayString(world.burn()) + \\" \\", 1 /* TEXT */),
       ok
-        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
         : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
             _createTextVNode(\\"no\\")
-          ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */)),
+          ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => {
         return (_openBlock(), _createElementBlock(\\"div\\", null, [
-          _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-        ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
-      }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-    ], 2 /* CLASS */, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+          _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
+        ]))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ], 2 /* CLASS */))
   }
 }"
 `;
@@ -37,16 +37,16 @@ return function render(_ctx, _cache) {
   }, [
     _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
     (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
       : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
           _createTextVNode(\\"no\\")
-        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */)),
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
       return (_openBlock(), _createElementBlock(\\"div\\", null, [
-        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-      ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-  ], 2 /* CLASS */, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
+      ]))
+    }), 256 /* UNKEYED_FRAGMENT */))
+  ], 2 /* CLASS */))
 }"
 `;
 
@@ -60,15 +60,15 @@ export function render(_ctx, _cache) {
   }, [
     _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
     (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
       : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
           _createTextVNode(\\"no\\")
-        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */)),
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
       return (_openBlock(), _createElementBlock(\\"div\\", null, [
-        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-      ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-  ], 2 /* CLASS */, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
+      ]))
+    }), 256 /* UNKEYED_FRAGMENT */))
+  ], 2 /* CLASS */))
 }"
 `;
diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index cadca1fe4f4..d03efd45c6d 100644
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -5,8 +5,8 @@ exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 _pushScopeId(\\"test\\")
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
 _popScopeId()
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
@@ -14,7 +14,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
     _hoisted_1,
     _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
     _hoisted_2
-  ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+  ]))
 })"
 `;
 
diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts
index f542caf0637..61908a9105b 100644
--- a/packages/compiler-core/__tests__/codegen.spec.ts
+++ b/packages/compiler-core/__tests__/codegen.spec.ts
@@ -401,10 +401,8 @@ describe('compiler: codegen', () => {
       [prop]: bar,
       [foo + bar]: bar
     }, [
-      _${
-        helperNameMap[CREATE_ELEMENT_VNODE]
-      }("p", { "some-key": "foo" }, null, null, null, 1)
-    ], ${PatchFlags.FULL_PROPS}, null, 1)`)
+      _${helperNameMap[CREATE_ELEMENT_VNODE]}("p", { "some-key": "foo" })
+    ], ${PatchFlags.FULL_PROPS})`)
     expect(code).toMatchSnapshot()
   })
 
diff --git a/packages/compiler-core/__tests__/scopeId.spec.ts b/packages/compiler-core/__tests__/scopeId.spec.ts
index 5f8cef3e77e..a9545d86294 100644
--- a/packages/compiler-core/__tests__/scopeId.spec.ts
+++ b/packages/compiler-core/__tests__/scopeId.spec.ts
@@ -1,6 +1,6 @@
 import { baseCompile } from '../src/compile'
 import { PUSH_SCOPE_ID, POP_SCOPE_ID } from '../src/runtimeHelpers'
-import { PatchFlags, ShapeFlagNames, ShapeFlags } from '@vue/shared'
+import { PatchFlags } from '@vue/shared'
 import { genFlagText } from './testUtils'
 
 /**
@@ -75,15 +75,9 @@ describe('scopeId compiler support', () => {
         `_pushScopeId("test")`,
         `const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
           PatchFlags.HOISTED
-        )}, null, ${genFlagText(
-          [ShapeFlags.ELEMENT, ShapeFlags.TEXT_CHILDREN],
-          ShapeFlagNames
         )})`,
         `const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
           PatchFlags.HOISTED
-        )}, null, ${genFlagText(
-          [ShapeFlags.ELEMENT, ShapeFlags.TEXT_CHILDREN],
-          ShapeFlagNames
         )})`,
         `_popScopeId()`
       ].join('\n')
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
index 5392079ce7d..430aa254e52 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
@@ -12,7 +12,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -24,7 +24,7 @@ const { createElementVNode: _createElementVNode } = _Vue
 const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"p\\", null, [
   /*#__PURE__*/_createElementVNode(\\"span\\"),
   /*#__PURE__*/_createElementVNode(\\"span\\")
-], -1 /* HOISTED */, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
+], -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -32,7 +32,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -43,7 +43,7 @@ const { createElementVNode: _createElementVNode, createCommentVNode: _createComm
 
 const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
   /*#__PURE__*/_createCommentVNode(\\"comment\\")
-], -1 /* HOISTED */, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
+], -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -51,7 +51,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -70,7 +70,7 @@ return function render(_ctx, _cache) {
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1,
       _hoisted_2
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -79,7 +79,7 @@ exports[`compiler: hoistStatic transform hoist simple element 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -87,7 +87,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -108,7 +108,7 @@ return function render(_ctx, _cache) {
       _withDirectives(_createElementVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [
         [_directive_foo]
       ])
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -124,8 +124,8 @@ return function render(_ctx, _cache) {
     const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+      _createElementVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
+    ]))
   }
 }"
 `;
@@ -145,8 +145,8 @@ return function render(_ctx, _cache) {
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _createElementVNode(\\"div\\", _hoisted_1, [
         _createVNode(_component_Comp)
-      ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+      ])
+    ]))
   }
 }"
 `;
@@ -164,8 +164,8 @@ return function render(_ctx, _cache) {
     const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+      _createElementVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
+    ]))
   }
 }"
 `;
@@ -174,7 +174,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static t
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -182,7 +182,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -191,7 +191,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static t
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -199,7 +199,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _hoisted_1
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -213,8 +213,8 @@ export function render(_ctx, _cache) {
       _createElementVNode(\\"div\\", {
         onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.foo && _ctx.foo(...args)))
       })
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
-  ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ])
+  ]))
 }"
 `;
 
@@ -228,10 +228,10 @@ return function render(_ctx, _cache) {
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
         return (_openBlock(), _createElementBlock(\\"p\\", null, [
-          _createElementVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-        ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
-      }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+          _createElementVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
+        ]))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ]))
   }
 }"
 `;
@@ -265,10 +265,10 @@ return function render(_ctx, _cache) {
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
         return (_openBlock(), _createElementBlock(\\"p\\", null, [
-          _createElementVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-        ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
-      }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+          _createElementVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */)
+        ]))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ]))
   }
 }"
 `;
@@ -283,8 +283,8 @@ return function render(_ctx, _cache) {
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
         return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
-      }), 128 /* KEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+      }), 128 /* KEYED_FRAGMENT */))
+    ]))
   }
 }"
 `;
@@ -300,7 +300,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _createVNode(_component_Comp)
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -314,7 +314,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       (_openBlock(), _createElementBlock(\\"div\\", { key: foo }))
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -328,7 +328,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"])
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -342,7 +342,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(\\"div\\", null, [
       _createElementVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */)
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -374,9 +374,9 @@ return function render(_ctx, _cache) {
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
         return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, [
           _hoisted_2
-        ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
-      }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+        ]))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ]))
   }
 }"
 `;
@@ -399,9 +399,9 @@ return function render(_ctx, _cache) {
       ok
         ? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, [
             _hoisted_2
-          ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+          ]))
         : _createCommentVNode(\\"v-if\\", true)
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
index 2a41250e6c4..93c4277ffa3 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: expression transform bindingMetadata inline mode 1`] = `
 "(_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.props) + \\" \\" + _toDisplayString(_unref(setup)) + \\" \\" + _toDisplayString(setupConst) + \\" \\" + _toDisplayString(_ctx.data) + \\" \\" + _toDisplayString(_ctx.options), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.props) + \\" \\" + _toDisplayString(_unref(setup)) + \\" \\" + _toDisplayString(setupConst) + \\" \\" + _toDisplayString(_ctx.data) + \\" \\" + _toDisplayString(_ctx.options), 1 /* TEXT */))
 }"
 `;
 
@@ -10,6 +10,6 @@ exports[`compiler: expression transform bindingMetadata non-inline mode 1`] = `
 "const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString($props.props) + \\" \\" + _toDisplayString($setup.setup) + \\" \\" + _toDisplayString($data.data) + \\" \\" + _toDisplayString($options.options), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString($props.props) + \\" \\" + _toDisplayString($setup.setup) + \\" \\" + _toDisplayString($data.data) + \\" \\" + _toDisplayString($options.options), 1 /* TEXT */))
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
index 6fe8b5db32b..ada1ac6f1ca 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
@@ -10,8 +10,8 @@ return function render(_ctx, _cache) {
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
       return (_openBlock(), _createElementBlock(_Fragment, null, [
         _createTextVNode(\\"foo\\")
-      ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+      ], 64 /* STABLE_FRAGMENT */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
@@ -39,7 +39,7 @@ return function render(_ctx, _cache) {
       _createElementVNode(\\"div\\"),
       _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
       _createElementVNode(\\"div\\")
-    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
@@ -57,7 +57,7 @@ return function render(_ctx, _cache) {
       _createElementVNode(\\"div\\"),
       _createTextVNode(\\"hello\\"),
       _createElementVNode(\\"div\\")
-    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
@@ -73,7 +73,7 @@ return function render(_ctx, _cache) {
 
     return _withDirectives((_openBlock(), _createElementBlock(\\"p\\", null, [
       _createTextVNode(_toDisplayString(foo), 1 /* TEXT */)
-    ], 512 /* NEED_PATCH */, null, 17 /* ELEMENT, ARRAY_CHILDREN */)), [
+    ], 512 /* NEED_PATCH */)), [
       [_directive_foo]
     ])
   }
@@ -103,7 +103,7 @@ return function render(_ctx, _cache) {
       _createElementVNode(\\"div\\"),
       _createTextVNode(\\"hello\\"),
       _createElementVNode(\\"div\\")
-    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index 315f71eac94..cd53651daca 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createElementBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
@@ -25,8 +25,8 @@ return function render(_ctx, _cache) {
       return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [
         \\"hello\\",
         _createElementVNode(\\"span\\")
-      ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-    }), 128 /* KEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+      ], 64 /* STABLE_FRAGMENT */))
+    }), 128 /* KEYED_FRAGMENT */))
   }
 }"
 `;
@@ -40,7 +40,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
-    }), 128 /* KEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 128 /* KEYED_FRAGMENT */))
   }
 }"
 `;
@@ -54,7 +54,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => {
       return (_openBlock(), _createElementBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
@@ -68,7 +68,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => {
       return (_openBlock(), _createElementBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
@@ -82,7 +82,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => {
       return (_openBlock(), _createElementBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
@@ -98,8 +98,8 @@ return function render(_ctx, _cache) {
       return (_openBlock(), _createElementBlock(_Fragment, null, [
         \\"hello\\",
         _createElementVNode(\\"span\\")
-      ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+      ], 64 /* STABLE_FRAGMENT */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
@@ -116,7 +116,7 @@ return function render(_ctx, _cache) {
         key: item.id,
         id: item.id
       }, null, 8 /* PROPS */, [\\"id\\"]))
-    }), 128 /* KEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 128 /* KEYED_FRAGMENT */))
   }
 }"
 `;
@@ -130,7 +130,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return _renderSlot($slots, \\"default\\")
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
@@ -144,7 +144,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return _renderSlot($slots, \\"default\\")
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
@@ -162,7 +162,7 @@ return function render(_ctx, _cache) {
       return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
         [_directive_foo]
       ])
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
@@ -175,8 +175,8 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
-      return _createElementVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-    }), 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+      return _createElementVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */)
+    }), 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
@@ -191,7 +191,7 @@ return function render(_ctx, _cache) {
     return ok
       ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
           return (_openBlock(), _createElementBlock(\\"div\\"))
-        }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+        }), 256 /* UNKEYED_FRAGMENT */))
       : _createCommentVNode(\\"v-if\\", true)
   }
 }"
@@ -206,8 +206,8 @@ return function render(_ctx, _cache) {
 
     return ok
       ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
-          return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-        }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+          return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */))
+        }), 256 /* UNKEYED_FRAGMENT */))
       : _createCommentVNode(\\"v-if\\", true)
   }
 }"
@@ -222,7 +222,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => {
       return (_openBlock(), _createElementBlock(\\"span\\"))
-    }), 256 /* UNKEYED_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index aca6a109b94..54fc7cbe7b6 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -30,7 +30,7 @@ return function render(_ctx, _cache) {
         : orNot
           ? (_openBlock(), _createElementBlock(\\"p\\", { key: 3 }))
           : (_openBlock(), _createElementBlock(\\"p\\", { key: 4 }))
-    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
@@ -49,7 +49,7 @@ return function render(_ctx, _cache) {
       orNot
         ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
         : _createCommentVNode(\\"v-if\\", true)
-    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
@@ -66,7 +66,7 @@ return function render(_ctx, _cache) {
           _createElementVNode(\\"div\\"),
           \\"hello\\",
           _createElementVNode(\\"p\\")
-        ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+        ], 64 /* STABLE_FRAGMENT */))
       : _createCommentVNode(\\"v-if\\", true)
   }
 }"
@@ -111,7 +111,7 @@ return function render(_ctx, _cache) {
       ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
       : orNot
         ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
-        : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+        : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index 504c97ff9f1..db9e9980f90 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -33,7 +33,7 @@ return function render(_ctx, _cache) {
         _setBlockTracking(1),
         _cache[1]
       )
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -52,7 +52,7 @@ return function render(_ctx, _cache) {
         _setBlockTracking(1),
         _cache[1]
       )
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -71,7 +71,7 @@ return function render(_ctx, _cache) {
         _setBlockTracking(1),
         _cache[1]
       )
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
@@ -90,7 +90,7 @@ return function render(_ctx, _cache) {
         _setBlockTracking(1),
         _cache[1]
       )
-    ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+    ]))
   }
 }"
 `;
diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index 241122ceb60..b5f933ea59a 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -293,7 +293,6 @@ export interface VNodeCall extends Node {
   isBlock: boolean
   disableTracking: boolean
   isComponent: boolean
-  shapeFlag: string | undefined
 }
 
 // JS Node Types ---------------------------------------------------------------
@@ -562,7 +561,6 @@ export function createVNodeCall(
   isBlock: VNodeCall['isBlock'] = false,
   disableTracking: VNodeCall['disableTracking'] = false,
   isComponent: VNodeCall['isComponent'] = false,
-  shapeFlag: VNodeCall['shapeFlag'] = undefined,
   loc = locStub
 ): VNodeCall {
   if (context) {
@@ -588,7 +586,6 @@ export function createVNodeCall(
     isBlock,
     disableTracking,
     isComponent,
-    shapeFlag,
     loc
   }
 }
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 6254883290c..d0ea5d88afc 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -756,7 +756,6 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
     props,
     children,
     patchFlag,
-    shapeFlag,
     dynamicProps,
     directives,
     isBlock,
@@ -777,14 +776,7 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
     : getVNodeHelper(context.inSSR, isComponent)
   push(helper(callHelper) + `(`, node)
   genNodeList(
-    genNullableArgs([
-      tag,
-      props,
-      children,
-      patchFlag,
-      dynamicProps,
-      context.inSSR ? null : shapeFlag
-    ]),
+    genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
     context
   )
   push(`)`)
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 6199fd098ea..e2329b039b1 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -26,9 +26,7 @@ import {
   PatchFlagNames,
   EMPTY_OBJ,
   capitalize,
-  camelize,
-  ShapeFlags,
-  ShapeFlagNames
+  camelize
 } from '@vue/shared'
 import { defaultOnError, defaultOnWarn } from './errors'
 import {
@@ -384,9 +382,7 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
       undefined,
       true,
       undefined,
-      false /* isComponent */,
-      ShapeFlags.ARRAY_CHILDREN +
-        (__DEV__ ? ` /* ${ShapeFlagNames[ShapeFlags.ARRAY_CHILDREN]} */` : ``)
+      false /* isComponent */
     )
   } else {
     // no children = noop. codegen will return null.
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 747aacda567..a726ae1fe35 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -29,9 +29,7 @@ import {
   isObject,
   isReservedProp,
   capitalize,
-  camelize,
-  ShapeFlags,
-  ShapeFlagNames
+  camelize
 } from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import {
@@ -107,14 +105,6 @@ export const transformElement: NodeTransform = (node, context) => {
     let vnodeDynamicProps: VNodeCall['dynamicProps']
     let dynamicPropNames: string[] | undefined
     let vnodeDirectives: VNodeCall['directives']
-    let vnodeShapeFlag: VNodeCall['shapeFlag']
-    let shapeFlag: number = !isComponent
-      ? ShapeFlags.ELEMENT
-      : vnodeTag === TELEPORT
-        ? ShapeFlags.TELEPORT
-        : vnodeTag === SUSPENSE
-          ? ShapeFlags.SUSPENSE
-          : 0
 
     let shouldUseBlock =
       // dynamic component may resolve to plain elements
@@ -199,15 +189,11 @@ export const transformElement: NodeTransform = (node, context) => {
         // (plain / interpolation / expression)
         if (hasDynamicTextChild || type === NodeTypes.TEXT) {
           vnodeChildren = child as TemplateTextChildNode
-          shapeFlag |= ShapeFlags.TEXT_CHILDREN
         } else {
           vnodeChildren = node.children
-          // KeepAlive is a component, but no slot is built for it at compile time
-          vnodeTag !== KEEP_ALIVE && (shapeFlag |= ShapeFlags.ARRAY_CHILDREN)
         }
       } else {
         vnodeChildren = node.children
-        vnodeTag !== KEEP_ALIVE && (shapeFlag |= ShapeFlags.ARRAY_CHILDREN)
       }
     }
 
@@ -234,19 +220,6 @@ export const transformElement: NodeTransform = (node, context) => {
       }
     }
 
-    if (shapeFlag > 1) {
-      if (__DEV__) {
-        // bitwise flags
-        const flagNames = Object.keys(ShapeFlagNames)
-          .map(Number)
-          .filter(n => shapeFlag & n)
-          .map(n => ShapeFlagNames[n])
-          .join(`, `)
-        vnodeShapeFlag = shapeFlag + ` /* ${flagNames} */`
-      } else {
-        vnodeShapeFlag = String(shapeFlag)
-      }
-    }
     node.codegenNode = createVNodeCall(
       context,
       vnodeTag,
@@ -258,7 +231,6 @@ export const transformElement: NodeTransform = (node, context) => {
       !!shouldUseBlock,
       false /* disableTracking */,
       isComponent,
-      vnodeShapeFlag,
       node.loc
     )
   }
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index f9ad1671bfb..a44b724b604 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -39,12 +39,7 @@ import {
 import { RENDER_LIST, OPEN_BLOCK, FRAGMENT } from '../runtimeHelpers'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import {
-  PatchFlags,
-  PatchFlagNames,
-  ShapeFlags,
-  ShapeFlagNames
-} from '@vue/shared'
+import { PatchFlags, PatchFlagNames } from '@vue/shared'
 
 export const transformFor = createStructuralDirectiveTransform(
   'for',
@@ -99,10 +94,6 @@ export const transformFor = createStructuralDirectiveTransform(
         true /* isBlock */,
         !isStableFragment /* disableTracking */,
         false /* isComponent */,
-        ShapeFlags.ARRAY_CHILDREN +
-          (__DEV__
-            ? ` /* ${ShapeFlagNames[ShapeFlags.ARRAY_CHILDREN]} */`
-            : ``),
         node.loc
       ) as ForCodegenNode
 
@@ -165,11 +156,7 @@ export const transformFor = createStructuralDirectiveTransform(
             undefined,
             true,
             undefined,
-            false /* isComponent */,
-            ShapeFlags.ARRAY_CHILDREN +
-              (__DEV__
-                ? ` /* ${ShapeFlagNames[ShapeFlags.ARRAY_CHILDREN]} */`
-                : ``)
+            false /* isComponent */
           )
         } else {
           // Normal element v-for. Directly use the child's codegenNode
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index a75527526be..0ce5c540d82 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -27,11 +27,7 @@ import {
 import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import {
-  FRAGMENT,
-  CREATE_COMMENT,
-  OPEN_BLOCK
-} from '../runtimeHelpers'
+import { FRAGMENT, CREATE_COMMENT, OPEN_BLOCK } from '../runtimeHelpers'
 import {
   injectProp,
   findDir,
@@ -40,12 +36,7 @@ import {
   getVNodeHelper,
   getVNodeBlockHelper
 } from '../utils'
-import {
-  PatchFlags,
-  PatchFlagNames,
-  ShapeFlags,
-  ShapeFlagNames
-} from '@vue/shared'
+import { PatchFlags, PatchFlagNames } from '@vue/shared'
 
 export const transformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
@@ -289,10 +280,6 @@ function createChildrenCodegenNode(
         true,
         false,
         false /* isComponent */,
-        ShapeFlags.ARRAY_CHILDREN +
-          (__DEV__
-            ? ` /* ${ShapeFlagNames[ShapeFlags.ARRAY_CHILDREN]} */`
-            : ``),
         branch.loc
       )
     }
diff --git a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
index ea013174f25..e65442fd36c 100644
--- a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
@@ -12,12 +12,12 @@ return function render(_ctx, _cache) {
         textContent: _toDisplayString(text)
       }, null, 8 /* PROPS */, [\\"textContent\\"]),
       _createElementVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
-      _createElementVNode(\\"div\\", null, \\"test\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */),
-      _createElementVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */),
+      _createElementVNode(\\"div\\", null, \\"test\\"),
+      _createElementVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
       _createElementVNode(\\"div\\", {
         style: _normalizeStyle({color: 'green'})
       }, null, 4 /* STYLE */)
-    ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    ], 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
index 5d808b476a0..5787b08ffda 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
@@ -10,17 +10,17 @@ return function render(_ctx, _cache) {
     return (_openBlock(), _createBlock(_Transition, null, {
       default: _withCtx(() => [
         a
-          ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+          ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\"))
           : b
-            ? (_openBlock(), _createElementBlock(\\"div\\", { key: 1 }, \\"hey\\", null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+            ? (_openBlock(), _createElementBlock(\\"div\\", { key: 1 }, \\"hey\\"))
             : (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }, [
                 c
                   ? (_openBlock(), _createElementBlock(\\"p\\", { key: 0 }))
                   : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
                       _createCommentVNode(\\" this should not be ignored \\"),
                       _createElementVNode(\\"p\\")
-                    ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
-              ], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
+                    ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+              ]))
       ]),
       _: 1 /* STABLE */
     }))
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 9da0eaa3ef7..9fd30a97750 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -238,8 +238,8 @@ return (_ctx, _cache) => {
       ]),
       _: 1 /* STABLE */
     }),
-    _createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+    _createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */)
+  ], 64 /* STABLE_FRAGMENT */))
 }
 }
 
@@ -265,7 +265,7 @@ return (_ctx, _cache) => {
     ]),
     _createVNode(ChildComp),
     _createVNode(SomeOtherComp)
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }
 }
 
@@ -284,7 +284,7 @@ export default {
         const msg = 1
         
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(\\"h1\\", null, _toDisplayString(msg), null, null, 9 /* ELEMENT, TEXT_CHILDREN */))
+  return (_openBlock(), _createElementBlock(\\"h1\\", null, _toDisplayString(msg)))
 }
 }
 
@@ -294,7 +294,7 @@ return (_ctx, _cache) => {
 exports[`SFC compile <script setup> inlineTemplate mode should work 1`] = `
 "import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */, null, 9 /* ELEMENT, TEXT_CHILDREN */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */)
 
 import { ref } from 'vue'
         
@@ -306,9 +306,9 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */, null, 9 /* ELEMENT, TEXT_CHILDREN */),
+    _createElementVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */),
     _hoisted_1
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }
 }
 
@@ -380,7 +380,7 @@ return (_ctx, _cache) => {
     _createElementVNode(\\"div\\", {
       onClick: _cache[5] || (_cache[5] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
     })
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }
 }
 
@@ -412,7 +412,7 @@ return (_ctx, _cache) => {
     _createElementVNode(\\"div\\", {
       onClick: _cache[3] || (_cache[3] = $event => (({ lett: lett } = val)))
     })
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }
 }
 
@@ -452,7 +452,7 @@ return (_ctx, _cache) => {
     _createElementVNode(\\"div\\", {
       onClick: _cache[6] || (_cache[6] = $event => (_isRef(lett) ? --lett.value : --lett))
     })
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }
 }
 
@@ -489,7 +489,7 @@ return (_ctx, _cache) => {
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, _unref(lett)]
     ])
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }
 }
 
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index 89cb5798415..ecc6738450f 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
@@ -66,7 +66,7 @@ export function render(_ctx, _cache) {
     _createElementVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }),
     _createElementVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }),
     _createElementVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" })
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
@@ -82,7 +82,7 @@ export function render(_ctx, _cache) {
     _createElementVNode(\\"img\\", { src: \\"bar.png\\" }),
     _createElementVNode(\\"img\\", { src: _imports_0 }),
     _createElementVNode(\\"img\\", { src: _imports_1 })
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
@@ -97,6 +97,6 @@ export function render(_ctx, _cache) {
     _createElementVNode(\\"img\\", { src: _imports_0 }),
     _createElementVNode(\\"img\\", { src: _imports_1 }),
     _createElementVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" })
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
index 51deeaa34ab..5cc0fe2a957 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
@@ -64,7 +64,7 @@ export function render(_ctx, _cache) {
       src: \\"data:image/png;base64,i\\",
       srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
     })
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
@@ -121,7 +121,7 @@ export function render(_ctx, _cache) {
       src: \\"data:image/png;base64,i\\",
       srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
     })
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
@@ -191,6 +191,6 @@ export function render(_ctx, _cache) {
       src: \\"data:image/png;base64,i\\",
       srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
     })
-  ], 64 /* STABLE_FRAGMENT */, null, 16 /* ARRAY_CHILDREN */))
+  ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index ee228c39838..bf5103f8378 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -371,7 +371,7 @@ function createBaseVNode(
   dynamicProps: string[] | null = null,
   shapeFlag = ShapeFlags.ELEMENT,
   isBlockNode = false,
-  needChildrenNormalization = false
+  needFullChildrenNormalization = false
 ) {
   const vnode = {
     __v_isVNode: true,
@@ -401,12 +401,18 @@ function createBaseVNode(
     appContext: null
   } as VNode
 
-  if (needChildrenNormalization) {
+  if (needFullChildrenNormalization) {
     normalizeChildren(vnode, children)
     // normalize suspense children
     if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
       ;(type as typeof SuspenseImpl).normalize(vnode)
     }
+  } else if (children) {
+    // compiled element vnode - if children is passed, only possible types are
+    // string or Array.
+    vnode.shapeFlag |= isString(children)
+      ? ShapeFlags.TEXT_CHILDREN
+      : ShapeFlags.ARRAY_CHILDREN
   }
 
   // validate key
diff --git a/packages/shared/src/shapeFlags.ts b/packages/shared/src/shapeFlags.ts
index 366b48b6d19..8defb8a3bf3 100644
--- a/packages/shared/src/shapeFlags.ts
+++ b/packages/shared/src/shapeFlags.ts
@@ -11,20 +11,3 @@ export const enum ShapeFlags {
   COMPONENT_KEPT_ALIVE = 1 << 9,
   COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
 }
-
-/**
- * dev only ShapeFlag -> name mapping
- */
-export const ShapeFlagNames = {
-  [ShapeFlags.ELEMENT]: `ELEMENT`,
-  [ShapeFlags.FUNCTIONAL_COMPONENT]: `FUNCTIONAL_COMPONENT`,
-  [ShapeFlags.STATEFUL_COMPONENT]: `STATEFUL_COMPONENT`,
-  [ShapeFlags.TEXT_CHILDREN]: `TEXT_CHILDREN`,
-  [ShapeFlags.ARRAY_CHILDREN]: `ARRAY_CHILDREN`,
-  [ShapeFlags.SLOTS_CHILDREN]: `SLOTS_CHILDREN`,
-  [ShapeFlags.TELEPORT]: `TELEPORT`,
-  [ShapeFlags.SUSPENSE]: `SUSPENSE`,
-  [ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE]: `COMPONENT_SHOULD_KEEP_ALIVE`,
-  [ShapeFlags.COMPONENT_KEPT_ALIVE]: `COMPONENT_KEPT_ALIVE`,
-  [ShapeFlags.COMPONENT]: `COMPONENT`
-}