diff --git a/src/action-bar-button/ActionBarButton.tsx b/src/action-bar-button/ActionBarButton.tsx
index ffa3edbcf..f5bcdf920 100644
--- a/src/action-bar-button/ActionBarButton.tsx
+++ b/src/action-bar-button/ActionBarButton.tsx
@@ -1,5 +1,5 @@
 import { computed, PropType, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { extend, createNamespace } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
 // Composables
@@ -15,15 +15,14 @@ const [name, bem] = createNamespace('action-bar-button');
 export default defineComponent({
   name,
 
-  props: {
-    ...routeProps,
+  props: extend({}, routeProps, {
     type: String as PropType<ButtonType>,
     text: String,
     icon: String,
     color: String,
     loading: Boolean,
     disabled: Boolean,
-  },
+  }),
 
   setup(props, { slots }) {
     const route = useRoute();
diff --git a/src/action-bar-icon/ActionBarIcon.tsx b/src/action-bar-icon/ActionBarIcon.tsx
index 17f3cef19..b36603564 100644
--- a/src/action-bar-icon/ActionBarIcon.tsx
+++ b/src/action-bar-icon/ActionBarIcon.tsx
@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { createNamespace, UnknownProp } from '../utils';
+import { extend, createNamespace, UnknownProp } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
 // Composables
@@ -15,15 +15,14 @@ const [name, bem] = createNamespace('action-bar-icon');
 export default defineComponent({
   name,
 
-  props: {
-    ...routeProps,
+  props: extend({}, routeProps, {
     dot: Boolean,
     text: String,
     icon: String,
     color: String,
     badge: [Number, String],
     iconClass: UnknownProp,
-  },
+  }),
 
   setup(props, { slots }) {
     const route = useRoute();
diff --git a/src/action-sheet/ActionSheet.tsx b/src/action-sheet/ActionSheet.tsx
index d22b0ec17..b98d0ac84 100644
--- a/src/action-sheet/ActionSheet.tsx
+++ b/src/action-sheet/ActionSheet.tsx
@@ -1,7 +1,7 @@
 import { nextTick, PropType, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, pick } from '../utils';
+import { pick, extend, createNamespace } from '../utils';
 
 // Components
 import { Icon } from '../icon';
@@ -24,8 +24,7 @@ export type ActionSheetAction = {
 export default defineComponent({
   name,
 
-  props: {
-    ...popupSharedProps,
+  props: extend({}, popupSharedProps, {
     title: String,
     actions: Array as PropType<ActionSheetAction[]>,
     cancelText: String,
@@ -48,7 +47,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-  },
+  }),
 
   emits: ['select', 'cancel', 'update:show'],
 
@@ -157,10 +156,8 @@ export default defineComponent({
         round={props.round}
         position="bottom"
         safeAreaInsetBottom={props.safeAreaInsetBottom}
-        {...{
-          ...pick(props, popupSharedPropKeys),
-          'onUpdate:show': updateShow,
-        }}
+        {...pick(props, popupSharedPropKeys)}
+        {...{ 'onUpdate:show': updateShow }}
       >
         {renderHeader()}
         {renderDescription()}
diff --git a/src/address-edit/AddressEdit.tsx b/src/address-edit/AddressEdit.tsx
index 3a45dcfba..bccf86645 100644
--- a/src/address-edit/AddressEdit.tsx
+++ b/src/address-edit/AddressEdit.tsx
@@ -10,6 +10,7 @@ import {
 
 // Utils
 import {
+  extend,
   isObject,
   isMobile,
   createNamespace,
@@ -100,7 +101,7 @@ export default defineComponent({
     },
     addressInfo: {
       type: Object as PropType<Partial<AddressEditInfo>>,
-      default: () => ({ ...defaultData }),
+      default: () => extend({}, defaultData),
     },
     telValidator: {
       type: Function as PropType<(val: string) => boolean>,
@@ -321,10 +322,7 @@ export default defineComponent({
     watch(
       () => props.addressInfo,
       (value) => {
-        state.data = {
-          ...defaultData,
-          ...value,
-        };
+        state.data = extend({}, defaultData, value);
         setAreaCode(value.areaCode);
       },
       {
diff --git a/src/address-list/AddressListItem.tsx b/src/address-list/AddressListItem.tsx
index 6d00fcb5c..02195bde6 100644
--- a/src/address-list/AddressListItem.tsx
+++ b/src/address-list/AddressListItem.tsx
@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, extend } from '../utils';
 
 // Components
 import { Tag } from '../tag';
@@ -102,7 +102,7 @@ export default defineComponent({
             border={false}
             valueClass={bem('value')}
           />
-          {slots.bottom?.({ ...props.address, disabled })}
+          {slots.bottom?.(extend({}, props.address, { disabled }))}
         </div>
       );
     };
diff --git a/src/area/Area.tsx b/src/area/Area.tsx
index 0be1b61e8..43243d25e 100644
--- a/src/area/Area.tsx
+++ b/src/area/Area.tsx
@@ -12,7 +12,7 @@ import {
 
 // Utils
 import { deepClone } from '../utils/deep-clone';
-import { pick, createNamespace, ComponentInstance } from '../utils';
+import { pick, createNamespace, ComponentInstance, extend } from '../utils';
 import { pickerProps } from '../picker/Picker';
 
 // Composables
@@ -45,8 +45,7 @@ type ColumnType = 'province' | 'county' | 'city';
 export default defineComponent({
   name,
 
-  props: {
-    ...pickerProps,
+  props: extend({}, pickerProps, {
     value: String,
     areaList: {
       type: Object as PropType<AreaList>,
@@ -64,7 +63,7 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       default: () => [],
     },
-  },
+  }),
 
   emits: ['change', 'confirm'],
 
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index f47d7e077..8c4e1800a 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -6,7 +6,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, extend } from '../utils';
 import { BORDER_SURROUND } from '../utils/constant';
 import { useRoute, routeProps } from '../composables/use-route';
 
@@ -28,8 +28,7 @@ export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
 export default defineComponent({
   name,
 
-  props: {
-    ...routeProps,
+  props: extend({}, routeProps, {
     text: String,
     icon: String,
     color: String,
@@ -64,7 +63,7 @@ export default defineComponent({
       type: String as PropType<'left' | 'right'>,
       default: 'left',
     },
-  },
+  }),
 
   emits: ['click'],
 
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index 28dc16c8e..c5e2226ac 100644
--- a/src/cascader/Cascader.tsx
+++ b/src/cascader/Cascader.tsx
@@ -1,5 +1,5 @@
 import { nextTick, PropType, reactive, watch, defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { createNamespace, extend } from '../utils';
 
 // Components
 import { Tab } from '../tab';
@@ -62,12 +62,14 @@ export default defineComponent({
       activeTab: 0,
     });
 
-    const { text: textKey, value: valueKey, children: childrenKey } = {
-      text: 'text',
-      value: 'value',
-      children: 'children',
-      ...props.fieldNames,
-    };
+    const { text: textKey, value: valueKey, children: childrenKey } = extend(
+      {
+        text: 'text',
+        value: 'value',
+        children: 'children',
+      },
+      props.fieldNames
+    );
 
     const getSelectedOptionsByValue = (
       options: CascaderOption[],
diff --git a/src/cell/Cell.tsx b/src/cell/Cell.tsx
index 8da2f6d28..f312b72ca 100644
--- a/src/cell/Cell.tsx
+++ b/src/cell/Cell.tsx
@@ -1,7 +1,7 @@
 import { PropType, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, isDef, UnknownProp } from '../utils';
+import { createNamespace, extend, isDef, UnknownProp } from '../utils';
 
 // Composables
 import { useRoute, routeProps } from '../composables/use-route';
@@ -41,10 +41,7 @@ export const cellProps = {
 export default defineComponent({
   name,
 
-  props: {
-    ...cellProps,
-    ...routeProps,
-  },
+  props: extend({}, cellProps, routeProps),
 
   setup(props, { slots }) {
     const route = useRoute();
diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx
index fa96224b8..4b3a1c43a 100644
--- a/src/checkbox/Checkbox.tsx
+++ b/src/checkbox/Checkbox.tsx
@@ -1,7 +1,7 @@
 import { computed, watch, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, pick } from '../utils';
+import { createNamespace, extend, pick } from '../utils';
 import {
   CHECKBOX_GROUP_KEY,
   CheckboxGroupProvide,
@@ -20,13 +20,12 @@ const [name, bem] = createNamespace('checkbox');
 export default defineComponent({
   name,
 
-  props: {
-    ...checkerProps,
+  props: extend({}, checkerProps, {
     bindGroup: {
       type: Boolean,
       default: true,
     },
-  },
+  }),
 
   emits: ['change', 'update:modelValue'],
 
diff --git a/src/checkbox/Checker.tsx b/src/checkbox/Checker.tsx
index b30b55996..52b8f52b4 100644
--- a/src/checkbox/Checker.tsx
+++ b/src/checkbox/Checker.tsx
@@ -1,5 +1,5 @@
 import { ref, computed, PropType, defineComponent } from 'vue';
-import { addUnit, UnknownProp } from '../utils';
+import { addUnit, extend, UnknownProp } from '../utils';
 import { Icon } from '../icon';
 
 export type CheckerShape = 'square' | 'round';
@@ -29,8 +29,7 @@ export const checkerProps = {
 };
 
 export default defineComponent({
-  props: {
-    ...checkerProps,
+  props: extend({}, checkerProps, {
     role: String,
     parent: Object as PropType<CheckerParent | null>,
     checked: Boolean,
@@ -40,9 +39,9 @@ export default defineComponent({
     },
     bem: {
       type: Function,
-      required: true,
+      required: true as const,
     },
-  },
+  }),
 
   emits: ['click', 'toggle'],
 
diff --git a/src/collapse-item/CollapseItem.tsx b/src/collapse-item/CollapseItem.tsx
index 5dbc71831..a72e7488e 100644
--- a/src/collapse-item/CollapseItem.tsx
+++ b/src/collapse-item/CollapseItem.tsx
@@ -2,7 +2,7 @@ import { ref, watch, computed, nextTick, defineComponent } from 'vue';
 
 // Utils
 import { cellProps } from '../cell/Cell';
-import { createNamespace, pick } from '../utils';
+import { createNamespace, extend, pick } from '../utils';
 import { COLLAPSE_KEY, CollapseProvide } from '../collapse/Collapse';
 
 // Composables
@@ -18,8 +18,7 @@ const [name, bem] = createNamespace('collapse-item');
 export default defineComponent({
   name,
 
-  props: {
-    ...cellProps,
+  props: extend({}, cellProps, {
     name: [Number, String],
     disabled: Boolean,
     readonly: Boolean,
@@ -27,7 +26,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-  },
+  }),
 
   setup(props, { slots }) {
     const wrapperRef = ref<HTMLElement>();
diff --git a/src/contact-edit/ContactEdit.tsx b/src/contact-edit/ContactEdit.tsx
index 1cb4e953f..85b146374 100644
--- a/src/contact-edit/ContactEdit.tsx
+++ b/src/contact-edit/ContactEdit.tsx
@@ -1,7 +1,7 @@
 import { watch, reactive, PropType, defineComponent } from 'vue';
 
 // Utils
-import { isMobile, createNamespace } from '../utils';
+import { isMobile, createNamespace, extend } from '../utils';
 
 // Components
 import { Cell } from '../cell';
@@ -35,7 +35,7 @@ export default defineComponent({
     setDefaultLabel: String,
     contactInfo: {
       type: Object as PropType<ContactEditInfo>,
-      default: () => ({ ...DEFAULT_CONTACT }),
+      default: () => extend({}, DEFAULT_CONTACT),
     },
     telValidator: {
       type: Function as PropType<(val: string) => boolean>,
@@ -46,10 +46,7 @@ export default defineComponent({
   emits: ['save', 'delete', 'change-default'],
 
   setup(props, { emit }) {
-    const contact = reactive({
-      ...DEFAULT_CONTACT,
-      ...props.contactInfo,
-    });
+    const contact = reactive(extend({}, DEFAULT_CONTACT, props.contactInfo));
 
     const onSave = () => {
       if (!props.isSaving) {
diff --git a/src/datetime-picker/DatePicker.tsx b/src/datetime-picker/DatePicker.tsx
index 6bbc89e61..817f71ccd 100644
--- a/src/datetime-picker/DatePicker.tsx
+++ b/src/datetime-picker/DatePicker.tsx
@@ -12,6 +12,7 @@ import {
 import {
   pick,
   range,
+  extend,
   isDate,
   padZero,
   createNamespace,
@@ -39,8 +40,7 @@ const [name] = createNamespace('date-picker');
 export default defineComponent({
   name,
 
-  props: {
-    ...sharedProps,
+  props: extend({}, sharedProps, {
     modelValue: Date,
     type: {
       type: String as PropType<DatetimePickerType>,
@@ -56,7 +56,7 @@ export default defineComponent({
       default: () => new Date(currentYear + 10, 11, 31),
       validator: isDate,
     },
-  },
+  }),
 
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
 
diff --git a/src/datetime-picker/DatetimePicker.tsx b/src/datetime-picker/DatetimePicker.tsx
index 52b00f0ca..b1e3e4d55 100644
--- a/src/datetime-picker/DatetimePicker.tsx
+++ b/src/datetime-picker/DatetimePicker.tsx
@@ -1,5 +1,5 @@
 import { ref, defineComponent } from 'vue';
-import { pick, createNamespace, ComponentInstance } from '../utils';
+import { pick, createNamespace, ComponentInstance, extend } from '../utils';
 import { useExpose } from '../composables/use-expose';
 import TimePicker from './TimePicker';
 import DatePicker from './DatePicker';
@@ -12,11 +12,9 @@ const datePickerProps = Object.keys(DatePicker.props);
 export default defineComponent({
   name,
 
-  props: {
-    ...TimePicker.props,
-    ...DatePicker.props,
+  props: extend({}, TimePicker.props, DatePicker.props, {
     modelValue: [String, Date],
-  },
+  }),
 
   setup(props, { attrs, slots }) {
     const root = ref<ComponentInstance>();
@@ -38,7 +36,8 @@ export default defineComponent({
           v-slots={slots}
           ref={root}
           class={bem()}
-          {...{ ...inheritProps, ...attrs }}
+          {...inheritProps}
+          {...attrs}
         />
       );
     };
diff --git a/src/datetime-picker/TimePicker.tsx b/src/datetime-picker/TimePicker.tsx
index 895c12073..f11aa60a5 100644
--- a/src/datetime-picker/TimePicker.tsx
+++ b/src/datetime-picker/TimePicker.tsx
@@ -11,6 +11,7 @@ import {
 import {
   pick,
   range,
+  extend,
   padZero,
   createNamespace,
   ComponentInstance,
@@ -28,8 +29,7 @@ const [name] = createNamespace('time-picker');
 export default defineComponent({
   name,
 
-  props: {
-    ...sharedProps,
+  props: extend({}, sharedProps, {
     modelValue: String,
     minHour: {
       type: [Number, String],
@@ -47,7 +47,7 @@ export default defineComponent({
       type: [Number, String],
       default: 59,
     },
-  },
+  }),
 
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
 
diff --git a/src/datetime-picker/utils.ts b/src/datetime-picker/utils.ts
index 4f5408da9..408e11003 100644
--- a/src/datetime-picker/utils.ts
+++ b/src/datetime-picker/utils.ts
@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { extend } from '../utils';
 import { pickerProps } from '../picker/Picker';
 
 export type ColumnType = 'year' | 'month' | 'day' | 'hour' | 'minute';
@@ -11,15 +12,14 @@ export type DatetimePickerType =
   | 'month-day'
   | 'year-month';
 
-export const sharedProps = {
-  ...pickerProps,
+export const sharedProps = extend({}, pickerProps, {
   filter: Function as PropType<(type: string, values: string[]) => string[]>,
   columnsOrder: Array as PropType<ColumnType[]>,
   formatter: {
     type: Function as PropType<(type: string, value: string) => string>,
     default: (type: string, value: string) => value,
   },
-};
+});
 
 export const pickerKeys = Object.keys(pickerProps) as Array<
   keyof typeof pickerProps
diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
index 20a6332e9..23f2a3dfd 100644
--- a/src/dialog/Dialog.tsx
+++ b/src/dialog/Dialog.tsx
@@ -4,6 +4,7 @@ import { PropType, reactive, defineComponent } from 'vue';
 import { callInterceptor, Interceptor } from '../utils/interceptor';
 import {
   pick,
+  extend,
   addUnit,
   isFunction,
   UnknownProp,
@@ -34,8 +35,7 @@ const popupKeys = [
 export default defineComponent({
   name,
 
-  props: {
-    ...popupSharedProps,
+  props: extend({}, popupSharedProps, {
     title: String,
     theme: String as PropType<DialogTheme>,
     width: [Number, String],
@@ -63,7 +63,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-  },
+  }),
 
   emits: ['confirm', 'cancel', 'update:show'],
 
@@ -231,10 +231,8 @@ export default defineComponent({
           class={[bem([theme]), className]}
           style={{ width: addUnit(width) }}
           aria-labelledby={title || message}
-          {...{
-            ...pick(props, popupKeys),
-            'onUpdate:show': updateShow,
-          }}
+          {...pick(props, popupKeys)}
+          {...{ 'onUpdate:show': updateShow }}
         >
           {renderTitle()}
           {renderContent()}
diff --git a/src/dialog/function-call.tsx b/src/dialog/function-call.tsx
index 55a2d46ed..13342175e 100644
--- a/src/dialog/function-call.tsx
+++ b/src/dialog/function-call.tsx
@@ -1,5 +1,5 @@
 import { App, CSSProperties, TeleportProps } from 'vue';
-import { inBrowser, ComponentInstance, withInstall } from '../utils';
+import { inBrowser, ComponentInstance, withInstall, extend } from '../utils';
 import { Interceptor } from '../utils/interceptor';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanDialog, {
@@ -40,7 +40,7 @@ function initInstance() {
   const Wrapper = {
     setup() {
       const { state, toggle } = usePopupState();
-      return () => <VanDialog {...{ ...state, 'onUpdate:show': toggle }} />;
+      return () => <VanDialog {...state} {...{ 'onUpdate:show': toggle }} />;
     },
   };
 
@@ -58,13 +58,13 @@ function Dialog(options: DialogOptions) {
       initInstance();
     }
 
-    instance.open({
-      ...Dialog.currentOptions,
-      ...options,
-      callback: (action: DialogAction) => {
-        (action === 'confirm' ? resolve : reject)(action);
-      },
-    });
+    instance.open(
+      extend({}, Dialog.currentOptions, options, {
+        callback: (action: DialogAction) => {
+          (action === 'confirm' ? resolve : reject)(action);
+        },
+      })
+    );
   });
 }
 
@@ -94,17 +94,12 @@ Dialog.defaultOptions = {
   closeOnClickOverlay: false,
 };
 
-Dialog.currentOptions = {
-  ...Dialog.defaultOptions,
-};
+Dialog.currentOptions = extend({}, Dialog.defaultOptions);
 
 Dialog.alert = Dialog;
 
 Dialog.confirm = (options: DialogOptions) =>
-  Dialog({
-    showCancelButton: true,
-    ...options,
-  });
+  Dialog(extend({ showCancelButton: true }, options));
 
 Dialog.close = () => {
   if (instance) {
@@ -117,7 +112,7 @@ Dialog.setDefaultOptions = (options: DialogOptions) => {
 };
 
 Dialog.resetDefaultOptions = () => {
-  Dialog.currentOptions = { ...Dialog.defaultOptions };
+  Dialog.currentOptions = extend({}, Dialog.defaultOptions);
 };
 
 Dialog.install = (app: App) => {
diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index 86bf8fb20..7ba15c4f4 100644
--- a/src/field/Field.tsx
+++ b/src/field/Field.tsx
@@ -13,6 +13,7 @@ import {
 // Utils
 import {
   isDef,
+  extend,
   addUnit,
   UnknownProp,
   resetScroll,
@@ -98,9 +99,7 @@ export const fieldProps = {
 export default defineComponent({
   name,
 
-  props: {
-    ...cellProps,
-    ...fieldProps,
+  props: extend({}, cellProps, fieldProps, {
     rows: [Number, String],
     name: String,
     rules: Array as PropType<FieldRule[]>,
@@ -119,7 +118,7 @@ export default defineComponent({
       type: Boolean,
       default: null,
     },
-  },
+  }),
 
   emits: [
     'blur',
@@ -415,14 +414,7 @@ export default defineComponent({
         return <textarea {...inputAttrs} />;
       }
 
-      return (
-        <input
-          {...{
-            ...mapInputType(props.type),
-            ...inputAttrs,
-          }}
-        />
-      );
+      return <input {...mapInputType(props.type)} {...inputAttrs} />;
     };
 
     const renderLeftIcon = () => {
diff --git a/src/grid-item/GridItem.tsx b/src/grid-item/GridItem.tsx
index 5971aa542..6a62d0d3a 100644
--- a/src/grid-item/GridItem.tsx
+++ b/src/grid-item/GridItem.tsx
@@ -1,7 +1,7 @@
 import { computed, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, extend } from '../utils';
 import { BORDER } from '../utils/constant';
 import { GRID_KEY, GridProvide } from '../grid/Grid';
 
@@ -18,14 +18,13 @@ const [name, bem] = createNamespace('grid-item');
 export default defineComponent({
   name,
 
-  props: {
-    ...routeProps,
+  props: extend({}, routeProps, {
     dot: Boolean,
     text: String,
     icon: String,
     badge: [Number, String],
     iconPrefix: String,
-  },
+  }),
 
   setup(props, { slots }) {
     const { parent, index } = useParent<GridProvide>(GRID_KEY);
diff --git a/src/image-preview/ImagePreview.tsx b/src/image-preview/ImagePreview.tsx
index 16b676fc7..b7d97ad41 100644
--- a/src/image-preview/ImagePreview.tsx
+++ b/src/image-preview/ImagePreview.tsx
@@ -231,15 +231,13 @@ export default defineComponent({
         class={[bem(), props.className]}
         overlayClass={bem('overlay')}
         onClosed={onClosed}
-        {...{
-          ...pick(props, [
-            'show',
-            'transition',
-            'overlayStyle',
-            'closeOnPopstate',
-          ]),
-          'onUpdate:show': updateShow,
-        }}
+        {...pick(props, [
+          'show',
+          'transition',
+          'overlayStyle',
+          'closeOnPopstate',
+        ])}
+        {...{ 'onUpdate:show': updateShow }}
       >
         {renderClose()}
         {renderImages()}
diff --git a/src/image-preview/function-call.tsx b/src/image-preview/function-call.tsx
index 9e06afc86..c40c91d28 100644
--- a/src/image-preview/function-call.tsx
+++ b/src/image-preview/function-call.tsx
@@ -1,5 +1,5 @@
 import { App, CSSProperties, TeleportProps } from 'vue';
-import { ComponentInstance, inBrowser, withInstall } from '../utils';
+import { ComponentInstance, extend, inBrowser, withInstall } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import { Interceptor } from '../utils/interceptor';
 import { PopupCloseIconPosition } from '../popup';
@@ -63,8 +63,8 @@ function initInstance() {
 
       return () => (
         <VanImagePreview
+          {...state}
           {...{
-            ...state,
             onClosed,
             'onUpdate:show': toggle,
           }}
@@ -89,10 +89,7 @@ const ImagePreview = (
 
   const options = Array.isArray(images) ? { images, startPosition } : images;
 
-  instance.open({
-    ...defaultConfig,
-    ...options,
-  });
+  instance.open(extend({}, defaultConfig, options));
 
   return instance;
 };
diff --git a/src/index-anchor/IndexAnchor.tsx b/src/index-anchor/IndexAnchor.tsx
index 4478d1186..edadfd15c 100644
--- a/src/index-anchor/IndexAnchor.tsx
+++ b/src/index-anchor/IndexAnchor.tsx
@@ -1,7 +1,7 @@
 import { ref, reactive, computed, CSSProperties, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, getZIndexStyle } from '../utils';
+import { createNamespace, extend, getZIndexStyle } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 import { INDEX_BAR_KEY, IndexBarProvide } from '../index-bar/IndexBar';
 import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll';
@@ -46,15 +46,14 @@ export default defineComponent({
       const { zIndex, highlightColor } = parent.props;
 
       if (isSticky()) {
-        return {
-          ...getZIndexStyle(zIndex),
+        return extend(getZIndexStyle(zIndex), {
           left: state.left ? `${state.left}px` : undefined,
           width: state.width ? `${state.width}px` : undefined,
           transform: state.top
             ? `translate3d(0, ${state.top}px, 0)`
             : undefined,
           color: highlightColor,
-        };
+        });
       }
     });
 
diff --git a/src/loading/Loading.tsx b/src/loading/Loading.tsx
index 9d361422b..5237f81a2 100644
--- a/src/loading/Loading.tsx
+++ b/src/loading/Loading.tsx
@@ -1,5 +1,5 @@
 import { computed, PropType, defineComponent } from 'vue';
-import { createNamespace, addUnit, getSizeStyle } from '../utils';
+import { createNamespace, addUnit, getSizeStyle, extend } from '../utils';
 
 const [name, bem] = createNamespace('loading');
 
@@ -29,10 +29,9 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
-    const spinnerStyle = computed(() => ({
-      color: props.color,
-      ...getSizeStyle(props.size),
-    }));
+    const spinnerStyle = computed(() =>
+      extend({ color: props.color }, getSizeStyle(props.size))
+    );
 
     const renderText = () => {
       if (slots.default) {
diff --git a/src/notify/Notify.tsx b/src/notify/Notify.tsx
index 42e9abb09..5ca1a023c 100644
--- a/src/notify/Notify.tsx
+++ b/src/notify/Notify.tsx
@@ -1,5 +1,5 @@
 import { PropType, defineComponent } from 'vue';
-import { createNamespace, UnknownProp } from '../utils';
+import { createNamespace, extend, UnknownProp } from '../utils';
 import { Popup } from '../popup';
 import { popupSharedProps } from '../popup/shared';
 
@@ -10,8 +10,7 @@ export type NotifyType = 'primary' | 'success' | 'danger' | 'warning';
 export default defineComponent({
   name,
 
-  props: {
-    ...popupSharedProps,
+  props: extend({}, popupSharedProps, {
     color: String,
     message: [Number, String],
     className: UnknownProp,
@@ -21,7 +20,7 @@ export default defineComponent({
       type: String as PropType<NotifyType>,
       default: 'danger',
     },
-  },
+  }),
 
   setup(props, { slots }) {
     return () => {
diff --git a/src/notify/function-call.tsx b/src/notify/function-call.tsx
index e35241221..60a277c9c 100644
--- a/src/notify/function-call.tsx
+++ b/src/notify/function-call.tsx
@@ -1,5 +1,11 @@
 import { App } from 'vue';
-import { isObject, inBrowser, ComponentInstance, withInstall } from '../utils';
+import {
+  extend,
+  isObject,
+  inBrowser,
+  withInstall,
+  ComponentInstance,
+} from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanNotify, { NotifyType } from './Notify';
 
@@ -29,14 +35,7 @@ function initInstance() {
   ({ instance } = mountComponent({
     setup() {
       const { state, toggle } = usePopupState();
-      return () => (
-        <VanNotify
-          {...{
-            ...state,
-            'onUpdate:show': toggle,
-          }}
-        />
-      );
+      return () => <VanNotify {...state} {...{ 'onUpdate:show': toggle }} />;
     },
   }));
 }
@@ -50,10 +49,7 @@ function Notify(options: NotifyMessage | NotifyOptions) {
     initInstance();
   }
 
-  options = {
-    ...Notify.currentOptions,
-    ...parseOptions(options),
-  };
+  options = extend(Notify.currentOptions, parseOptions(options));
 
   instance.open(options);
   clearTimeout(timer);
diff --git a/src/overlay/Overlay.tsx b/src/overlay/Overlay.tsx
index 732e667fe..3f882ddae 100644
--- a/src/overlay/Overlay.tsx
+++ b/src/overlay/Overlay.tsx
@@ -2,6 +2,7 @@ import { PropType, Transition, CSSProperties, defineComponent } from 'vue';
 import {
   noop,
   isDef,
+  extend,
   UnknownProp,
   preventDefault,
   createNamespace,
@@ -34,10 +35,10 @@ export default defineComponent({
     };
 
     const renderOverlay = lazyRender(() => {
-      const style: CSSProperties = {
-        ...getZIndexStyle(props.zIndex),
-        ...props.customStyle,
-      };
+      const style: CSSProperties = extend(
+        getZIndexStyle(props.zIndex),
+        props.customStyle
+      );
 
       if (isDef(props.duration)) {
         style.animationDuration = `${props.duration}s`;
diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx
index 28c7efc27..f56159222 100644
--- a/src/picker/Picker.tsx
+++ b/src/picker/Picker.tsx
@@ -2,6 +2,7 @@ import { ref, watch, computed, PropType, defineComponent } from 'vue';
 
 // Utils
 import {
+  extend,
   unitToPx,
   preventDefault,
   createNamespace,
@@ -68,8 +69,7 @@ export const pickerProps = {
 export default defineComponent({
   name,
 
-  props: {
-    ...pickerProps,
+  props: extend({}, pickerProps, {
     columnsFieldNames: Object as PropType<PickerFieldNames>,
     columns: {
       type: Array as PropType<PickerOption[] | PickerColumn[]>,
@@ -89,20 +89,22 @@ export default defineComponent({
       type: String,
       default: 'text',
     },
-  },
+  }),
 
   emits: ['confirm', 'cancel', 'change'],
 
   setup(props, { emit, slots }) {
     const formattedColumns = ref<PickerObjectColumn[]>([]);
 
-    const { text: textKey, values: valuesKey, children: childrenKey } = {
-      // compatible with valueKey prop
-      text: props.valueKey,
-      values: 'values',
-      children: 'children',
-      ...props.columnsFieldNames,
-    };
+    const { text: textKey, values: valuesKey, children: childrenKey } = extend(
+      {
+        // compatible with valueKey prop
+        text: props.valueKey,
+        values: 'values',
+        children: 'children',
+      },
+      props.columnsFieldNames
+    );
 
     const { children, linkChildren } = useChildren<ComponentInstance>(
       PICKER_KEY
diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
index cb409e53e..98f130340 100644
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -14,6 +14,7 @@ import { Instance, createPopper, offsetModifier } from '@vant/popperjs';
 // Utils
 import {
   pick,
+  extend,
   UnknownProp,
   createNamespace,
   ComponentInstance,
@@ -129,12 +130,11 @@ export default defineComponent({
               gpuAcceleration: false,
             },
           },
-          {
-            ...offsetModifier,
+          extend({}, offsetModifier, {
             options: {
               offset: props.offset,
             },
-          },
+          }),
         ],
       });
     };
@@ -228,11 +228,9 @@ export default defineComponent({
           transition="van-popover-zoom"
           lockScroll={false}
           onTouchstart={onTouchstart}
-          {...{
-            ...attrs,
-            ...pick(props, popupProps),
-            'onUpdate:show': updateShow,
-          }}
+          {...attrs}
+          {...pick(props, popupProps)}
+          {...{ 'onUpdate:show': updateShow }}
         >
           <div class={bem('arrow')} />
           <div role="menu" class={bem('content')}>
diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
index e2f5b8780..5d2ae6410 100644
--- a/src/popup/Popup.tsx
+++ b/src/popup/Popup.tsx
@@ -14,7 +14,7 @@ import {
 
 // Utils
 import { popupSharedProps } from './shared';
-import { createNamespace, isDef } from '../utils';
+import { createNamespace, extend, isDef } from '../utils';
 
 // Composables
 import { useEventListener } from '@vant/use';
@@ -43,8 +43,7 @@ export default defineComponent({
 
   inheritAttrs: false,
 
-  props: {
-    ...popupSharedProps,
+  props: extend({}, popupSharedProps, {
     round: Boolean,
     closeable: Boolean,
     transition: String,
@@ -62,7 +61,7 @@ export default defineComponent({
       type: String as PropType<PopupCloseIconPosition>,
       default: 'top-right',
     },
-  },
+  }),
 
   emits: [
     'open',
diff --git a/src/search/Search.tsx b/src/search/Search.tsx
index 454f0021b..82952018a 100644
--- a/src/search/Search.tsx
+++ b/src/search/Search.tsx
@@ -3,6 +3,7 @@ import { ref, PropType, defineComponent } from 'vue';
 // Utils
 import {
   pick,
+  extend,
   createNamespace,
   preventDefault,
   ComponentInstance,
@@ -22,8 +23,7 @@ export type SearchShape = 'square' | 'round';
 export default defineComponent({
   name,
 
-  props: {
-    ...fieldProps,
+  props: extend({}, fieldProps, {
     label: String,
     actionText: String,
     background: String,
@@ -40,7 +40,7 @@ export default defineComponent({
       type: String,
       default: 'search',
     },
-  },
+  }),
 
   emits: ['search', 'cancel', 'update:modelValue'],
 
@@ -96,10 +96,7 @@ export default defineComponent({
     >;
 
     const renderField = () => {
-      const fieldAttrs = {
-        ...attrs,
-        ...pick(props, fieldPropNames),
-      };
+      const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames));
 
       const onInput = (value: string) => emit('update:modelValue', value);
 
diff --git a/src/share-sheet/ShareSheet.tsx b/src/share-sheet/ShareSheet.tsx
index c4f578e9b..9c0575162 100644
--- a/src/share-sheet/ShareSheet.tsx
+++ b/src/share-sheet/ShareSheet.tsx
@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, pick } from '../utils';
+import { createNamespace, extend, pick } from '../utils';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
 // Components
@@ -45,8 +45,7 @@ const [name, bem, t] = createNamespace('share-sheet');
 export default defineComponent({
   name,
 
-  props: {
-    ...popupSharedProps,
+  props: extend({}, popupSharedProps, {
     title: String,
     cancelText: String,
     description: String,
@@ -62,7 +61,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-  },
+  }),
 
   emits: ['cancel', 'select', 'update:show'],
 
@@ -143,10 +142,8 @@ export default defineComponent({
         round
         class={bem()}
         position="bottom"
-        {...{
-          ...pick(props, popupKeys),
-          'onUpdate:show': updateShow,
-        }}
+        {...pick(props, popupKeys)}
+        {...{ 'onUpdate:show': updateShow }}
       >
         {renderHeader()}
         {renderRows()}
diff --git a/src/sidebar-item/SidebarItem.tsx b/src/sidebar-item/SidebarItem.tsx
index dce6fe287..16fcaa577 100644
--- a/src/sidebar-item/SidebarItem.tsx
+++ b/src/sidebar-item/SidebarItem.tsx
@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, extend } from '../utils';
 import { SIDEBAR_KEY, SidebarProvide } from '../sidebar/Sidebar';
 
 // Composables
@@ -16,13 +16,12 @@ const [name, bem] = createNamespace('sidebar-item');
 export default defineComponent({
   name,
 
-  props: {
-    ...routeProps,
+  props: extend({}, routeProps, {
     dot: Boolean,
     title: String,
     badge: [Number, String],
     disabled: Boolean,
-  },
+  }),
 
   emits: ['click'],
 
diff --git a/src/sticky/Sticky.tsx b/src/sticky/Sticky.tsx
index cd40d47c1..904337418 100644
--- a/src/sticky/Sticky.tsx
+++ b/src/sticky/Sticky.tsx
@@ -10,6 +10,7 @@ import {
 
 // Utils
 import {
+  extend,
   isHidden,
   unitToPx,
   getScrollTop,
@@ -76,12 +77,11 @@ export default defineComponent({
         return;
       }
 
-      const style: CSSProperties = {
-        ...getZIndexStyle(props.zIndex),
+      const style: CSSProperties = extend(getZIndexStyle(props.zIndex), {
         width: `${state.width}px`,
         height: `${state.height}px`,
         [props.position]: `${offset.value}px`,
-      };
+      });
 
       if (state.transform) {
         style.transform = `translate3d(0, ${state.transform}px, 0)`;
diff --git a/src/tab/Tab.tsx b/src/tab/Tab.tsx
index 4648cbef8..19e21f023 100644
--- a/src/tab/Tab.tsx
+++ b/src/tab/Tab.tsx
@@ -8,7 +8,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, UnknownProp } from '../utils';
+import { createNamespace, extend, UnknownProp } from '../utils';
 import { TABS_KEY, TabsProvide } from '../tabs/Tabs';
 
 // Composables
@@ -23,8 +23,7 @@ const [name, bem] = createNamespace('tab');
 export default defineComponent({
   name,
 
-  props: {
-    ...routeProps,
+  props: extend({}, routeProps, {
     dot: Boolean,
     name: [Number, String],
     badge: [Number, String],
@@ -32,7 +31,7 @@ export default defineComponent({
     disabled: Boolean,
     titleClass: UnknownProp,
     titleStyle: [String, Object] as PropType<string | CSSProperties>,
-  },
+  }),
 
   setup(props, { slots }) {
     const inited = ref(false);
diff --git a/src/tabbar-item/TabbarItem.tsx b/src/tabbar-item/TabbarItem.tsx
index c9cf1928b..7c05df971 100644
--- a/src/tabbar-item/TabbarItem.tsx
+++ b/src/tabbar-item/TabbarItem.tsx
@@ -1,7 +1,7 @@
 import { computed, getCurrentInstance, defineComponent } from 'vue';
 
 // Utils
-import { createNamespace, isObject } from '../utils';
+import { createNamespace, extend, isObject } from '../utils';
 import { TABBAR_KEY, TabbarProvide } from '../tabbar/Tabbar';
 
 // Composables
@@ -17,14 +17,13 @@ const [name, bem] = createNamespace('tabbar-item');
 export default defineComponent({
   name,
 
-  props: {
-    ...routeProps,
+  props: extend({}, routeProps, {
     dot: Boolean,
     icon: String,
     name: [Number, String],
     badge: [Number, String],
     iconPrefix: String,
-  },
+  }),
 
   emits: ['click'],
 
diff --git a/src/toast/function-call.tsx b/src/toast/function-call.tsx
index bacbc6664..89da07e79 100644
--- a/src/toast/function-call.tsx
+++ b/src/toast/function-call.tsx
@@ -1,5 +1,11 @@
 import { ref, App, TeleportProps, getCurrentInstance } from 'vue';
-import { isObject, inBrowser, withInstall, ComponentInstance } from '../utils';
+import {
+  extend,
+  isObject,
+  inBrowser,
+  withInstall,
+  ComponentInstance,
+} from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanToast, { ToastType, ToastPosition } from './Toast';
 import type { LoadingType } from '../loading';
@@ -51,7 +57,7 @@ const defaultOptions: ToastOptions = {
 
 let queue: ComponentInstance[] = [];
 let allowMultiple = false;
-let currentOptions = { ...defaultOptions };
+let currentOptions = extend({}, defaultOptions);
 
 // default options of specific type
 let defaultOptionsMap: Record<string, ToastOptions | null> = {};
@@ -78,7 +84,6 @@ function createInstance() {
 
       const render = () => {
         const attrs: Record<string, unknown> = {
-          ...state,
           onClosed,
           'onUpdate:show': toggle,
         };
@@ -87,7 +92,7 @@ function createInstance() {
           attrs.message = message.value;
         }
 
-        return <VanToast {...attrs} />;
+        return <VanToast {...state} {...attrs} />;
       };
 
       // rewrite render function
@@ -121,20 +126,20 @@ function Toast(options: string | ToastOptions = {}) {
   const toast = getInstance();
   const parsedOptions = parseOptions(options);
 
-  toast.open({
-    ...currentOptions,
-    ...defaultOptionsMap[parsedOptions.type || currentOptions.type!],
-    ...parsedOptions,
-  });
+  toast.open(
+    extend(
+      {},
+      currentOptions,
+      defaultOptionsMap[parsedOptions.type || currentOptions.type!],
+      parsedOptions
+    )
+  );
 
   return toast;
 }
 
 const createMethod = (type: ToastType) => (options: string | ToastOptions) =>
-  Toast({
-    type,
-    ...parseOptions(options),
-  });
+  Toast(extend({ type }, parseOptions(options)));
 
 Toast.loading = createMethod('loading');
 Toast.success = createMethod('success');
@@ -171,7 +176,7 @@ Toast.resetDefaultOptions = (type?: ToastType) => {
   if (typeof type === 'string') {
     defaultOptionsMap[type] = null;
   } else {
-    currentOptions = { ...defaultOptions };
+    currentOptions = extend({}, defaultOptions);
     defaultOptionsMap = {};
   }
 };
diff --git a/src/uploader/Uploader.tsx b/src/uploader/Uploader.tsx
index b8978ccea..576253c02 100644
--- a/src/uploader/Uploader.tsx
+++ b/src/uploader/Uploader.tsx
@@ -1,7 +1,13 @@
 import { ref, reactive, PropType, defineComponent } from 'vue';
 
 // Utils
-import { pick, isPromise, getSizeStyle, ComponentInstance } from '../utils';
+import {
+  pick,
+  extend,
+  isPromise,
+  getSizeStyle,
+  ComponentInstance,
+} from '../utils';
 import {
   bem,
   name,
@@ -250,12 +256,16 @@ export default defineComponent({
           .map((item) => item.content || item.url)
           .filter(Boolean) as string[];
 
-        imagePreview = ImagePreview({
-          images,
-          startPosition: imageFiles.indexOf(item),
-          onClose: onClosePreview,
-          ...props.previewOptions,
-        });
+        imagePreview = ImagePreview(
+          extend(
+            {
+              images,
+              startPosition: imageFiles.indexOf(item),
+              onClose: onClosePreview,
+            },
+            props.previewOptions
+          )
+        );
       }
     };
 
@@ -281,10 +291,10 @@ export default defineComponent({
         'beforeDelete',
       ] as const;
 
-      const previewData = {
-        ...pick(props, needPickData),
-        ...pick(item, needPickData, true),
-      };
+      const previewData = extend(
+        pick(props, needPickData),
+        pick(item, needPickData, true)
+      );
 
       return (
         <UploaderPreviewItem
diff --git a/src/uploader/UploaderPreviewItem.tsx b/src/uploader/UploaderPreviewItem.tsx
index 54ef4ec73..1cd1b90dd 100644
--- a/src/uploader/UploaderPreviewItem.tsx
+++ b/src/uploader/UploaderPreviewItem.tsx
@@ -2,7 +2,7 @@ import { PropType, defineComponent } from 'vue';
 
 // Utils
 import { bem, isImageFile, UploaderFileListItem } from './utils';
-import { isDef, getSizeStyle } from '../utils';
+import { isDef, getSizeStyle, extend } from '../utils';
 import { callInterceptor, Interceptor } from '../utils/interceptor';
 
 // Components
@@ -77,7 +77,7 @@ export default defineComponent({
         const { index, item } = props;
         return (
           <div class={bem('preview-cover')}>
-            {slots['preview-cover']({ index, ...item })}
+            {slots['preview-cover'](extend({ index }, item))}
           </div>
         );
       }
diff --git a/src/utils/base.ts b/src/utils/base.ts
index 9c343083f..a177b81f7 100644
--- a/src/utils/base.ts
+++ b/src/utils/base.ts
@@ -2,6 +2,8 @@ import { PropType, ComponentPublicInstance } from 'vue';
 
 export function noop() {}
 
+export const extend = Object.assign;
+
 export const inBrowser = typeof window !== 'undefined';
 
 // unknown type for Vue prop