diff --git a/.eslintrc b/.eslintrc
index 0a3300a9b..50c488193 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -10,7 +10,7 @@
   "parserOptions": {
     "parser": "babel-eslint"
   },
-  "extends": ["plugin:vue/recommended", "prettier"],
+  "extends": ["plugin:vue/vue3-recommended", "prettier"],
   "plugins": ["markdown"],
   "overrides": [
     {
diff --git a/components/_util/PortalWrapper.js b/components/_util/PortalWrapper.js
index ead88e02e..38113023f 100644
--- a/components/_util/PortalWrapper.js
+++ b/components/_util/PortalWrapper.js
@@ -29,9 +29,6 @@ export default defineComponent({
     openCount = visible ? openCount + 1 : openCount;
     return {};
   },
-  updated() {
-    this.setWrapperClassName();
-  },
   watch: {
     visible(val) {
       openCount = val ? openCount + 1 : openCount - 1;
@@ -48,6 +45,9 @@ export default defineComponent({
       }
     },
   },
+  updated() {
+    this.setWrapperClassName();
+  },
   beforeUnmount() {
     const { visible } = this.$props;
     // 离开时不会 render， 导到离开时数值不变，改用 func 。。
diff --git a/components/_util/wave.jsx b/components/_util/wave.jsx
index 945ca7cc9..a88fe0265 100644
--- a/components/_util/wave.jsx
+++ b/components/_util/wave.jsx
@@ -23,6 +23,12 @@ function isNotGrey(color) {
 export default defineComponent({
   name: 'Wave',
   props: ['insertExtraNode'],
+  setup() {
+    const configProvider = inject('configProvider', defaultConfigProvider);
+    return {
+      configProvider,
+    };
+  },
   mounted() {
     nextTick(() => {
       const node = findDOMNode(this);
@@ -32,12 +38,6 @@ export default defineComponent({
       this.instance = this.bindAnimationEvent(node);
     });
   },
-  setup() {
-    const configProvider = inject('configProvider', defaultConfigProvider);
-    return {
-      configProvider,
-    };
-  },
   beforeUnmount() {
     if (this.instance) {
       this.instance.cancel();
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index fd2d71343..be0e5448a 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -50,14 +50,14 @@ const AffixProps = {
 };
 const Affix = defineComponent({
   name: 'AAffix',
-  props: AffixProps,
   mixins: [BaseMixin],
+  props: AffixProps,
+  emits: ['change', 'testUpdatePosition'],
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
-  emits: ['change', 'testUpdatePosition'],
   data() {
     return {
       affixStyle: undefined,
@@ -68,25 +68,6 @@ const Affix = defineComponent({
       timeout: null,
     };
   },
-  beforeMount() {
-    this.updatePosition = throttleByAnimationFrame(this.updatePosition);
-    this.lazyUpdatePosition = throttleByAnimationFrame(this.lazyUpdatePosition);
-  },
-  mounted() {
-    const { target } = this;
-    if (target) {
-      // [Legacy] Wait for parent component ref has its value.
-      // We should use target as directly element instead of function which makes element check hard.
-      this.timeout = setTimeout(() => {
-        addObserveTarget(target(), this);
-        // Mock Event object.
-        this.updatePosition();
-      });
-    }
-  },
-  updated() {
-    this.measure();
-  },
   watch: {
     target(val) {
       let newTarget = null;
@@ -110,6 +91,25 @@ const Affix = defineComponent({
       this.updatePosition();
     },
   },
+  beforeMount() {
+    this.updatePosition = throttleByAnimationFrame(this.updatePosition);
+    this.lazyUpdatePosition = throttleByAnimationFrame(this.lazyUpdatePosition);
+  },
+  mounted() {
+    const { target } = this;
+    if (target) {
+      // [Legacy] Wait for parent component ref has its value.
+      // We should use target as directly element instead of function which makes element check hard.
+      this.timeout = setTimeout(() => {
+        addObserveTarget(target(), this);
+        // Mock Event object.
+        this.updatePosition();
+      });
+    }
+  },
+  updated() {
+    this.measure();
+  },
   beforeUnmount() {
     clearTimeout(this.timeout);
     removeObserveTarget(this);
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index 5dc969522..8999cb093 100644
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -59,9 +59,9 @@ export const AlertProps = {
 
 const Alert = defineComponent({
   name: 'AAlert',
+  mixins: [BaseMixin],
   inheritAttrs: false,
   props: AlertProps,
-  mixins: [BaseMixin],
   emits: ['close'],
   setup() {
     return {
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index b718296e5..d2239ec52 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -81,6 +81,11 @@ export default defineComponent({
   inheritAttrs: false,
   props: AnchorProps,
   emits: ['change', 'click'],
+  setup() {
+    return {
+      configProvider: inject('configProvider', defaultConfigProvider),
+    };
+  },
   data() {
     // this.links = [];
     // this.sPrefixCls = '';
@@ -111,11 +116,6 @@ export default defineComponent({
     } as AntAnchor);
     provide('antAnchorContext', this);
   },
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
   mounted() {
     nextTick(() => {
       const { getContainer } = this;
diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx
index 60d0e6213..7492e6047 100644
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@@ -18,8 +18,8 @@ const props = backTopTypes();
 
 const BackTop = defineComponent({
   name: 'ABackTop',
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   emits: ['click'],
   props: {
     ...props,
diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx
index 80ce28e13..65081d452 100644
--- a/components/calendar/index.tsx
+++ b/components/calendar/index.tsx
@@ -51,8 +51,8 @@ export const CalendarProps = {
 
 const Calendar = defineComponent({
   name: 'ACalendar',
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: CalendarProps,
   setup() {
     return {
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 3dca6e411..ae48295af 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -201,17 +201,10 @@ function flattenTree(
 const defaultDisplayRender = ({ labels }) => labels.join(' / ');
 
 const Cascader = defineComponent({
-  inheritAttrs: false,
   name: 'ACascader',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: CascaderProps,
-  // model: {
-  //   prop: 'value',
-  //   event: 'change',
-  // },
-  created() {
-    provide('savePopupRef', this.savePopupRef);
-  },
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
@@ -244,6 +237,13 @@ const Cascader = defineComponent({
       }
     },
   },
+  // model: {
+  //   prop: 'value',
+  //   event: 'change',
+  // },
+  created() {
+    provide('savePopupRef', this.savePopupRef);
+  },
   methods: {
     savePopupRef(ref: any) {
       this.popupRef = ref;
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index ee3fb8a0e..f52c6f462 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -25,6 +25,11 @@ export default defineComponent({
     disabled: PropTypes.looseBool,
     onChange: PropTypes.func,
   },
+  setup() {
+    return {
+      configProvider: inject('configProvider', defaultConfigProvider),
+    };
+  },
 
   data() {
     const { value, defaultValue } = this;
@@ -38,11 +43,6 @@ export default defineComponent({
       this.sValue = val || [];
     },
   },
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
   created() {
     provide('checkboxGroupContext', this);
   },
diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx
index d282411e2..ba0291072 100644
--- a/components/date-picker/createPicker.tsx
+++ b/components/date-picker/createPicker.tsx
@@ -31,8 +31,8 @@ export default function createPicker<P>(
   name: string,
 ): DefineComponent<any> {
   return defineComponent({
-    inheritAttrs: false,
     name,
+    inheritAttrs: false,
     props: {
       ...props,
       allowClear: PropTypes.looseBool.def(true),
diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx
index dc9204c0d..61160d822 100644
--- a/components/date-picker/wrapPicker.tsx
+++ b/components/date-picker/wrapPicker.tsx
@@ -66,6 +66,11 @@ export default function wrapPicker<P>(
         popupRef: undefined,
       };
     },
+    watch: {
+      value(val) {
+        checkValidate('DatePicker', val, 'value', this.valueFormat);
+      },
+    },
     created() {
       provide('savePopupRef', this.savePopupRef);
     },
@@ -79,11 +84,6 @@ export default function wrapPicker<P>(
         });
       }
     },
-    watch: {
-      value(val) {
-        checkValidate('DatePicker', val, 'value', this.valueFormat);
-      },
-    },
     methods: {
       savePicker(node: any) {
         this.picker = node;
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index cb27158c7..4bed29cb5 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -41,11 +41,6 @@ const Drawer = defineComponent({
     'onUpdate:visible': PropTypes.func,
   },
   mixins: [BaseMixin],
-  data() {
-    return {
-      sPush: false,
-    };
-  },
   setup(props) {
     const configProvider = inject('configProvider', defaultConfigProvider);
     return {
@@ -55,6 +50,11 @@ const Drawer = defineComponent({
       parentDrawer: inject('parentDrawer', null),
     };
   },
+  data() {
+    return {
+      sPush: false,
+    };
+  },
   beforeCreate() {
     provide('parentDrawer', this);
   },
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index d1eebfafb..f583a5bb1 100755
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -76,9 +76,6 @@ const Form = defineComponent({
     colon: true,
   }),
   Item: FormItem,
-  created() {
-    provide('FormContext', this);
-  },
   setup(props) {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
@@ -95,6 +92,9 @@ const Form = defineComponent({
       }
     },
   },
+  created() {
+    provide('FormContext', this);
+  },
   methods: {
     addField(field: any) {
       if (field) {
diff --git a/components/input/ResizableTextArea.tsx b/components/input/ResizableTextArea.tsx
index 734254397..d96a5d132 100644
--- a/components/input/ResizableTextArea.tsx
+++ b/components/input/ResizableTextArea.tsx
@@ -30,22 +30,9 @@ const TextAreaProps = {
 
 const ResizableTextArea = defineComponent({
   name: 'ResizableTextArea',
+  mixins: [BaseMixin],
   inheritAttrs: false,
   props: TextAreaProps,
-  data() {
-    return {
-      textareaStyles: {},
-      resizeStatus: RESIZE_STATUS_NONE,
-    };
-  },
-  mixins: [BaseMixin],
-  mounted() {
-    this.resizeTextarea();
-  },
-  beforeUnmount() {
-    raf.cancel(this.nextFrameActionId);
-    raf.cancel(this.resizeFrameId);
-  },
   setup() {
     return {
       nextFrameActionId: undefined,
@@ -53,6 +40,12 @@ const ResizableTextArea = defineComponent({
       resizeFrameId: undefined,
     };
   },
+  data() {
+    return {
+      textareaStyles: {},
+      resizeStatus: RESIZE_STATUS_NONE,
+    };
+  },
   watch: {
     value() {
       nextTick(() => {
@@ -60,6 +53,13 @@ const ResizableTextArea = defineComponent({
       });
     },
   },
+  mounted() {
+    this.resizeTextarea();
+  },
+  beforeUnmount() {
+    raf.cancel(this.nextFrameActionId);
+    raf.cancel(this.resizeFrameId);
+  },
   methods: {
     saveTextArea(textArea: any) {
       this.textArea = textArea;
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index a8f94a577..9fde8922e 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -71,6 +71,12 @@ export default defineComponent({
     collapsedWidth: 80,
   }),
   emits: ['breakpoint', 'update:collapsed', 'collapse'],
+  setup() {
+    return {
+      siderHook: inject<SiderHookProvider>('siderHook', {}),
+      configProvider: inject('configProvider', defaultConfigProvider),
+    };
+  },
   data() {
     const uniqueId = generateId('ant-sider-');
     let matchMedia: typeof window.matchMedia;
@@ -106,12 +112,6 @@ export default defineComponent({
   created() {
     provide('layoutSiderContext', this); // menu组件中使用
   },
-  setup() {
-    return {
-      siderHook: inject<SiderHookProvider>('siderHook', {}),
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
 
   mounted() {
     nextTick(() => {
diff --git a/components/list/index.tsx b/components/list/index.tsx
index df1b7d4f9..c3a59b2ca 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -55,9 +55,9 @@ export const ListProps = () => ({
 });
 
 const List = defineComponent({
+  name: 'AList',
   inheritAttrs: false,
   Item,
-  name: 'AList',
   props: initDefaultProps(ListProps(), {
     dataSource: [],
     bordered: false,
@@ -65,23 +65,6 @@ const List = defineComponent({
     loading: false,
     pagination: false,
   }),
-  created() {
-    provide('listContext', this);
-    this.defaultPaginationProps = {
-      current: 1,
-      pageSize: 10,
-      onChange: (page: number, pageSize: number) => {
-        const { pagination } = this;
-        this.paginationCurrent = page;
-        if (pagination && (pagination as any).onChange) {
-          (pagination as any).onChange(page, pageSize);
-        }
-      },
-      total: 0,
-    };
-    this.onPaginationChange = this.triggerPaginationEvent('onChange');
-    this.onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange');
-  },
   setup() {
     return {
       keys: [],
@@ -101,6 +84,23 @@ const List = defineComponent({
       paginationSize: paginationObj.defaultPageSize || 10,
     };
   },
+  created() {
+    provide('listContext', this);
+    this.defaultPaginationProps = {
+      current: 1,
+      pageSize: 10,
+      onChange: (page: number, pageSize: number) => {
+        const { pagination } = this;
+        this.paginationCurrent = page;
+        if (pagination && (pagination as any).onChange) {
+          (pagination as any).onChange(page, pageSize);
+        }
+      },
+      total: 0,
+    };
+    this.onPaginationChange = this.triggerPaginationEvent('onChange');
+    this.onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange');
+  },
   methods: {
     triggerPaginationEvent(eventName) {
       return (page, pageSize) => {
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index da167c8ce..84a3e9bc9 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -51,13 +51,13 @@ export type MenuProps = Partial<ExtractPropTypes<typeof menuProps>>;
 
 const Menu = defineComponent({
   name: 'AMenu',
+  mixins: [BaseMixin],
   inheritAttrs: false,
   props: menuProps,
   Divider: { ...Divider, name: 'AMenuDivider' },
   Item: { ...Item, name: 'AMenuItem' },
   SubMenu: { ...SubMenu, name: 'ASubMenu' },
   ItemGroup: { ...ItemGroup, name: 'AMenuItemGroup' },
-  mixins: [BaseMixin],
   emits: [
     'update:selectedKeys',
     'update:openKeys',
@@ -68,10 +68,6 @@ const Menu = defineComponent({
     'select',
     'deselect',
   ],
-  created() {
-    provide('getInlineCollapsed', this.getInlineCollapsed);
-    provide('menuPropsContext', this.$props);
-  },
   setup() {
     const layoutSiderContext = inject<SiderContextProps>('layoutSiderContext', {});
     const layoutSiderCollapsed = toRef(layoutSiderContext, 'sCollapsed');
@@ -85,8 +81,23 @@ const Menu = defineComponent({
       inlineOpenKeys: [],
     };
   },
-  updated() {
-    this.propsUpdating = false;
+  data() {
+    const props: MenuProps = getOptionProps(this);
+    warning(
+      !('inlineCollapsed' in props && props.mode !== 'inline'),
+      'Menu',
+      "`inlineCollapsed` should only be used when Menu's `mode` is inline.",
+    );
+    let sOpenKeys;
+
+    if ('openKeys' in props) {
+      sOpenKeys = props.openKeys;
+    } else if ('defaultOpenKeys' in props) {
+      sOpenKeys = props.defaultOpenKeys;
+    }
+    return {
+      sOpenKeys,
+    };
   },
   // beforeUnmount() {
   //   raf.cancel(this.mountRafId);
@@ -107,23 +118,12 @@ const Menu = defineComponent({
       this.collapsedChange(val);
     },
   },
-  data() {
-    const props: MenuProps = getOptionProps(this);
-    warning(
-      !('inlineCollapsed' in props && props.mode !== 'inline'),
-      'Menu',
-      "`inlineCollapsed` should only be used when Menu's `mode` is inline.",
-    );
-    let sOpenKeys;
-
-    if ('openKeys' in props) {
-      sOpenKeys = props.openKeys;
-    } else if ('defaultOpenKeys' in props) {
-      sOpenKeys = props.defaultOpenKeys;
-    }
-    return {
-      sOpenKeys,
-    };
+  created() {
+    provide('getInlineCollapsed', this.getInlineCollapsed);
+    provide('menuPropsContext', this.$props);
+  },
+  updated() {
+    this.propsUpdating = false;
   },
   methods: {
     collapsedChange(val) {
diff --git a/components/modal/ActionButton.tsx b/components/modal/ActionButton.tsx
index 8a8e15149..fd534805e 100644
--- a/components/modal/ActionButton.tsx
+++ b/components/modal/ActionButton.tsx
@@ -19,16 +19,16 @@ export type IActionButtonProps = ExtractPropTypes<typeof ActionButtonProps>;
 export default defineComponent({
   mixins: [BaseMixin],
   props: ActionButtonProps,
-  data() {
-    return {
-      loading: false,
-    };
-  },
   setup() {
     return {
       timeoutId: undefined,
     };
   },
+  data() {
+    return {
+      loading: false,
+    };
+  },
   mounted() {
     if (this.autofocus) {
       this.timeoutId = setTimeout(() => findDOMNode(this).focus());
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index 044659b72..cc9457bf4 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -159,6 +159,11 @@ export default defineComponent({
     visible: false,
     okType: 'primary',
   }),
+  setup() {
+    return {
+      configProvider: inject('configProvider', defaultConfigProvider),
+    };
+  },
   data() {
     return {
       sVisible: !!this.visible,
@@ -169,11 +174,6 @@ export default defineComponent({
       this.sVisible = val;
     },
   },
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
   methods: {
     handleCancel(e: MouseEvent) {
       this.$emit('update:visible', false);
diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx
index e3295956c..3679d04a0 100644
--- a/components/popconfirm/index.tsx
+++ b/components/popconfirm/index.tsx
@@ -38,11 +38,6 @@ const Popconfirm = defineComponent({
   },
   mixins: [BaseMixin],
   emits: ['update:visible', 'confirm', 'cancel', 'visibleChange'],
-  watch: {
-    visible(val) {
-      this.sVisible = val;
-    },
-  },
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
@@ -59,6 +54,11 @@ const Popconfirm = defineComponent({
     }
     return state;
   },
+  watch: {
+    visible(val) {
+      this.sVisible = val;
+    },
+  },
   methods: {
     onConfirmHandle(e) {
       this.setVisible(false, e);
diff --git a/components/radio/Group.tsx b/components/radio/Group.tsx
index 8c35506af..d792c3fdb 100644
--- a/components/radio/Group.tsx
+++ b/components/radio/Group.tsx
@@ -21,12 +21,6 @@ export default defineComponent({
     onChange: PropTypes.func,
   },
   emits: ['update:value', 'change'],
-  data() {
-    const { value, defaultValue } = this;
-    return {
-      stateValue: value === undefined ? defaultValue : value,
-    };
-  },
   setup() {
     return {
       updatingValue: false,
@@ -34,6 +28,18 @@ export default defineComponent({
       radioGroupContext: null,
     };
   },
+  data() {
+    const { value, defaultValue } = this;
+    return {
+      stateValue: value === undefined ? defaultValue : value,
+    };
+  },
+  watch: {
+    value(val) {
+      this.updatingValue = false;
+      this.stateValue = val;
+    },
+  },
   // computed: {
   //   radioOptions() {
   //     const { disabled } = this;
@@ -47,12 +53,6 @@ export default defineComponent({
   created() {
     this.radioGroupContext = provide('radioGroupContext', this);
   },
-  watch: {
-    value(val) {
-      this.updatingValue = false;
-      this.stateValue = val;
-    },
-  },
   methods: {
     onRadioChange(ev: RadioChangeEvent) {
       const lastValue = this.stateValue;
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index 552c8eb3d..faae5d08e 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -53,9 +53,9 @@ const defaultTipFormatter = (value: number) => value.toString();
 
 const Slider = defineComponent({
   name: 'ASlider',
+  mixins: [BaseMixin],
   inheritAttrs: false,
   emits: ['update:value', 'change'],
-  mixins: [BaseMixin],
   setup() {
     return {
       vcSlider: null,
diff --git a/components/spin/Spin.tsx b/components/spin/Spin.tsx
index 54f20b4c2..c42ca76b6 100644
--- a/components/spin/Spin.tsx
+++ b/components/spin/Spin.tsx
@@ -46,10 +46,6 @@ export default defineComponent({
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
-  created() {
-    this.originalUpdateSpinning = this.updateSpinning;
-    this.debouncifyUpdateSpinning(this.$props);
-  },
   data() {
     const { spinning, delay } = this;
     const shouldBeDelayed = shouldDelay(spinning, delay);
@@ -57,6 +53,10 @@ export default defineComponent({
       sSpinning: spinning && !shouldBeDelayed,
     };
   },
+  created() {
+    this.originalUpdateSpinning = this.updateSpinning;
+    this.debouncifyUpdateSpinning(this.$props);
+  },
   mounted() {
     this.updateSpinning();
   },
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
index 2ac619a0f..0121e0dab 100644
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@@ -31,6 +31,13 @@ const Switch = defineComponent({
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
+  created() {
+    warning(
+      hasProp(this, 'checked') || !('value' in this.$attrs),
+      'Switch',
+      '`value` is not validate prop, do you mean `checked`?',
+    );
+  },
   methods: {
     focus() {
       this.refSwitchNode?.focus();
@@ -42,13 +49,6 @@ const Switch = defineComponent({
       this.refSwitchNode = c;
     },
   },
-  created() {
-    warning(
-      hasProp(this, 'checked') || !('value' in this.$attrs),
-      'Switch',
-      '`value` is not validate prop, do you mean `checked`?',
-    );
-  },
 
   render() {
     const { prefixCls: customizePrefixCls, size, loading, disabled, ...restProps } = getOptionProps(
diff --git a/components/table/SelectionBox.tsx b/components/table/SelectionBox.tsx
index 1858a5e33..1804145d6 100644
--- a/components/table/SelectionBox.tsx
+++ b/components/table/SelectionBox.tsx
@@ -10,17 +10,17 @@ export default defineComponent({
   mixins: [BaseMixin],
   inheritAttrs: false,
   props: SelectionBoxProps,
-  data() {
-    return {
-      checked: false,
-    };
-  },
 
   setup() {
     return {
       unsubscribe: null,
     };
   },
+  data() {
+    return {
+      checked: false,
+    };
+  },
 
   created() {
     this.checked = this.getCheckState(this.$props);
diff --git a/components/table/SelectionCheckboxAll.tsx b/components/table/SelectionCheckboxAll.tsx
index 194b3c49b..0f944ea70 100644
--- a/components/table/SelectionCheckboxAll.tsx
+++ b/components/table/SelectionCheckboxAll.tsx
@@ -93,6 +93,13 @@ export default defineComponent({
   mixins: [BaseMixin],
   inheritAttrs: false,
   props: SelectionCheckboxAllProps,
+
+  setup() {
+    return {
+      defaultSelections: [],
+      unsubscribe: null,
+    };
+  },
   data() {
     const { $props: props } = this;
 
@@ -102,11 +109,12 @@ export default defineComponent({
     };
   },
 
-  setup() {
-    return {
-      defaultSelections: [],
-      unsubscribe: null,
-    };
+  watch: {
+    propsSymbol: {
+      handler() {
+        this.setCheckState(this.$props);
+      },
+    },
   },
 
   created() {
@@ -125,14 +133,6 @@ export default defineComponent({
         ];
   },
 
-  watch: {
-    propsSymbol: {
-      handler() {
-        this.setCheckState(this.$props);
-      },
-    },
-  },
-
   mounted() {
     this.subscribe();
   },
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index 162a53fbc..363706c29 100755
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -170,13 +170,6 @@ export default defineComponent({
       filterDataCnt: 0,
     };
   },
-  created() {
-    const props = getOptionProps(this);
-    this.store = createStore({
-      selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
-      selectionDirty: false,
-    });
-  },
   watch: {
     pagination: {
       handler(val) {
@@ -242,6 +235,13 @@ export default defineComponent({
       deep: true,
     },
   },
+  created() {
+    const props = getOptionProps(this);
+    this.store = createStore({
+      selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
+      selectionDirty: false,
+    });
+  },
   updated() {
     const { columns, sSortColumn: sortColumn, sSortOrder: sortOrder } = this;
     if (this.getSortOrderColumns(columns).length > 0) {
diff --git a/components/table/createBodyRow.tsx b/components/table/createBodyRow.tsx
index 23c0fa4cf..566003b8a 100644
--- a/components/table/createBodyRow.tsx
+++ b/components/table/createBodyRow.tsx
@@ -15,6 +15,11 @@ export default function createBodyRow(Component = 'tr') {
     name: 'BodyRow',
     inheritAttrs: false,
     props: BodyRowProps,
+    setup() {
+      return {
+        unsubscribe: null,
+      };
+    },
     data() {
       const { selectedRowKeys } = this.store.getState();
 
@@ -22,11 +27,6 @@ export default function createBodyRow(Component = 'tr') {
         selected: selectedRowKeys.indexOf(this.rowKey) >= 0,
       };
     },
-    setup() {
-      return {
-        unsubscribe: null,
-      };
-    },
     mounted() {
       this.subscribe();
     },
diff --git a/components/table/index.tsx b/components/table/index.tsx
index 889cb6d27..1f5326961 100644
--- a/components/table/index.tsx
+++ b/components/table/index.tsx
@@ -8,8 +8,8 @@ const Table = defineComponent({
   name: 'ATable',
   Column: T.Column,
   ColumnGroup: T.ColumnGroup,
-  props: defaultTableProps,
   inheritAttrs: false,
+  props: defaultTableProps,
   methods: {
     normalize(elements = []) {
       const columns = [];
diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx
index 3e52f3110..6fd75ab1e 100644
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@@ -76,8 +76,8 @@ export const TimePickerProps = () => ({
 
 const TimePicker = defineComponent({
   name: 'ATimePicker',
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   emits: ['update:value', 'update:open', 'change', 'openChange', 'focus', 'blur', 'keydown'],
   props: initDefaultProps(TimePickerProps(), {
     align: {
@@ -93,9 +93,6 @@ const TimePicker = defineComponent({
     focusOnOpen: true,
     allowClear: true,
   }),
-  created() {
-    provide('savePopupRef', this.savePopupRef);
-  },
   setup() {
     return {
       popupRef: null,
@@ -124,6 +121,9 @@ const TimePicker = defineComponent({
       this.setState({ sValue: stringToMoment(val, this.valueFormat) });
     },
   },
+  created() {
+    provide('savePopupRef', this.savePopupRef);
+  },
   methods: {
     getDefaultFormat() {
       const { format, use12Hours } = this;
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index e20589f36..e1f9eded9 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -57,8 +57,8 @@ export interface TransferLocale {
 
 const Transfer = defineComponent({
   name: 'ATransfer',
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: initDefaultProps(TransferProps, {
     dataSource: [],
     locale: {},
@@ -86,9 +86,6 @@ const Transfer = defineComponent({
       targetSelectedKeys: selectedKeys.filter(key => targetKeys.indexOf(key) > -1),
     };
   },
-  mounted() {
-    // this.currentProps = { ...this.$props }
-  },
   watch: {
     targetKeys() {
       this.updateState();
@@ -113,6 +110,9 @@ const Transfer = defineComponent({
       }
     },
   },
+  mounted() {
+    // this.currentProps = { ...this.$props }
+  },
   methods: {
     getSelectedKeysName(direction) {
       return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 75ff5bfe2..4fdbae9ba 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -21,8 +21,8 @@ const TreeSelect = defineComponent({
   SHOW_ALL,
   SHOW_PARENT,
   SHOW_CHILD,
-  inheritAttrs: false,
   name: 'ATreeSelect',
+  inheritAttrs: false,
   props: initDefaultProps(TreeSelectProps(), {
     transitionName: 'slide-up',
     choiceTransitionName: '',
diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx
index b0d93b5e2..f66ff57ce 100644
--- a/components/tree/DirectoryTree.tsx
+++ b/components/tree/DirectoryTree.tsx
@@ -88,9 +88,6 @@ export default defineComponent({
       ...state,
     };
   },
-  created() {
-    this.onDebounceExpand = debounce(this.expandFolderNode, 200, { leading: true });
-  },
   watch: {
     expandedKeys(val) {
       this.setState({ _expandedKeys: val });
@@ -99,6 +96,9 @@ export default defineComponent({
       this.setState({ _selectedKeys: val });
     },
   },
+  created() {
+    this.onDebounceExpand = debounce(this.expandFolderNode, 200, { leading: true });
+  },
   methods: {
     handleExpand(expandedKeys, info) {
       this.setUncontrolledState({ _expandedKeys: expandedKeys });
diff --git a/components/vc-drawer/src/Drawer.js b/components/vc-drawer/src/Drawer.js
index d69f6e167..43c21d7c6 100644
--- a/components/vc-drawer/src/Drawer.js
+++ b/components/vc-drawer/src/Drawer.js
@@ -64,32 +64,6 @@ const Drawer = defineComponent({
       container: undefined,
     };
   },
-  mounted() {
-    nextTick(() => {
-      if (!windowIsUndefined) {
-        let passiveSupported = false;
-        window.addEventListener(
-          'test',
-          null,
-          Object.defineProperty({}, 'passive', {
-            get: () => {
-              passiveSupported = true;
-              return null;
-            },
-          }),
-        );
-        this.passive = passiveSupported ? { passive: false } : false;
-      }
-      const open = this.getOpen();
-      if (this.handler || open || this.sFirstEnter) {
-        this.getDefault(this.$props);
-        if (open) {
-          this.isOpenChange = true;
-        }
-        this.$forceUpdate();
-      }
-    });
-  },
   watch: {
     open(val) {
       if (val !== undefined && val !== this.preProps.open) {
@@ -118,6 +92,32 @@ const Drawer = defineComponent({
       this.preProps.level = val;
     },
   },
+  mounted() {
+    nextTick(() => {
+      if (!windowIsUndefined) {
+        let passiveSupported = false;
+        window.addEventListener(
+          'test',
+          null,
+          Object.defineProperty({}, 'passive', {
+            get: () => {
+              passiveSupported = true;
+              return null;
+            },
+          }),
+        );
+        this.passive = passiveSupported ? { passive: false } : false;
+      }
+      const open = this.getOpen();
+      if (this.handler || open || this.sFirstEnter) {
+        this.getDefault(this.$props);
+        if (open) {
+          this.isOpenChange = true;
+        }
+        this.$forceUpdate();
+      }
+    });
+  },
   updated() {
     nextTick(() => {
       // dom 没渲染时，重走一遍。
diff --git a/components/vc-slick/src/slider.js b/components/vc-slick/src/slider.js
index e0ffa016e..54c2b57b1 100644
--- a/components/vc-slick/src/slider.js
+++ b/components/vc-slick/src/slider.js
@@ -12,46 +12,14 @@ export default defineComponent({
   props: {
     ...defaultProps,
   },
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   data() {
     this._responsiveMediaHandlers = [];
     return {
       breakpoint: null,
     };
   },
-  methods: {
-    innerSliderRefHandler(ref) {
-      this.innerSlider = ref;
-    },
-    media(query, handler) {
-      // javascript handler for  css media query
-      const mql = window.matchMedia(query);
-      const listener = ({ matches }) => {
-        if (matches) {
-          handler();
-        }
-      };
-      mql.addListener(listener);
-      listener(mql);
-      this._responsiveMediaHandlers.push({ mql, query, listener });
-    },
-    slickPrev() {
-      this.innerSlider.slickPrev();
-    },
-    slickNext() {
-      this.innerSlider.slickNext();
-    },
-    slickGoTo(slide, dontAnimate = false) {
-      this.innerSlider.slickGoTo(slide, dontAnimate);
-    },
-    slickPause() {
-      this.innerSlider.pause('paused');
-    },
-    slickPlay() {
-      this.innerSlider.handleAutoPlay('play');
-    },
-  },
   // handles responsive breakpoints
   beforeMount() {
     if (this.responsive) {
@@ -92,6 +60,38 @@ export default defineComponent({
       obj.mql.removeListener(obj.listener);
     });
   },
+  methods: {
+    innerSliderRefHandler(ref) {
+      this.innerSlider = ref;
+    },
+    media(query, handler) {
+      // javascript handler for  css media query
+      const mql = window.matchMedia(query);
+      const listener = ({ matches }) => {
+        if (matches) {
+          handler();
+        }
+      };
+      mql.addListener(listener);
+      listener(mql);
+      this._responsiveMediaHandlers.push({ mql, query, listener });
+    },
+    slickPrev() {
+      this.innerSlider.slickPrev();
+    },
+    slickNext() {
+      this.innerSlider.slickNext();
+    },
+    slickGoTo(slide, dontAnimate = false) {
+      this.innerSlider.slickGoTo(slide, dontAnimate);
+    },
+    slickPause() {
+      this.innerSlider.pause('paused');
+    },
+    slickPlay() {
+      this.innerSlider.handleAutoPlay('play');
+    },
+  },
 
   render() {
     let settings;
diff --git a/components/vc-slider/src/Slider.jsx b/components/vc-slider/src/Slider.jsx
index e8f58b81d..2f56541d9 100644
--- a/components/vc-slider/src/Slider.jsx
+++ b/components/vc-slider/src/Slider.jsx
@@ -8,8 +8,8 @@ import { defineComponent } from 'vue';
 
 const Slider = defineComponent({
   name: 'Slider',
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     defaultValue: PropTypes.number,
     value: PropTypes.number,
diff --git a/components/vc-slider/src/common/createSlider.jsx b/components/vc-slider/src/common/createSlider.jsx
index 00b481f6b..329440dd4 100644
--- a/components/vc-slider/src/common/createSlider.jsx
+++ b/components/vc-slider/src/common/createSlider.jsx
@@ -36,9 +36,9 @@ export default function createSlider(Component) {
     autofocus: PropTypes.looseBool,
   };
   return defineComponent({
-    name: 'createSlider',
-    inheritAttrs: false,
+    name: 'CreateSlider',
     mixins: [BaseMixin, Component],
+    inheritAttrs: false,
     // model: {
     //   prop: 'value',
     //   event: 'change',
diff --git a/components/vc-time-picker/Panel.jsx b/components/vc-time-picker/Panel.jsx
index ce25c60a1..d3a0d57aa 100644
--- a/components/vc-time-picker/Panel.jsx
+++ b/components/vc-time-picker/Panel.jsx
@@ -34,8 +34,8 @@ function toNearestValidTime(time, hourOptions, minuteOptions, secondOptions) {
 
 const Panel = defineComponent({
   name: 'Panel',
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: {
     clearText: PropTypes.string,
     prefixCls: PropTypes.string.def('rc-time-picker-panel'),
diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx
index 8389d561d..80f9f1493 100644
--- a/components/vc-tree-select/src/Select.jsx
+++ b/components/vc-tree-select/src/Select.jsx
@@ -68,8 +68,8 @@ function getWatch(keys = []) {
 }
 const Select = defineComponent({
   name: 'Select',
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: initDefaultProps(
     {
       prefixCls: PropTypes.string,
diff --git a/components/vc-tree/src/Tree.jsx b/components/vc-tree/src/Tree.jsx
index 28c769bdf..eb4cb1049 100644
--- a/components/vc-tree/src/Tree.jsx
+++ b/components/vc-tree/src/Tree.jsx
@@ -43,8 +43,8 @@ function getWatch(keys = []) {
 
 const Tree = defineComponent({
   name: 'Tree',
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: initDefaultProps(
     {
       prefixCls: PropTypes.string,
diff --git a/components/vc-tree/src/TreeNode.jsx b/components/vc-tree/src/TreeNode.jsx
index 7971c4eff..9d2530373 100644
--- a/components/vc-tree/src/TreeNode.jsx
+++ b/components/vc-tree/src/TreeNode.jsx
@@ -14,8 +14,8 @@ const defaultTitle = '---';
 
 const TreeNode = defineComponent({
   name: 'TreeNode',
-  inheritAttrs: false,
   mixins: [BaseMixin],
+  inheritAttrs: false,
   __ANT_TREE_NODE: true,
   props: initDefaultProps(
     {
@@ -52,6 +52,12 @@ const TreeNode = defineComponent({
     },
     {},
   ),
+  setup() {
+    return {
+      vcTree: inject('vcTree', {}),
+      vcTreeNode: inject('vcTreeNode', {}),
+    };
+  },
 
   data() {
     this.children = null;
@@ -59,12 +65,6 @@ const TreeNode = defineComponent({
       dragNodeHighlight: false,
     };
   },
-  setup() {
-    return {
-      vcTree: inject('vcTree', {}),
-      vcTreeNode: inject('vcTreeNode', {}),
-    };
-  },
   created() {
     provide('vcTreeNode', this);
   },
diff --git a/components/vc-trigger/Trigger.jsx b/components/vc-trigger/Trigger.jsx
index 21e5163a4..6b1f0e3e2 100644
--- a/components/vc-trigger/Trigger.jsx
+++ b/components/vc-trigger/Trigger.jsx
@@ -76,6 +76,13 @@ export default defineComponent({
     stretch: PropTypes.string,
     alignPoint: PropTypes.looseBool, // Maybe we can support user pass position in the future
   },
+  setup() {
+    return {
+      vcTriggerContext: inject('vcTriggerContext', {}),
+      savePopupRef: inject('savePopupRef', noop),
+      dialogContext: inject('dialogContext', null),
+    };
+  },
   data() {
     const props = this.$props;
     let popupVisible;
@@ -112,13 +119,6 @@ export default defineComponent({
   created() {
     provide('vcTriggerContext', this);
   },
-  setup() {
-    return {
-      vcTriggerContext: inject('vcTriggerContext', {}),
-      savePopupRef: inject('savePopupRef', noop),
-      dialogContext: inject('dialogContext', null),
-    };
-  },
   deactivated() {
     this.setPopupVisible(false);
   },
diff --git a/components/vc-virtual-list/List.tsx b/components/vc-virtual-list/List.tsx
index 765a6dab4..66062cb18 100644
--- a/components/vc-virtual-list/List.tsx
+++ b/components/vc-virtual-list/List.tsx
@@ -59,8 +59,8 @@ export interface ListState<T = object> {
 }
 
 const List = defineComponent({
-  inheritAttrs: false,
   name: 'List',
+  inheritAttrs: false,
   props: {
     prefixCls: PropTypes.string,
     data: PropTypes.array,
diff --git a/package.json b/package.json
index 68afa11e0..f315277ea 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,7 @@
     "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-markdown": "^2.0.0-alpha.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.1.0",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^8.0.0",
     "glob": "^7.1.2",
diff --git a/tests/shared/demoTest.js b/tests/shared/demoTest.js
index 924abfccc..3a0f7dc60 100644
--- a/tests/shared/demoTest.js
+++ b/tests/shared/demoTest.js
@@ -2,8 +2,8 @@ import glob from 'glob';
 import { mount } from '@vue/test-utils';
 import MockDate from 'mockdate';
 import moment from 'moment';
-import { nextTick } from 'vue';
 import antd from 'ant-design-vue';
+import { sleep } from '../utils';
 
 export default function demoTest(component, options = {}) {
   const suffix = options.suffix || 'md';
@@ -14,22 +14,20 @@ export default function demoTest(component, options = {}) {
     if (Array.isArray(options.skip) && options.skip.some(c => file.includes(c))) {
       testMethod = test.skip;
     }
-    testMethod(`renders ${file} correctly`, done => {
+    testMethod(`renders ${file} correctly`, async () => {
       MockDate.set(moment('2016-11-22'));
       const demo = require(`../.${file}`).default || require(`../.${file}`);
       document.body.innerHTML = '';
       const wrapper = mount(demo, { global: { plugins: [antd] }, attachTo: document.body });
-      nextTick(() => {
-        // should get dom from element
-        // snap files copy from antd does not need to change
-        // or just change a little
-        const dom = options.getDomFromElement ? wrapper.element : wrapper.html();
-        expect(dom).toMatchSnapshot();
-        MockDate.reset();
-        // wrapper.unmount();
-        document.body.innerHTML = '';
-        done();
-      });
+      await sleep();
+      // should get dom from element
+      // snap files copy from antd does not need to change
+      // or just change a little
+      const dom = options.getDomFromElement ? wrapper.element : wrapper.html();
+      expect(dom).toMatchSnapshot();
+      MockDate.reset();
+      // wrapper.unmount();
+      document.body.innerHTML = '';
     });
   });
 }