perf: improve VNode creation performance with compiler hints (#3334)

packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap

@@ -48,12 +48,12 @@ 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\\" })
+      _createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" })
     ], 16)
   }
 }"
@@ -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 */))
   }
 }"
 `;

packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap

@@ -5,21 +5,21 @@ 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, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, 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\\"))
+        : (_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 */)
+      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => {
+        return (_openBlock(), _createElementBlock(\\"div\\", null, [
+          _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ], 2 /* CLASS */))
@@ -28,45 +28,45 @@ return function render(_ctx, _cache) {
 `;
 
 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, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, 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\\"))
+      : (_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 */)
+    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
+      return (_openBlock(), _createElementBlock(\\"div\\", null, [
+        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
       ]))
     }), 256 /* UNKEYED_FRAGMENT */))
   ], 2 /* CLASS */))
 }"
 `;
 
 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, 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(), _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\\"))
+      : (_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 */)
+    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
+      return (_openBlock(), _createElementBlock(\\"div\\", null, [
+        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
       ]))
     }), 256 /* UNKEYED_FRAGMENT */))
   ], 2 /* CLASS */))

packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap

@@ -1,16 +1,16 @@
 // 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 */)
+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) => {
-  return (_openBlock(), _createBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
     _hoisted_1,
     _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
     _hoisted_2
@@ -19,23 +19,23 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
 `;
 
 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, 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(), _createBlock(_component_Child, null, {
     default: _withId(() => [
-      _createVNode(\\"div\\")
+      _createElementVNode(\\"div\\")
     ]),
     _: 1 /* STABLE */
   }))
 })"
 `;
 
 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, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
@@ -46,15 +46,15 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
       ? {
           name: \\"foo\\",
           fn: _withId(() => [
-            _createVNode(\\"div\\")
+            _createElementVNode(\\"div\\")
           ])
         }
       : undefined,
     _renderList(_ctx.list, (i) => {
       return {
         name: i,
         fn: _withId(() => [
-          _createVNode(\\"div\\")
+          _createElementVNode(\\"div\\")
         ])
       }
     })
@@ -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, 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, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
 const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
 
 export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
@@ -74,7 +74,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
       _createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
     ]),
     bar: _withId(() => [
-      _createVNode(\\"div\\")
+      _createElementVNode(\\"div\\")
     ]),
     _: 1 /* STABLE */
   }))

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,43 +659,43 @@ 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)
                "
           `)
     })
 
     test('with props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
         .toMatchInlineSnapshot(`
-              "return _createVNode(\\"div\\", { foo: \\"bar\\" })
+              "return _createElementVNode(\\"div\\", { foo: \\"bar\\" })
                "
           `)
     })
 
     test('with children, no props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
         .toMatchInlineSnapshot(`
-        "return _createVNode(\\"div\\", null, children)
+        "return _createElementVNode(\\"div\\", null, children)
          "
       `)
     })
 
     test('with children + props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
         .toMatchInlineSnapshot(`
-        "return _createVNode(\\"div\\", { foo: \\"bar\\" }, children)
+        "return _createElementVNode(\\"div\\", { foo: \\"bar\\" }, children)
          "
       `)
     })
 
     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]
             ])
          "

packages/compiler-core/__tests__/scopeId.spec.ts

@@ -73,10 +73,10 @@ 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
         )})`,
-        `const _hoisted_2 = /*#__PURE__*/_createVNode("div", null, "world", ${genFlagText(
+        `const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
           PatchFlags.HOISTED
         )})`,
         `_popScopeId()`

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]} */`
   }
 }