diff --git a/package.json b/package.json
index 2e52eb2ef..ab6ad3898 100644
--- a/package.json
+++ b/package.json
@@ -76,8 +76,8 @@
     "@vicons/fluent": "^0.7.0",
     "@vicons/ionicons4": "^0.7.0",
     "@vicons/ionicons5": "^0.7.0",
-    "@vitejs/plugin-vue": "^1.2.0",
-    "@vue/compiler-sfc": "^3.0.9",
+    "@vitejs/plugin-vue": "^1.2.1",
+    "@vue/compiler-sfc": "^3.0.10",
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-rc.4",
@@ -118,7 +118,7 @@
     "vdirs": "^0.1.0",
     "vfonts": "^0.1.0",
     "vooks": "^0.1.5",
-    "vue": "^3.0.9",
+    "vue": "^3.0.10",
     "vue-router": "^4.0.5",
     "vueuc": "^0.3.0"
   },
diff --git a/src/_internal/select-menu/src/SelectMenu.tsx b/src/_internal/select-menu/src/SelectMenu.tsx
index 3dab34e32..d265ede19 100644
--- a/src/_internal/select-menu/src/SelectMenu.tsx
+++ b/src/_internal/select-menu/src/SelectMenu.tsx
@@ -8,7 +8,6 @@ import {
   watch,
   toRef,
   renderSlot,
-  VNode,
   provide,
   reactive
 } from 'vue'
