diff --git a/.babelrc b/.babelrc
index ebecd938d..7d02cefbb 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,7 +1,7 @@
 {
   "env": {
     "test": {
-      "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]],
+      "presets": [["env", { "targets": { "node": "current" } }]],
       "plugins": [
         ["@ant-design-vue/babel-plugin-jsx", { "usePatchFlag": false }],
         "babel-plugin-inline-import-data-uri",
@@ -11,7 +11,8 @@
         "@babel/plugin-transform-object-assign",
         "@babel/plugin-transform-template-literals",
         "@babel/plugin-proposal-object-rest-spread",
-        "@babel/plugin-proposal-class-properties"
+        "@babel/plugin-proposal-class-properties",
+        "transform-runtime"
       ]
     }
   }
diff --git a/antdv-demo b/antdv-demo
index 5dfdfff5b..be021daaf 160000
--- a/antdv-demo
+++ b/antdv-demo
@@ -1 +1 @@
-Subproject commit 5dfdfff5b84743a979ff315bd6d44fe9810e0dc0
+Subproject commit be021daafff40a95ec5bdb5a0d2123abd6ec725b
diff --git a/components/affix/index.jsx b/components/affix/index.jsx
index 2f22ce4e1..eb0778eaa 100644
--- a/components/affix/index.jsx
+++ b/components/affix/index.jsx
@@ -33,6 +33,8 @@ const AffixProps = {
   /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
   target: PropTypes.func.def(getDefaultTarget),
   prefixCls: PropTypes.string,
+  onChange: PropTypes.func,
+  onTestUpdatePosition: PropTypes.func,
 };
 const AffixStatus = {
   None: 'none',
diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js
index ac1361d47..e1b37f182 100644
--- a/components/badge/__tests__/index.test.js
+++ b/components/badge/__tests__/index.test.js
@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { render } from '@vue/server-test-utils';
 import Badge from '../index';
 
 import { asyncExpect } from '@/tests/utils';
@@ -13,7 +12,7 @@ describe('Badge', () => {
     expect(badge.findAll('.ant-card-multiple-words').length).toBe(0);
   });
   it('badge should support float number', () => {
-    let wrapper = render({
+    let wrapper = mount({
       render() {
         return <Badge count={3.5} />;
       },
diff --git a/components/index.js b/components/index.js
index 226826aaa..674b71f30 100644
--- a/components/index.js
+++ b/components/index.js
@@ -29,8 +29,6 @@ import { default as BackTop } from './back-top';
 
 import { default as Badge } from './badge';
 
-import { default as Base } from './base';
-
 import { default as Breadcrumb } from './breadcrumb';
 
 import { default as Button } from './button';
@@ -55,7 +53,6 @@ import { default as Divider } from './divider';
 
 import { default as Dropdown } from './dropdown';
 
-import { default as Form } from './form';
 import { default as FormModel } from './form-model';
 
 import { default as Icon } from './icon';
@@ -148,7 +145,6 @@ import { default as Descriptions } from './descriptions';
 import { default as PageHeader } from './page-header';
 
 const components = [
-  Base,
   Affix,
   Anchor,
   AutoComplete,
@@ -168,7 +164,6 @@ const components = [
   DatePicker,
   Divider,
   Dropdown,
-  Form,
   FormModel,
   Icon,
   Input,
@@ -213,28 +208,24 @@ const components = [
   PageHeader,
 ];
 
-const install = function(Vue) {
+const install = function(app) {
   components.map(component => {
-    Vue.use(component);
+    app.use(component);
   });
 
-  Vue.prototype.$message = message;
-  Vue.prototype.$notification = notification;
-  Vue.prototype.$info = Modal.info;
-  Vue.prototype.$success = Modal.success;
-  Vue.prototype.$error = Modal.error;
-  Vue.prototype.$warning = Modal.warning;
-  Vue.prototype.$confirm = Modal.confirm;
-  Vue.prototype.$destroyAll = Modal.destroyAll;
+  app.config.globalProperties.$message = message;
+  app.config.globalProperties.$notification = notification;
+  app.config.globalProperties.$info = Modal.info;
+  app.config.globalProperties.$success = Modal.success;
+  app.config.globalProperties.$error = Modal.error;
+  app.config.globalProperties.$warning = Modal.warning;
+  app.config.globalProperties.$confirm = Modal.confirm;
+  app.config.globalProperties.$destroyAll = Modal.destroyAll;
 };
 
 /* istanbul ignore if */
-if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue);
-}
 
 export {
-  Base,
   version,
   install,
   message,
@@ -258,7 +249,6 @@ export {
   DatePicker,
   Divider,
   Dropdown,
-  Form,
   FormModel,
   Icon,
   Input,
diff --git a/examples/App.vue b/examples/App.vue
index fded2e31f..c620a40e8 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/table/demo/ajax';
+import demo from '../antdv-demo/docs/affix/demo/index';
 
 export default {
   components: {
diff --git a/examples/index.js b/examples/index.js
index 056e6f309..24793e5b7 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -3,6 +3,7 @@ import 'ant-design-vue/style.js';
 import { createApp, version } from 'vue';
 import App from './App.vue';
 import {
+  Affix,
   Badge,
   AutoComplete,
   Radio,
@@ -45,20 +46,18 @@ import {
 
 // eslint-disable-next-line no-console
 console.log('Vue version: ', version);
-const basic = {
-  render() {
-    return this.$slots?.default();
-  },
+const basic = (_, { slots }) => {
+  return slots?.default();
 };
 const app = createApp(App);
 app.config.globalProperties.$notification = notification;
 app.config.globalProperties.$message = message;
 app
-  .component('demo-sort', { ...basic })
-  .component('md', { ...basic })
-  .component('api', { ...basic })
-  .component('CN', { ...basic })
-  .component('US', { ...basic })
+  .component('demo-sort', basic)
+  .component('md', basic)
+  .component('api', basic)
+  .component('CN', basic)
+  .component('US', basic)
   .use(Pagination)
   .use(Select)
   .use(Spin)
@@ -95,4 +94,5 @@ app
   .use(Table)
   .use(Tag)
   .use(Divider)
+  .use(Affix)
   .mount('#app');
diff --git a/package.json b/package.json
index c8da77b92..5b7232704 100644
--- a/package.json
+++ b/package.json
@@ -54,8 +54,8 @@
   },
   "homepage": "https://www.antdv.com/",
   "peerDependencies": {
-    "vue": ">=2.6.0",
-    "vue-template-compiler": ">=2.6.0"
+    "vue": ">=3.0.0",
+    "@vue/compiler-sfc": ">=3.0.0"
   },
   "devDependencies": {
     "@ant-design-vue/babel-plugin-jsx": "^1.0.0-beta.3",
@@ -68,6 +68,7 @@
     "@babel/plugin-transform-member-expression-literals": "^7.8.3",
     "@babel/plugin-transform-object-assign": "^7.8.3",
     "@babel/plugin-transform-property-literals": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.5",
     "@babel/plugin-transform-template-literals": "^7.8.3",
     "@babel/polyfill": "^7.8.7",
     "@babel/preset-env": "^7.9.6",
@@ -82,7 +83,7 @@
     "acorn": "^7.0.0",
     "autoprefixer": "^9.6.0",
     "axios": "^0.19.0",
-    "babel-core": "~7.0.0-bridge.0",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.0",
@@ -151,6 +152,7 @@
     "stylelint-config-standard": "^19.0.0",
     "terser-webpack-plugin": "^3.0.3",
     "through2": "^3.0.0",
+    "typescript": "^3.9.7",
     "url-loader": "^3.0.0",
     "vue": "^3.0.0-rc.2",
     "vue-antd-md-loader": "^1.1.0",
@@ -159,7 +161,7 @@
     "vue-eslint-parser": "^7.0.0",
     "vue-i18n": "^8.3.2",
     "vue-infinite-scroll": "^2.0.2",
-    "vue-jest": "^3.0.5",
+    "vue-jest": "^5.0.0-alpha.1",
     "vue-loader": "^16.0.0-beta.4",
     "vue-router": "^4.0.0-alpha.12",
     "vue-server-renderer": "^2.6.11",
diff --git a/tests/shared/demoTest.js b/tests/shared/demoTest.js
index c3ddbdb6e..6c8b65566 100644
--- a/tests/shared/demoTest.js
+++ b/tests/shared/demoTest.js
@@ -2,9 +2,8 @@ import glob from 'glob';
 import { mount } from '@vue/test-utils';
 import MockDate from 'mockdate';
 import moment from 'moment';
-import Vue from 'vue';
+import { createApp, nextTick } from 'vue';
 import antd from 'ant-design-vue';
-Vue.use(antd);
 
 export default function demoTest(component, options = {}) {
   const suffix = options.suffix || 'md';
@@ -20,7 +19,8 @@ export default function demoTest(component, options = {}) {
       const demo = require(`../.${file}`).default || require(`../.${file}`);
       document.body.innerHTML = '';
       const wrapper = mount(demo, { sync: false, attachToDocument: true });
-      Vue.nextTick(() => {
+      createApp(wrapper).use(antd);
+      nextTick(() => {
         // should get dom from element
         // snap files copy from antd does not need to change
         // or just change a little