diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 2a32dcc26..258eca052 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -71,6 +71,7 @@ var listTemplate = []
 ComponentNames.forEach((name) => {
   if (
     [
+      'autocomplete',
       'infinite-scroll',
       'loading',
       'image',
diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md
index 5db9b31e8..92ba19883 100644
--- a/examples/docs/zh-CN/form.md
+++ b/examples/docs/zh-CN/form.md
@@ -10,13 +10,13 @@
 ```html
 <el-form ref="form" :model="form" label-width="auto">
   <el-form-item label="活动名称">
-    <el-input v-model="form.name"></el-input>
+    <el-input v-model="name"></el-input>
   </el-form-item>
   <el-form-item label="即时配送">
-    <el-switch v-model="form.delivery"></el-switch>
+    <el-switch v-model="delivery"></el-switch>
   </el-form-item>
   <el-form-item label="活动性质">
-    <el-checkbox-group v-model="form.type">
+    <el-checkbox-group v-model="type">
       <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
       <el-checkbox label="地推活动" name="type"></el-checkbox>
       <el-checkbox label="线下主题活动" name="type"></el-checkbox>
@@ -24,23 +24,25 @@
     </el-checkbox-group>
   </el-form-item>
   <el-form-item label="特殊资源">
-    <el-radio-group v-model="form.resource">
+    <el-radio-group v-model="resource">
       <el-radio label="线上品牌商赞助"></el-radio>
       <el-radio label="线下场地免费"></el-radio>
     </el-radio-group>
   </el-form-item>
   <el-form-item label="活动形式">
-    <el-input type="textarea" v-model="form.desc"></el-input>
+    <el-input type="textarea" v-model="desc"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="onSubmit">立即创建</el-button>
     <el-button>取消</el-button>
   </el-form-item>
 </el-form>
+
 <script>
-  export default {
-    data() {
-      return {
+import { reactive , toRefs} from 'vue'
+export default {
+    setup(){
+      const data = reactive({
         form: {
           name: '',
           region: '',
@@ -51,11 +53,14 @@
           resource: '',
           desc: ''
         }
+      })
+      const onSubmit = () => {
+        console.log('submit!')
       }
-    },
-    methods: {
-      onSubmit() {
-        console.log('submit!', this.form);
+      
+      return {
+        ...toRefs(data.form),
+        onSubmit
       }
     }
   }
@@ -72,29 +77,33 @@
 ```html
 <el-form :inline="true" :model="formInline" class="demo-form-inline">
   <el-form-item label="审批人">
-    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
+    <el-input v-model="user" placeholder="审批人"></el-input>
   </el-form-item>
   <el-form-item label="发送通知">
-    <el-switch v-model="formInline.delivery"></el-switch>
+    <el-switch v-model="delivery"></el-switch>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="onSubmit">查询</el-button>
   </el-form-item>
 </el-form>
 <script>
+  import { reactive , toRefs} from 'vue'
   export default {
-    data() {
-      return {
+    setup(){
+      const data = reactive({
         formInline: {
-          user: '',
-          delivery: false
-        }
-      }
-    },
-    methods: {
-      onSubmit() {
+            user: '',
+            delivery: false
+          }
+      })
+      const onSubmit = () => {
         console.log('submit!');
       }
+
+      return {
+        ...toRefs(data.formInline),
+        onSubmit
+      }
     }
   }
 </script>
@@ -115,33 +124,38 @@
 <div style="margin: 20px;"></div>
 <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
   <el-form-item label="名称">
-    <el-input v-model="formLabelAlign.name"></el-input>
+    <el-input v-model="name"></el-input>
   </el-form-item>
   <el-form-item label="活动区域">
-    <el-input v-model="formLabelAlign.region"></el-input>
+    <el-input v-model="region"></el-input>
   </el-form-item>
   <el-form-item label="活动形式">
-    <el-input v-model="formLabelAlign.type"></el-input>
+    <el-input v-model="type"></el-input>
   </el-form-item>
 </el-form>
 <script>
+  import { reactive , toRefs , ref } from 'vue'
   export default {
-    data() {
-      return {
-        labelPosition: 'right',
+    setup(){
+      const labelPosition = ref('right');
+      const data = reactive({
         formLabelAlign: {
           name: '',
           region: '',
           type: ''
         }
-      };
+      })
+       return {
+        labelPosition,
+        ...toRefs(data.formLabelAlign)
+       }
     }
   }
 </script>
 ```
 :::
 
-### 表单验证
+<!-- ### 表单验证
 
 在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
 
@@ -149,13 +163,13 @@
 ```html
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
   <el-form-item label="活动名称" prop="name">
-    <el-input v-model="ruleForm.name"></el-input>
+    <el-input v-model="name"></el-input>
   </el-form-item>
   <el-form-item label="即时配送" prop="delivery">
-    <el-switch v-model="ruleForm.delivery"></el-switch>
+    <el-switch v-model="delivery"></el-switch>
   </el-form-item>
   <el-form-item label="活动性质" prop="type">
-    <el-checkbox-group v-model="ruleForm.type">
+    <el-checkbox-group v-model="type">
       <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
       <el-checkbox label="地推活动" name="type"></el-checkbox>
       <el-checkbox label="线下主题活动" name="type"></el-checkbox>
@@ -163,13 +177,13 @@
     </el-checkbox-group>
   </el-form-item>
   <el-form-item label="特殊资源" prop="resource">
-    <el-radio-group v-model="ruleForm.resource">
+    <el-radio-group v-model="resource">
       <el-radio label="线上品牌商赞助"></el-radio>
       <el-radio label="线下场地免费"></el-radio>
     </el-radio-group>
   </el-form-item>
   <el-form-item label="活动形式" prop="desc">
-    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
+    <el-input type="textarea" v-model="desc"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
@@ -177,11 +191,12 @@
   </el-form-item>
 </el-form>
 <script>
+  import { reactive , toRefs , getCurrentInstance } from 'vue' 
   export default {
-    data() {
-      return {
+    setup(){
+      const ruleForm = reactive({
         ruleForm: {
-          name: 'aaa',
+          name: '',
           region: '',
           date1: '',
           date2: '',
@@ -189,7 +204,9 @@
           type: [],
           resource: '',
           desc: ''
-        },
+        }
+      })
+      const rules = reactive({
         rules: {
           name: [
             { required: true, message: '请输入活动名称', trigger: 'blur' },
@@ -205,11 +222,10 @@
             { required: true, message: '请填写活动形式', trigger: 'blur' }
           ]
         }
-      };
-    },
-    methods: {
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
+      })
+      const self = getCurrentInstance().ctx;
+      function submitForm(formName) {
+        self.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -217,17 +233,24 @@
             return false;
           }
         });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
+      }
+      function resetForm(formName) {
+        self.$refs[formName].resetFields();
+      }
+
+      return {
+        ...toRefs(ruleForm.ruleForm),
+        ...toRefs(rules),
+        submitForm,
+        resetForm
       }
     }
   }
 </script>
 ```
-:::
+::: -->
 
-### 自定义校验规则
+<!-- ### 自定义校验规则
 
 这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
 
@@ -323,11 +346,11 @@
   }
 </script>
 ```
-:::
+::: -->
 
-:::tip
+<!-- :::tip
 自定义校验 callback 必须被调用。 更多高级用法可参考 [async-validator](https://github.com/yiminghe/async-validator)。
-:::
+::: -->
 
 ### Form Attributes
 
diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md
index f896e4eb9..2df6d66f1 100644
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@@ -17,11 +17,12 @@ Input 为受控组件，它**总会显示 Vue 绑定值**。
 <el-input v-model="input" placeholder="请输入内容"></el-input>
 
 <script>
+import { ref } from 'vue';
 export default {
-  data() {
-    return {
-      input: ''
-    }
+  setup(){
+    const input = ref('');
+
+    return { input }
   }
 }
 </script>
@@ -40,11 +41,12 @@ export default {
 </el-input>
 
 <script>
+import { ref } from 'vue';
 export default {
-  data() {
-    return {
-      input: ''
-    }
+  setup(){
+    const input = ref('');
+
+    return { input }
   }
 }
 </script>
@@ -63,13 +65,14 @@ export default {
 </el-input>
 
 <script>
-  export default {
-    data() {
-      return {
-        input: ''
-      }
-    }
+import { ref } from 'vue';
+export default {
+  setup(){
+    const input = ref('');
+
+    return { input }
   }
+}
 </script>
 ```
 :::
@@ -82,13 +85,14 @@ export default {
 <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
 
 <script>
-  export default {
-    data() {
-      return {
-        input: ''
-      }
-    }
+import { ref } from 'vue';
+export default {
+  setup(){
+    const input = ref('');
+
+    return { input }
   }
+}
 </script>
 ```
 :::
@@ -117,12 +121,16 @@ export default {
   <el-input
     placeholder="请选择日期"
     v-model="input3">
-    <i slot="suffix" class="el-input__icon el-icon-date"></i>
+    <template v-slot:suffix>
+     <i class="el-input__icon el-icon-date"></i>
+    </template>
   </el-input>
   <el-input
     placeholder="请输入内容"
     v-model="input4">
-    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+    <template v-slot:prefix>
+     <i class="el-input__icon el-icon-search"></i>
+    </template>
   </el-input>
 </div>
 
@@ -155,11 +163,12 @@ export default {
 </el-input>
 
 <script>
+import { ref } from 'vue';
 export default {
-  data() {
-    return {
-      textarea: ''
-    }
+  setup(){
+    const textarea = ref('');
+
+    return { textarea }
   }
 }
 </script>
@@ -187,11 +196,15 @@ export default {
 </el-input>
 
 <script>
+import { ref } from 'vue';
 export default {
-  data() {
+  setup(){
+    const textarea1 = ref('');
+    const textarea2 = ref('');
+
     return {
-      textarea1: '',
-      textarea2: ''
+      textarea1,
+      textarea2
     }
   }
 }
@@ -207,22 +220,26 @@ export default {
 ```html
 <div>
   <el-input placeholder="请输入内容" v-model="input1">
-    <template slot="prepend">Http://</template>
+    <template v-slot:prepend>Http://</template>
   </el-input>
 </div>
 <div style="margin-top: 15px;">
   <el-input placeholder="请输入内容" v-model="input2">
-    <template slot="append">.com</template>
+    <template v-slot:append>.com</template>
   </el-input>
 </div>
 <div style="margin-top: 15px;">
   <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-    <el-select v-model="select" slot="prepend" placeholder="请选择">
-      <el-option label="餐厅名" value="1"></el-option>
-      <el-option label="订单号" value="2"></el-option>
-      <el-option label="用户电话" value="3"></el-option>
-    </el-select>
-    <el-button slot="append" icon="el-icon-search"></el-button>
+    <template v-slot:prepend>
+      <el-select v-model="select"  placeholder="请选择">
+        <el-option label="餐厅名" value="1"></el-option>
+        <el-option label="订单号" value="2"></el-option>
+        <el-option label="用户电话" value="3"></el-option>
+      </el-select>
+    </template>
+    <template v-slot:append>
+      <el-button icon="el-icon-search"></el-button>
+    </template>
   </el-input>
 </div>
 <style>
@@ -234,13 +251,19 @@ export default {
   }
 </style>
 <script>
+import { ref } from 'vue';
 export default {
-  data() {
+  setup(){
+    const input1 = ref('');
+    const input2 = ref('');
+    const input3 = ref('');
+    const select = ref('');
+
     return {
-      input1: '',
-      input2: '',
-      input3: '',
-      select: ''
+      input1,
+      input2,
+      input3,
+      select,
     }
   }
 }
@@ -279,13 +302,19 @@ export default {
 </div>
 
 <script>
+import { ref } from 'vue';
 export default {
-  data() {
+  setup(){
+    const input1 = ref('');
+    const input2 = ref('');
+    const input3 = ref('');
+    const input4 = ref('');
+
     return {
-      input1: '',
-      input2: '',
-      input3: '',
-      input4: ''
+      input1,
+      input2,
+      input3,
+      input4,
     }
   }
 }
@@ -293,7 +322,7 @@ export default {
 ```
 :::
 
-### 带输入建议
+<!-- ### 带输入建议
 
 根据输入内容提供对应的输入建议
 
@@ -638,7 +667,7 @@ export default {
   };
 </script>
 ```
-:::
+::: -->
 
 ### 输入长度限制
 
@@ -663,11 +692,15 @@ export default {
 </el-input>
 
 <script>
+import { ref } from 'vue';
 export default {
-  data() {
+  setup(){
+    const text = ref('');
+    const textarea = ref('');
+
     return {
-      text: '',
-      textarea: ''
+      text,
+      textarea
     }
   }
 }
@@ -731,7 +764,7 @@ export default {
 | blur | 使 input 失去焦点 | — |
 | select | 选中 input 中的文字 | — |
 
-### Autocomplete Attributes
+<!-- ### Autocomplete Attributes
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
@@ -775,4 +808,4 @@ export default {
 ### Autocomplete Methods
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
-| focus | 使 input 获取焦点 | - |
\ No newline at end of file
+| focus | 使 input 获取焦点 | - | -->
\ No newline at end of file
diff --git a/packages/link/Link.vue b/packages/link/Link.vue
index a0a026a2b..59394b42f 100644
--- a/packages/link/Link.vue
+++ b/packages/link/Link.vue
@@ -37,7 +37,7 @@ export default {
     href: String,
     icon: String
   },
-
+  emits: ['click'],
   setup(props, { emit }) {
     const handleClick = (evt) => {
       if (props.disabled) return
diff --git a/src/entry.js b/src/entry.js
index d63dec658..2b3b643c9 100644
--- a/src/entry.js
+++ b/src/entry.js
@@ -88,6 +88,7 @@ import ElBacktop from '../packages/backtop'
 import ElInfiniteScroll from '../packages/infinite-scroll'
 import ElDrawer from '../packages/drawer'
 import ElScrollbar from '../packages/scrollbar'
+import ElAutocomplete from '../packages/autocomplete'
 
 import { version } from '../package.json'
 
@@ -168,7 +169,8 @@ const components = [
   ElImage,
   ElInfiniteScroll,
   ElDrawer,
-  ElScrollbar
+  ElScrollbar,
+  ElAutocomplete
 ]
 
 const install = (app, opts = {}) => {
@@ -270,6 +272,7 @@ export {
   ElCalendar,
   ElImage,
   ElScrollbar,
+  ElAutocomplete,
   useMessage,
   useLoading,
   useMsgbox,