@@ -415,9 +414,7 @@ export default defineComponent({
           </NScrollbar>
         ) : (
           <div class="n-base-select-menu__empty">
-            {renderSlot($slots, 'empty', undefined, () => [
-              (<NEmpty />) as VNode
-            ])}
+            {renderSlot($slots, 'empty', undefined, () => [<NEmpty />])}
           </div>
         )}
         {$slots.action && (
diff --git a/src/auto-complete/src/AutoComplete.tsx b/src/auto-complete/src/AutoComplete.tsx
index b1c78878f..8aa5f8974 100644
--- a/src/auto-complete/src/AutoComplete.tsx
+++ b/src/auto-complete/src/AutoComplete.tsx
@@ -8,7 +8,6 @@ import {
   PropType,
   mergeProps,
   renderSlot,
-  VNode,
   withDirectives,
   CSSProperties
 } from 'vue'
@@ -292,24 +291,20 @@ export default defineComponent({
                         value: this.mergedValue
                       },
                       () => [
-                        (
-                          <NInput
-                            theme={this.mergedTheme.peers.Input}
-                            themeOverrides={
-                              this.mergedTheme.peerOverrides.Input
-                            }
-                            bordered={this.mergedBordered}
-                            value={this.mergedValue}
-                            placeholder={this.placeholder}
-                            size={this.mergedSize}
-                            disabled={this.disabled}
-                            clearable={this.clearable}
-                            onClear={this.handleClear}
-                            onFocus={this.handleFocus}
-                            onUpdateValue={this.handleInput}
-                            onBlur={this.handleBlur}
-                          />
-                        ) as VNode
+                        <NInput
+                          theme={this.mergedTheme.peers.Input}
+                          themeOverrides={this.mergedTheme.peerOverrides.Input}
+                          bordered={this.mergedBordered}
+                          value={this.mergedValue}
+                          placeholder={this.placeholder}
+                          size={this.mergedSize}
+                          disabled={this.disabled}
+                          clearable={this.clearable}
+                          onClear={this.handleClear}
+                          onFocus={this.handleFocus}
+                          onUpdateValue={this.handleInput}
+                          onBlur={this.handleBlur}
+                        />
                       ]
                     )
                   )
@@ -333,25 +328,23 @@ export default defineComponent({
                       default: () =>
                         this.active
                           ? withDirectives(
-                            (
-                              <NInternalSelectMenu
-                                ref="menuInstRef"
-                                theme={
-                                  this.mergedTheme.peers.InternalSelectMenu
-                                }
-                                themeOverrides={
-                                  this.mergedTheme.peerOverrides
-                                    .InternalSelectMenu
-                                }
-                                auto-pending
-                                class="n-auto-complete-menu"
-                                style={this.cssVars as CSSProperties}
-                                treeMate={this.treeMate}
-                                multiple={false}
-                                size="medium"
-                                onMenuToggleOption={this.handleToggleOption}
-                              />
-                            ) as VNode,
+                            <NInternalSelectMenu
+                              ref="menuInstRef"
+                              theme={
+                                this.mergedTheme.peers.InternalSelectMenu
+                              }
+                              themeOverrides={
+                                this.mergedTheme.peerOverrides
+                                  .InternalSelectMenu
+                              }
+                              auto-pending
+                              class="n-auto-complete-menu"
+                              style={this.cssVars as CSSProperties}
+                              treeMate={this.treeMate}
+                              multiple={false}
+                              size="medium"
+                              onMenuToggleOption={this.handleToggleOption}
+                            />,
                             [[clickoutside, this.handleClickOutsideMenu]]
                           )
                           : null
diff --git a/src/back-top/src/BackTop.tsx b/src/back-top/src/BackTop.tsx
index ec127a899..0a0825537 100644
--- a/src/back-top/src/BackTop.tsx
+++ b/src/back-top/src/BackTop.tsx
@@ -9,7 +9,6 @@ import {
   renderSlot,
   mergeProps,
   Transition,
-  VNode,
   PropType,
   onMounted,
   onBeforeUnmount
@@ -286,11 +285,9 @@ export default defineComponent({
                             'default',
                             undefined,
                             () => [
-                              (
-                                <NBaseIcon>
-                                  {{ default: () => BackTopIcon }}
-                                </NBaseIcon>
-                              ) as VNode
+                              <NBaseIcon>
+                                {{ default: () => BackTopIcon }}
+                              </NBaseIcon>
                             ]
                           )
                         ]
diff --git a/src/cascader/src/CascaderMenu.tsx b/src/cascader/src/CascaderMenu.tsx
index 3f8d99b46..f0df1f889 100644
--- a/src/cascader/src/CascaderMenu.tsx
+++ b/src/cascader/src/CascaderMenu.tsx
@@ -8,8 +8,7 @@ import {
   inject,
   nextTick,
   Transition,
-  withDirectives,
-  VNode
+  withDirectives
 } from 'vue'
 import { FollowerPlacement } from 'vueuc'
 import { clickoutside } from 'vdirs'
@@ -103,28 +102,26 @@ export default defineComponent({
           default: () =>
             this.show
               ? withDirectives(
-                (
-                  <div
-                    class="n-cascader-menu"
-                    onMousedown={this.handleMenuMouseDown}
-                  >
-                    {this.menuModel.map((submenuOptions, index) => {
-                      return (
-                        <NCascaderSubmenu
-                          ref={
-                            ((instance: CascaderSubmenuInstance) => {
-                              if (instance) submenuInstRefs[index] = instance
-                            }) as any
-                          }
-                          key={index}
-                          tmNodes={submenuOptions}
-                          depth={index + 1}
-                        />
-                      )
-                    })}
-                    <NBaseMenuMask ref="maskInstRef" />
-                  </div>
-                ) as VNode,
+                <div
+                  class="n-cascader-menu"
+                  onMousedown={this.handleMenuMouseDown}
+                >
+                  {this.menuModel.map((submenuOptions, index) => {
+                    return (
+                      <NCascaderSubmenu
+                        ref={
+                          ((instance: CascaderSubmenuInstance) => {
+                            if (instance) submenuInstRefs[index] = instance
+                          }) as any
+                        }
+                        key={index}
+                        tmNodes={submenuOptions}
+                        depth={index + 1}
+                      />
+                    )
+                  })}
+                  <NBaseMenuMask ref="maskInstRef" />
+                </div>,
                 [[clickoutside, this.handleClickOutside]]
               )
               : null
diff --git a/src/cascader/src/CascaderSelectMenu.tsx b/src/cascader/src/CascaderSelectMenu.tsx
index 3a051d9ac..bfe33aeda 100644
--- a/src/cascader/src/CascaderSelectMenu.tsx
+++ b/src/cascader/src/CascaderSelectMenu.tsx
@@ -5,7 +5,6 @@ import {
   inject,
   toRef,
   defineComponent,
-  VNode,
   PropType,
   computed,
   watch,
@@ -165,21 +164,19 @@ export default defineComponent({
           default: () =>
             this.show
               ? withDirectives(
-                (
-                  <NInternalSelectMenu
-                    ref="menuInstRef"
-                    class="n-cascader-menu"
-                    autoPending
-                    themeOverrides={
-                      NCascader.mergedTheme.peerOverrides.InternalSelectMenu
-                    }
-                    theme={NCascader.mergedTheme.peers.InternalSelectMenu}
-                    treeMate={this.selectTreeMate}
-                    multiple={this.multiple}
-                    value={this.value}
-                    onMenuToggleOption={this.handleToggleOption}
-                  />
-                ) as VNode,
+                <NInternalSelectMenu
+                  ref="menuInstRef"
+                  class="n-cascader-menu"
+                  autoPending
+                  themeOverrides={
+                    NCascader.mergedTheme.peerOverrides.InternalSelectMenu
+                  }
+                  theme={NCascader.mergedTheme.peers.InternalSelectMenu}
+                  treeMate={this.selectTreeMate}
+                  multiple={this.multiple}
+                  value={this.value}
+                  onMenuToggleOption={this.handleToggleOption}
+                />,
                 [[clickoutside, this.handleClickOutside]]
               )
               : null
diff --git a/src/collapse/src/CollapseItem.tsx b/src/collapse/src/CollapseItem.tsx
index 4dfa37d89..c49adb546 100644
--- a/src/collapse/src/CollapseItem.tsx
+++ b/src/collapse/src/CollapseItem.tsx
@@ -1,12 +1,4 @@
-import {
-  h,
-  defineComponent,
-  PropType,
-  inject,
-  computed,
-  renderSlot,
-  VNode
-} from 'vue'
+import { h, defineComponent, PropType, inject, computed, renderSlot } from 'vue'
 import { createId } from 'seemly'
 import { ChevronRightIcon as ArrowIcon } from '../../_internal/icons'
 import { NBaseIcon } from '../../_internal'
@@ -89,9 +81,7 @@ export default defineComponent({
           {arrowPlacement === 'right' && headerNode}
           <div class="n-collapse-item-arrow">
             {renderSlot($slots, 'arrow', { collapsed: collapsed }, () => [
-              (
-                <NBaseIcon>{{ default: () => <ArrowIcon /> }}</NBaseIcon>
-              ) as VNode
+              <NBaseIcon>{{ default: () => <ArrowIcon /> }}</NBaseIcon>
             ])}
           </div>
           {arrowPlacement === 'left' && headerNode}
diff --git a/src/collapse/src/CollapseItemContent.tsx b/src/collapse/src/CollapseItemContent.tsx
index 779f2d587..fb3d46c06 100644
--- a/src/collapse/src/CollapseItemContent.tsx
+++ b/src/collapse/src/CollapseItemContent.tsx
@@ -1,4 +1,4 @@
-import { h, withDirectives, vShow, defineComponent, VNode, toRef } from 'vue'
+import { h, withDirectives, vShow, defineComponent, toRef } from 'vue'
 import { useFalseUntilTruthy } from 'vooks'
 import { NFadeInExpandTransition } from '../../_internal'
 
@@ -22,7 +22,7 @@ export default defineComponent({
               <div class="n-collapse-item__content-wrapper">
                 <div class="n-collapse-item__content-inner">{this.$slots}</div>
               </div>
-            ) as VNode
+            )
             return useVShow
               ? withDirectives(contentNode, [[vShow, show]])
               : show
diff --git a/src/date-picker/src/DatePicker.tsx b/src/date-picker/src/DatePicker.tsx
index 0259e87ba..29dd599ce 100644
--- a/src/date-picker/src/DatePicker.tsx
+++ b/src/date-picker/src/DatePicker.tsx
@@ -8,7 +8,6 @@ import {
   PropType,
   watch,
   withDirectives,
-  VNode,
   ExtractPropTypes,
   CSSProperties,
   reactive,
@@ -595,98 +594,97 @@ export default defineComponent({
       >
         <VBinder>
           {{
-            default: () =>
-              [
-                <VTarget>
-                  {{
-                    default: () =>
-                      this.isRange ? (
-                        <NInput
-                          ref="inputInstRef"
-                          value={[this.displayStartTime, this.displayEndTime]}
-                          placeholder={[
-                            this.localizedStartPlaceholder,
-                            this.localizedEndPlaceholder
-                          ]}
-                          textDecoration={[
-                            this.isStartValueInvalid ? 'line-through' : '',
-                            this.isEndValueInvalid ? 'line-through' : ''
-                          ]}
-                          pair
-                          onUpdateValue={this.handleRangeUpdateValue}
-                          {...commonInputProps}
-                        >
-                          {{
-                            separator: () => (
-                              <NBaseIcon class="n-date-picker-icon">
-                                {{ default: () => <ToIcon /> }}
-                              </NBaseIcon>
-                            ),
-                            clear: () => (
-                              <NBaseIcon class="n-date-picker-icon">
-                                {{ default: () => <DateIcon /> }}
-                              </NBaseIcon>
-                            )
-                          }}
-                        </NInput>
-                      ) : (
-                        <NInput
-                          ref="inputInstRef"
-                          value={this.displayTime}
-                          placeholder={this.localizedPlacehoder}
-                          textDecoration={
-                            this.isValueInvalid && !this.isRange
-                              ? 'line-through'
-                              : ''
-                          }
-                          onUpdateValue={this.handleSingleUpdateValue}
-                          {...commonInputProps}
-                        >
-                          {{
-                            clear: () => (
-                              <NBaseIcon class="n-date-picker-icon">
-                                {{ default: () => <DateIcon /> }}
-                              </NBaseIcon>
-                            )
-                          }}
-                        </NInput>
-                      )
-                  }}
-                </VTarget>,
-                <VFollower
-                  show={this.active}
-                  containerClass={this.namespace}
-                  to={this.adjustedTo}
-                  placement="bottom-start"
-                >
-                  {{
-                    default: () => (
-                      <Transition
-                        name="n-fade-in-scale-up-transition"
-                        appear={this.isMounted}
+            default: () => [
+              <VTarget>
+                {{
+                  default: () =>
+                    this.isRange ? (
+                      <NInput
+                        ref="inputInstRef"
+                        value={[this.displayStartTime, this.displayEndTime]}
+                        placeholder={[
+                          this.localizedStartPlaceholder,
+                          this.localizedEndPlaceholder
+                        ]}
+                        textDecoration={[
+                          this.isStartValueInvalid ? 'line-through' : '',
+                          this.isEndValueInvalid ? 'line-through' : ''
+                        ]}
+                        pair
+                        onUpdateValue={this.handleRangeUpdateValue}
+                        {...commonInputProps}
                       >
                         {{
-                          default: () =>
-                            this.active
-                              ? withDirectives(
-                                (this.type === 'datetime' ? (
-                                  <DatetimePanel {...commonPanelProps} />
-                                ) : this.type === 'daterange' ? (
-                                  <DaterangePanel {...commonPanelProps} />
-                                ) : this.type === 'datetimerange' ? (
-                                  <DatetimerangePanel {...commonPanelProps} />
-                                ) : (
-                                  <DatePanel {...commonPanelProps} />
-                                )) as VNode,
-                                [[clickoutside, this.handleClickOutside]]
-                              )
-                              : null
+                          separator: () => (
+                            <NBaseIcon class="n-date-picker-icon">
+                              {{ default: () => <ToIcon /> }}
+                            </NBaseIcon>
+                          ),
+                          clear: () => (
+                            <NBaseIcon class="n-date-picker-icon">
+                              {{ default: () => <DateIcon /> }}
+                            </NBaseIcon>
+                          )
                         }}
-                      </Transition>
+                      </NInput>
+                    ) : (
+                      <NInput
+                        ref="inputInstRef"
+                        value={this.displayTime}
+                        placeholder={this.localizedPlacehoder}
+                        textDecoration={
+                          this.isValueInvalid && !this.isRange
+                            ? 'line-through'
+                            : ''
+                        }
+                        onUpdateValue={this.handleSingleUpdateValue}
+                        {...commonInputProps}
+                      >
+                        {{
+                          clear: () => (
+                            <NBaseIcon class="n-date-picker-icon">
+                              {{ default: () => <DateIcon /> }}
+                            </NBaseIcon>
+                          )
+                        }}
+                      </NInput>
                     )
-                  }}
-                </VFollower>
-              ] as VNode[]
+                }}
+              </VTarget>,
+              <VFollower
+                show={this.active}
+                containerClass={this.namespace}
+                to={this.adjustedTo}
+                placement="bottom-start"
+              >
+                {{
+                  default: () => (
+                    <Transition
+                      name="n-fade-in-scale-up-transition"
+                      appear={this.isMounted}
+                    >
+                      {{
+                        default: () =>
+                          this.active
+                            ? withDirectives(
+                              this.type === 'datetime' ? (
+                                <DatetimePanel {...commonPanelProps} />
+                              ) : this.type === 'daterange' ? (
+                                <DaterangePanel {...commonPanelProps} />
+                              ) : this.type === 'datetimerange' ? (
+                                <DatetimerangePanel {...commonPanelProps} />
+                              ) : (
+                                <DatePanel {...commonPanelProps} />
+                              ),
+                              [[clickoutside, this.handleClickOutside]]
+                            )
+                            : null
+                      }}
+                    </Transition>
+                  )
+                }}
+              </VFollower>
+            ]
           }}
         </VBinder>
       </div>
diff --git a/src/dialog/src/Dialog.tsx b/src/dialog/src/Dialog.tsx
index 9703a7dc3..85f4a465e 100644
--- a/src/dialog/src/Dialog.tsx
+++ b/src/dialog/src/Dialog.tsx
@@ -5,7 +5,6 @@ import {
   VNodeChild,
   PropType,
   renderSlot,
-  VNode,
   CSSProperties
 } from 'vue'
 import { useConfig, useTheme } from '../../_mixins'
@@ -204,17 +203,11 @@ export default defineComponent({
             <NBaseIcon class="n-dialog__icon">
               {{
                 default: () =>
-                  renderSlot(
-                    $slots,
-                    'icon',
-                    undefined,
-                    () =>
-                      [
-                        this.icon
-                          ? h(render, { render: this.icon })
-                          : iconMap[this.type]
-                      ] as VNode[]
-                  )
+                  renderSlot($slots, 'icon', undefined, () => [
+                    this.icon
+                      ? h(render, { render: this.icon })
+                      : iconMap[this.type]
+                  ])
               }}
             </NBaseIcon>
           </div>
@@ -224,17 +217,11 @@ export default defineComponent({
             <NBaseIcon class="n-dialog__icon">
               {{
                 default: () =>
-                  renderSlot(
-                    $slots,
-                    'icon',
-                    undefined,
-                    () =>
-                      [
-                        this.icon
-                          ? h(render, { render: this.icon })
-                          : iconMap[this.type]
-                      ] as VNode[]
-                  )
+                  renderSlot($slots, 'icon', undefined, () => [
+                    this.icon
+                      ? h(render, { render: this.icon })
+                      : iconMap[this.type]
+                  ])
               }}
             </NBaseIcon>
           ) : null}
@@ -252,42 +239,34 @@ export default defineComponent({
           ])}
         </div>
         <div class="n-dialog__action">
-          {renderSlot(
-            $slots,
-            'action',
-            undefined,
-            () =>
-              [
-                negativeText ? (
-                  <NButton
-                    theme={mergedTheme.peers.Button}
-                    themeOverrides={mergedTheme.peerOverrides.Button}
-                    ghost
-                    size="small"
-                    onClick={handleNegativeClick}
-                  >
-                    {{
-                      default: () =>
-                        h(render, { render: () => this.negativeText })
-                    }}
-                  </NButton>
-                ) : null,
-                <NButton
-                  theme={mergedTheme.peers.Button}
-                  themeOverrides={mergedTheme.peerOverrides.Button}
-                  disabled={loading}
-                  loading={loading}
-                  size="small"
-                  type={type === 'default' ? 'primary' : type}
-                  onClick={handlePositiveClick}
-                >
-                  {{
-                    default: () =>
-                      h(render, { render: () => this.positiveText })
-                  }}
-                </NButton>
-              ] as VNode[]
-          )}
+          {renderSlot($slots, 'action', undefined, () => [
+            negativeText ? (
+              <NButton
+                theme={mergedTheme.peers.Button}
+                themeOverrides={mergedTheme.peerOverrides.Button}
+                ghost
+                size="small"
+                onClick={handleNegativeClick}
+              >
+                {{
+                  default: () => h(render, { render: () => this.negativeText })
+                }}
+              </NButton>
+            ) : null,
+            <NButton
+              theme={mergedTheme.peers.Button}
+              themeOverrides={mergedTheme.peerOverrides.Button}
+              disabled={loading}
+              loading={loading}
+              size="small"
+              type={type === 'default' ? 'primary' : type}
+              onClick={handlePositiveClick}
+            >
+              {{
+                default: () => h(render, { render: () => this.positiveText })
+              }}
+            </NButton>
+          ])}
         </div>
       </div>
     )
diff --git a/src/drawer/src/Drawer.tsx b/src/drawer/src/Drawer.tsx
index f3ea9a956..f6be29ea1 100644
--- a/src/drawer/src/Drawer.tsx
+++ b/src/drawer/src/Drawer.tsx
@@ -7,7 +7,6 @@ import {
   CSSProperties,
   reactive,
   withDirectives,
-  VNode,
   Transition
 } from 'vue'
 import { VLazyTeleport } from 'vueuc'
@@ -198,39 +197,34 @@ export default defineComponent({
         {{
           default: () => {
             return withDirectives(
-              (
-                <div
-                  class={['n-drawer-container', this.namespace]}
-                  style={this.cssVars as CSSProperties}
+              <div
+                class={['n-drawer-container', this.namespace]}
+                style={this.cssVars as CSSProperties}
+              >
+                <Transition name="n-fade-in-transition" appear={this.isMounted}>
+                  {{
+                    default: () =>
+                      this.show ? (
+                        <div
+                          class="n-drawer-mask"
+                          onClick={this.handleMaskClick}
+                        />
+                      ) : null
+                  }}
+                </Transition>
+                <NDrawerBodyWrapper
+                  {...this.$attrs}
+                  class={[this.drawerClass, this.$attrs.class]}
+                  style={this.mergedBodyStyle as any}
+                  placement={this.placement}
+                  scrollbarProps={this.scrollbarProps}
+                  show={this.show}
+                  displayDirective={this.displayDirective}
+                  nativeScrollbar={this.nativeScrollbar}
                 >
-                  <Transition
-                    name="n-fade-in-transition"
-                    appear={this.isMounted}
-                  >
-                    {{
-                      default: () =>
-                        this.show ? (
-                          <div
-                            class="n-drawer-mask"
-                            onClick={this.handleMaskClick}
-                          />
-                        ) : null
-                    }}
-                  </Transition>
-                  <NDrawerBodyWrapper
-                    {...this.$attrs}
-                    class={[this.drawerClass, this.$attrs.class]}
-                    style={this.mergedBodyStyle as any}
-                    placement={this.placement}
-                    scrollbarProps={this.scrollbarProps}
-                    show={this.show}
-                    displayDirective={this.displayDirective}
-                    nativeScrollbar={this.nativeScrollbar}
-                  >
-                    {this.$slots}
-                  </NDrawerBodyWrapper>
-                </div>
-              ) as VNode,
+                  {this.$slots}
+                </NDrawerBodyWrapper>
+              </div>,
               [[zindexable, { enabled: this.show }]]
             )
           }
diff --git a/src/drawer/src/DrawerBodyWrapper.tsx b/src/drawer/src/DrawerBodyWrapper.tsx
index 1521abea2..52e6f330a 100644
--- a/src/drawer/src/DrawerBodyWrapper.tsx
+++ b/src/drawer/src/DrawerBodyWrapper.tsx
@@ -11,7 +11,6 @@ import {
   PropType,
   withDirectives,
   vShow,
-  VNode,
   renderSlot,
   mergeProps
 } from 'vue'
@@ -88,53 +87,51 @@ export default defineComponent({
     const { NDrawer, $slots } = this
     return this.displayDirective === 'show' || this.displayed || this.show
       ? withDirectives(
-        (
-          <div>
-            {/* Keep the wrapper dom. Make sure the drawer has a host.
+        <div>
+          {/* Keep the wrapper dom. Make sure the drawer has a host.
             Nor the detached content will disappear without transition */}
-            <Transition
-              name={this.transitionName}
-              appear={this.NDrawer.isMounted}
-              onAfterLeave={this.handleAfterLeave}
-            >
-              {{
-                default: () =>
-                  withDirectives(
-                    h(
-                      'div',
-                      mergeProps(this.$attrs, {
-                        ref: 'bodyRef',
-                        class: [
-                          'n-drawer',
-                            `n-drawer--${this.placement}-placement`,
-                            {
-                              'n-drawer--native-scrollbar': this.nativeScrollbar
-                            }
-                        ]
-                      }),
-                      [
-                        this.nativeScrollbar ? (
-                          renderSlot($slots, 'default')
-                        ) : (
-                          <NScrollbar
-                            {...this.scrollbarProps}
-                            contentClass="n-drawer-scroll-content"
-                            theme={NDrawer.mergedTheme.peers.Scrollbar}
-                            themeOverrides={
-                              NDrawer.mergedTheme.peerOverrides.Scrollbar
-                            }
-                          >
-                            {$slots}
-                          </NScrollbar>
-                        )
-                      ] as VNode[]
-                    ),
-                    [[vShow, this.show]]
-                  )
-              }}
-            </Transition>
-          </div>
-        ) as VNode,
+          <Transition
+            name={this.transitionName}
+            appear={this.NDrawer.isMounted}
+            onAfterLeave={this.handleAfterLeave}
+          >
+            {{
+              default: () =>
+                withDirectives(
+                  h(
+                    'div',
+                    mergeProps(this.$attrs, {
+                      ref: 'bodyRef',
+                      class: [
+                        'n-drawer',
+                          `n-drawer--${this.placement}-placement`,
+                          {
+                            'n-drawer--native-scrollbar': this.nativeScrollbar
+                          }
+                      ]
+                    }),
+                    [
+                      this.nativeScrollbar ? (
+                        renderSlot($slots, 'default')
+                      ) : (
+                        <NScrollbar
+                          {...this.scrollbarProps}
+                          contentClass="n-drawer-scroll-content"
+                          theme={NDrawer.mergedTheme.peers.Scrollbar}
+                          themeOverrides={
+                            NDrawer.mergedTheme.peerOverrides.Scrollbar
+                          }
+                        >
+                          {$slots}
+                        </NScrollbar>
+                      )
+                    ]
+                  ),
+                  [[vShow, this.show]]
+                )
+            }}
+          </Transition>
+        </div>,
         [
           [
             vShow,
diff --git a/src/dynamic-input/src/DynamicInput.tsx b/src/dynamic-input/src/DynamicInput.tsx
index 046d7e0af..c461f2a9d 100644
--- a/src/dynamic-input/src/DynamicInput.tsx
+++ b/src/dynamic-input/src/DynamicInput.tsx
@@ -11,8 +11,7 @@ import {
   inject,
   CSSProperties,
   provide,
-  reactive,
-  VNode
+  reactive
 } from 'vue'
 import { useMergedState } from 'vooks'
 import { createId } from 'seemly'
@@ -314,40 +313,39 @@ export default defineComponent({
               <div class="n-dynamic-input-item__action">
                 <NButtonGroup size={buttonSize}>
                   {{
-                    default: () =>
-                      [
-                        !this.removeDisabled ? (
-                          <NButton
-                            theme={mergedTheme.peers.Button}
-                            themeOverrides={mergedTheme.peerOverrides.Button}
-                            circle
-                            onClick={() => remove(index)}
-                          >
-                            {{
-                              icon: () => (
-                                <NBaseIcon>
-                                  {{ default: () => <RemoveIcon /> }}
-                                </NBaseIcon>
-                              )
-                            }}
-                          </NButton>
-                        ) : null,
+                    default: () => [
+                      !this.removeDisabled ? (
                         <NButton
-                          disabled={this.insertionDisabled}
-                          circle
                           theme={mergedTheme.peers.Button}
                           themeOverrides={mergedTheme.peerOverrides.Button}
-                          onClick={() => createItem(index)}
+                          circle
+                          onClick={() => remove(index)}
                         >
                           {{
                             icon: () => (
                               <NBaseIcon>
-                                {{ default: () => <AddIcon /> }}
+                                {{ default: () => <RemoveIcon /> }}
                               </NBaseIcon>
                             )
                           }}
                         </NButton>
-                      ] as VNode[]
+                      ) : null,
+                      <NButton
+                        disabled={this.insertionDisabled}
+                        circle
+                        theme={mergedTheme.peers.Button}
+                        themeOverrides={mergedTheme.peerOverrides.Button}
+                        onClick={() => createItem(index)}
+                      >
+                        {{
+                          icon: () => (
+                            <NBaseIcon>
+                              {{ default: () => <AddIcon /> }}
+                            </NBaseIcon>
+                          )
+                        }}
+                      </NButton>
+                    ]
                   }}
                 </NButtonGroup>
               </div>
diff --git a/src/empty/src/Empty.tsx b/src/empty/src/Empty.tsx
index 24f8f4e1a..07bc786b0 100644
--- a/src/empty/src/Empty.tsx
+++ b/src/empty/src/Empty.tsx
@@ -4,8 +4,7 @@ import {
   computed,
   PropType,
   CSSProperties,
-  renderSlot,
-  VNode
+  renderSlot
 } from 'vue'
 import { EmptyIcon } from '../../_internal/icons'
 import { useLocale, useTheme } from '../../_mixins'
@@ -69,7 +68,7 @@ export default defineComponent({
       <div class="n-empty" style={this.cssVars as CSSProperties}>
         <div class="n-empty__icon">
           {renderSlot($slots, 'icon', undefined, () => [
-            (<NBaseIcon>{{ default: () => <EmptyIcon /> }}</NBaseIcon>) as VNode
+            <NBaseIcon>{{ default: () => <EmptyIcon /> }}</NBaseIcon>
           ])}
         </div>
         {this.showDescription ? (
diff --git a/src/loading-bar/src/LoadingBar.tsx b/src/loading-bar/src/LoadingBar.tsx
index 3987a7192..be9d20075 100644
--- a/src/loading-bar/src/LoadingBar.tsx
+++ b/src/loading-bar/src/LoadingBar.tsx
@@ -6,7 +6,6 @@ import {
   inject,
   withDirectives,
   vShow,
-  VNode,
   CSSProperties,
   ref,
   nextTick
@@ -153,21 +152,13 @@ export default defineComponent({
         {{
           default: () =>
             withDirectives(
-              h(
-                'div',
-                {
-                  class: 'n-loading-bar-container'
-                },
-                [
-                  (
-                    <div
-                      ref="loadingBarRef"
-                      class="n-loading-bar"
-                      style={this.cssVars as CSSProperties}
-                    />
-                  ) as VNode
-                ]
-              ),
+              <div class="n-loading-bar-container">
+                <div
+                  ref="loadingBarRef"
+                  class="n-loading-bar"
+                  style={this.cssVars as CSSProperties}
+                />
+              </div>,
               [[vShow, this.loading || (!this.loading && this.entering)]]
             )
         }}
diff --git a/src/log/src/Log.tsx b/src/log/src/Log.tsx
index 017bab0d2..1ddea7cff 100644
--- a/src/log/src/Log.tsx
+++ b/src/log/src/Log.tsx
@@ -3,7 +3,6 @@ import {
   Transition,
   defineComponent,
   computed,
-  VNode,
   provide,
   PropType,
   nextTick,
@@ -272,7 +271,7 @@ export default defineComponent({
         <Transition name="n-fade-in-scale-up-transition">
           {{ default: () => (this.loading ? <NLogLoader /> : null) }}
         </Transition>
-      ] as VNode[]
+      ]
     )
   }
 })
diff --git a/src/modal/src/BodyWrapper.tsx b/src/modal/src/BodyWrapper.tsx
index 25aad388d..020defb2e 100644
--- a/src/modal/src/BodyWrapper.tsx
+++ b/src/modal/src/BodyWrapper.tsx
@@ -184,68 +184,66 @@ export default defineComponent({
     }
     return this.displayDirective === 'show' || this.displayed || this.show
       ? withDirectives(
-        (
-          <div class="n-modal-body-wrapper">
-            <NScrollbar
-              ref="scrollbarRef"
-              theme={NModal.mergedTheme.peers.Scrollbar}
-              themeOverrides={NModal.mergedTheme.peerOverrides.Scrollbar}
-              contentClass="n-modal-scroll-content"
-            >
-              {{
-                default: () => (
-                  <Transition
-                    name="n-fade-in-scale-up-transition"
-                    appear={NModal.appear ?? NModal.isMounted}
-                    onEnter={handleEnter as any}
-                    onAfterLeave={handleAfterLeave}
-                    onBeforeLeave={handleBeforeLeave as any}
-                  >
-                    {{
-                      default: () =>
-                        withDirectives(
-                          (this.preset === 'confirm' ||
-                            this.preset === 'dialog' ? (
-                              <NDialog
-                                {...this.$attrs}
-                                class="n-modal"
-                                ref="bodyRef"
-                                theme={NModal.mergedTheme.peers.Dialog}
-                                themeOverrides={
-                                  NModal.mergedTheme.peerOverrides.Dialog
-                                }
-                                {...keep(this.$props, dialogPropKeys)}
-                              >
-                                {$slots}
-                              </NDialog>
-                            ) : this.preset === 'card' ? (
-                              <NCard
-                                {...this.$attrs}
-                                ref="bodyRef"
-                                class="n-modal"
-                                theme={NModal.mergedTheme.peers.Card}
-                                themeOverrides={
-                                  NModal.mergedTheme.peerOverrides.Card
-                                }
-                                {...keep(this.$props, cardPropKeys)}
-                              >
-                                {$slots}
-                              </NCard>
-                            ) : (
-                              childNode
-                            )) as any,
-                          [
-                            [vShow, this.show],
-                            [clickoutside, handleClickOutside]
-                          ]
-                        )
-                    }}
-                  </Transition>
-                )
-              }}
-            </NScrollbar>
-          </div>
-        ) as VNode,
+        <div class="n-modal-body-wrapper">
+          <NScrollbar
+            ref="scrollbarRef"
+            theme={NModal.mergedTheme.peers.Scrollbar}
+            themeOverrides={NModal.mergedTheme.peerOverrides.Scrollbar}
+            contentClass="n-modal-scroll-content"
+          >
+            {{
+              default: () => (
+                <Transition
+                  name="n-fade-in-scale-up-transition"
+                  appear={NModal.appear ?? NModal.isMounted}
+                  onEnter={handleEnter as any}
+                  onAfterLeave={handleAfterLeave}
+                  onBeforeLeave={handleBeforeLeave as any}
+                >
+                  {{
+                    default: () =>
+                      withDirectives(
+                        (this.preset === 'confirm' ||
+                          this.preset === 'dialog' ? (
+                            <NDialog
+                              {...this.$attrs}
+                              class="n-modal"
+                              ref="bodyRef"
+                              theme={NModal.mergedTheme.peers.Dialog}
+                              themeOverrides={
+                                NModal.mergedTheme.peerOverrides.Dialog
+                              }
+                              {...keep(this.$props, dialogPropKeys)}
+                            >
+                              {$slots}
+                            </NDialog>
+                          ) : this.preset === 'card' ? (
+                            <NCard
+                              {...this.$attrs}
+                              ref="bodyRef"
+                              class="n-modal"
+                              theme={NModal.mergedTheme.peers.Card}
+                              themeOverrides={
+                                NModal.mergedTheme.peerOverrides.Card
+                              }
+                              {...keep(this.$props, cardPropKeys)}
+                            >
+                              {$slots}
+                            </NCard>
+                          ) : (
+                            childNode
+                          )) as any,
+                        [
+                          [vShow, this.show],
+                          [clickoutside, handleClickOutside]
+                        ]
+                      )
+                  }}
+                </Transition>
+              )
+            }}
+          </NScrollbar>
+        </div>,
         [
           [
             vShow,
diff --git a/src/popconfirm/src/PopconfirmPanel.tsx b/src/popconfirm/src/PopconfirmPanel.tsx
index 208bc610d..27b2315ec 100644
--- a/src/popconfirm/src/PopconfirmPanel.tsx
+++ b/src/popconfirm/src/PopconfirmPanel.tsx
@@ -5,7 +5,6 @@ import {
   inject,
   PropType,
   renderSlot,
-  VNode,
   CSSProperties
 } from 'vue'
 import { NButton } from '../../button'
@@ -84,24 +83,18 @@ export default defineComponent({
           {renderSlot(this.$slots, 'default')}
         </div>
         <div class="n-popconfirm__action">
-          {renderSlot(
-            this.$slots,
-            'action',
-            undefined,
-            () =>
-              [
-                <NButton size="small" onClick={this.handleNegativeClick}>
-                  {this.localizedNegativeText}
-                </NButton>,
-                <NButton
-                  size="small"
-                  type="primary"
-                  onClick={this.handlePositiveClick}
-                >
-                  {this.localizedPositiveText}
-                </NButton>
-              ] as VNode[]
-          )}
+          {renderSlot(this.$slots, 'action', undefined, () => [
+            <NButton size="small" onClick={this.handleNegativeClick}>
+              {this.localizedNegativeText}
+            </NButton>,
+            <NButton
+              size="small"
+              type="primary"
+              onClick={this.handlePositiveClick}
+            >
+              {this.localizedPositiveText}
+            </NButton>
+          ])}
         </div>
       </div>
     )
diff --git a/src/popover/src/Popover.ts b/src/popover/src/Popover.ts
index 84fb392c8..05fc26ea1 100644
--- a/src/popover/src/Popover.ts
+++ b/src/popover/src/Popover.ts
@@ -217,9 +217,9 @@ export default defineComponent({
       return compatibleShowArrowRef.value
     })
     // trigger
-    let triggerVNode = null as VNode | null
+    let triggerVNode: VNode | null = null
     // bodyInstance
-    let bodyInstance = null as BodyInstance | null
+    let bodyInstance: BodyInstance | null = null
     const showTimerIdRef = ref<number | null>(null)
     const hideTimerIdRef = ref<number | null>(null)
     const positionManuallyRef = useMemo(() => {
diff --git a/src/rate/src/Rate.tsx b/src/rate/src/Rate.tsx
index d1f678bb9..8e10e472a 100644
--- a/src/rate/src/Rate.tsx
+++ b/src/rate/src/Rate.tsx
@@ -5,7 +5,6 @@ import {
   computed,
   defineComponent,
   renderList,
-  VNode,
   PropType,
   CSSProperties
 } from 'vue'
@@ -104,28 +103,24 @@ export default defineComponent({
         style={this.cssVars as CSSProperties}
         onMouseleave={this.handleMouseLeave}
       >
-        {renderList(
-          this.count,
-          (_, index) =>
-            (
-              <div
-                key={index}
-                class={[
-                  'n-rate__item',
-                  {
-                    'n-rate__item--active':
-                      hoverIndex !== null
-                        ? index <= hoverIndex
-                        : index < mergedValue
-                  }
-                ]}
-                onClick={() => this.handleClick(index)}
-                onMouseenter={() => this.handleMouseEnter(index)}
-              >
-                <NBaseIcon>{{ default: () => StarIcon }}</NBaseIcon>
-              </div>
-            ) as VNode
-        )}
+        {renderList(this.count, (_, index) => (
+          <div
+            key={index}
+            class={[
+              'n-rate__item',
+              {
+                'n-rate__item--active':
+                  hoverIndex !== null
+                    ? index <= hoverIndex
+                    : index < mergedValue
+              }
+            ]}
+            onClick={() => this.handleClick(index)}
+            onMouseenter={() => this.handleMouseEnter(index)}
+          >
+            <NBaseIcon>{{ default: () => StarIcon }}</NBaseIcon>
+          </div>
+        ))}
       </div>
     )
   }
diff --git a/src/scrollbar/src/ScrollBar.tsx b/src/scrollbar/src/ScrollBar.tsx
index a8a8d3746..54eb43b8b 100644
--- a/src/scrollbar/src/ScrollBar.tsx
+++ b/src/scrollbar/src/ScrollBar.tsx
@@ -9,7 +9,6 @@ import {
   mergeProps,
   renderSlot,
   Transition,
-  VNode,
   ExtractPropTypes,
   CSSProperties
 } from 'vue'
@@ -650,7 +649,7 @@ export default defineComponent({
                     }}
                   </Transition>
                 </div>
-              ] as VNode[]
+              ]
             )
         }}
       </VResizeObserver>
diff --git a/src/time-picker/src/Panel.tsx b/src/time-picker/src/Panel.tsx
index 66bd4822f..9fb69a692 100644
--- a/src/time-picker/src/Panel.tsx
+++ b/src/time-picker/src/Panel.tsx
@@ -1,4 +1,4 @@
-import { h, ref, defineComponent, inject, PropType, computed, VNode } from 'vue'
+import { h, ref, defineComponent, inject, PropType, computed } from 'vue'
 import { NScrollbar } from '../../scrollbar'
 import { NButton } from '../../button'
 import { NBaseFocusDetector } from '../../_internal'
@@ -263,7 +263,7 @@ export default defineComponent({
           </NButton>
         </div>,
         <NBaseFocusDetector onFocus={this.onFocusDetectorFocus} />
-      ] as VNode[]
+      ]
     )
   }
 })
diff --git a/src/time-picker/src/TimePicker.tsx b/src/time-picker/src/TimePicker.tsx
index 92deda994..336af343c 100644
--- a/src/time-picker/src/TimePicker.tsx
+++ b/src/time-picker/src/TimePicker.tsx
@@ -10,7 +10,6 @@ import {
   provide,
   nextTick,
   watch,
-  VNode,
   CSSProperties,
   reactive
 } from 'vue'
@@ -645,38 +644,36 @@ export default defineComponent({
                         default: () =>
                           this.active
                             ? withDirectives(
-                              (
-                                <Panel
-                                  ref="panelInstRef"
-                                  style={this.cssVars as CSSProperties}
-                                  transitionDisabled={this.transitionDisabled}
-                                  hourValue={this.hourValue}
-                                  showHour={this.hourInFormat}
-                                  isHourInvalid={this.isHourInvalid}
-                                  isHourDisabled={this.isHourDisabled}
-                                  minuteValue={this.minuteValue}
-                                  showMinute={this.minuteInFormat}
-                                  isMinuteInvalid={this.isMinuteInvalid}
-                                  isMinuteDisabled={this.isMinuteDisabled}
-                                  secondValue={this.secondValue}
-                                  showSecond={this.secondInFormat}
-                                  isSecondInvalid={this.isSecondInvalid}
-                                  isSecondDisabled={this.isSecondDisabled}
-                                  isValueInvalid={this.isValueInvalid}
-                                  nowText={this.localizedNow}
-                                  confirmText={this.localizedPositiveText}
-                                  onFocusout={this.handleMenuFocusOut}
-                                  onKeydown={this.handleMenuKeyDown}
-                                  onHourClick={this.handleHourClick}
-                                  onMinuteClick={this.handleMinuteClick}
-                                  onSecondClick={this.handleSecondClick}
-                                  onNowClick={this.handleNowClick}
-                                  onConfirmClick={this.handleConfirmClick}
-                                  onFocusDetectorFocus={
-                                    this.handleFocusDetectorFocus
-                                  }
-                                />
-                              ) as VNode,
+                              <Panel
+                                ref="panelInstRef"
+                                style={this.cssVars as CSSProperties}
+                                transitionDisabled={this.transitionDisabled}
+                                hourValue={this.hourValue}
+                                showHour={this.hourInFormat}
+                                isHourInvalid={this.isHourInvalid}
+                                isHourDisabled={this.isHourDisabled}
+                                minuteValue={this.minuteValue}
+                                showMinute={this.minuteInFormat}
+                                isMinuteInvalid={this.isMinuteInvalid}
+                                isMinuteDisabled={this.isMinuteDisabled}
+                                secondValue={this.secondValue}
+                                showSecond={this.secondInFormat}
+                                isSecondInvalid={this.isSecondInvalid}
+                                isSecondDisabled={this.isSecondDisabled}
+                                isValueInvalid={this.isValueInvalid}
+                                nowText={this.localizedNow}
+                                confirmText={this.localizedPositiveText}
+                                onFocusout={this.handleMenuFocusOut}
+                                onKeydown={this.handleMenuKeyDown}
+                                onHourClick={this.handleHourClick}
+                                onMinuteClick={this.handleMinuteClick}
+                                onSecondClick={this.handleSecondClick}
+                                onNowClick={this.handleNowClick}
+                                onConfirmClick={this.handleConfirmClick}
+                                onFocusDetectorFocus={
+                                  this.handleFocusDetectorFocus
+                                }
+                              />,
                               [[clickoutside, this.handleClickOutside]]
                             )
                             : null
diff --git a/themes/tusimple/src/data-table.tsx b/themes/tusimple/src/data-table.tsx
index d57b891fb..20c47b415 100644
--- a/themes/tusimple/src/data-table.tsx
+++ b/themes/tusimple/src/data-table.tsx
@@ -1,4 +1,4 @@
-import { h, VNode } from 'vue'
+import { h } from 'vue'
 import { CaretUpOutline, CaretDownOutline } from '@vicons/ionicons5'
 import { colors } from './theme-overrides-light'
 import { GRAY_COLOR_4 } from './vars'
@@ -80,5 +80,5 @@ export const renderFilter: DataTableRenderFilter = ({ active, show }) => {
         </g>
       </svg>
     </div>
-  ) as VNode
+  )
 }
diff --git a/themes/tusimple/src/icons.tsx b/themes/tusimple/src/icons.tsx
index 55c3b8535..62fd06818 100644
--- a/themes/tusimple/src/icons.tsx
+++ b/themes/tusimple/src/icons.tsx
@@ -176,35 +176,35 @@ const toIcon = (
 )
 
 function clear (): VNode {
-  return clearIcon as VNode
+  return clearIcon
 }
 
 function success (): VNode {
-  return successIcon as VNode
+  return successIcon
 }
 
 function warning (): VNode {
-  return warningIcon as VNode
+  return warningIcon
 }
 
 function error (): VNode {
-  return errorIcon as VNode
+  return errorIcon
 }
 
 function attach (): VNode {
-  return attachIcon as VNode
+  return attachIcon
 }
 
 function trash (): VNode {
-  return trashIcon as VNode
+  return trashIcon
 }
 
 function cancel (): VNode {
-  return cancelIcon as VNode
+  return cancelIcon
 }
 
 function to (): VNode {
-  return toIcon as VNode
+  return toIcon
 }
 
 export const icons = {