diff --git a/packages/alert/Alert.vue b/packages/alert/Alert.vue
index abcffed04..f36f2a145 100644
--- a/packages/alert/Alert.vue
+++ b/packages/alert/Alert.vue
@@ -82,7 +82,7 @@ export default {
   },
   emits: ['close'],
   setup(props, { emit, slots }) {
-    const { title, description, type } = toRefs(props)
+    const { description, type } = toRefs(props)
 
     const visible = ref(true)
     const close = () => {
@@ -107,9 +107,6 @@ export default {
     })
 
     return {
-      title,
-      description,
-      type,
       visible,
       typeClass,
       iconClass,
diff --git a/packages/autocomplete/src/autocomplete-suggestions.vue b/packages/autocomplete/src/autocomplete-suggestions.vue
index 1dbb02d01..3cb28f877 100644
--- a/packages/autocomplete/src/autocomplete-suggestions.vue
+++ b/packages/autocomplete/src/autocomplete-suggestions.vue
@@ -56,7 +56,7 @@ export default {
   },
 
   updated() {
-    this.$nextTick((_) => {
+    this.$nextTick(() => {
       this.popperJS && this.updatePopper()
     })
   },
@@ -74,6 +74,8 @@ export default {
   },
 
   created() {
+    // TODO $on 已经废弃了
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('visible', (val, inputWidth) => {
       this.dropdownWidth = inputWidth + 'px'
       this.showPopper = val
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index 69bd9cb79..d0c0f93ad 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -15,21 +15,21 @@
       @focus="handleFocus"
       @blur="handleBlur"
       @clear="handleClear"
-      @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
-      @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
-      @keydown.enter.native="handleKeyEnter"
-      @keydown.native.tab="close"
+      @keydown.up.prevent="highlight(highlightedIndex - 1)"
+      @keydown.down.prevent="highlight(highlightedIndex + 1)"
+      @keydown.enter="handleKeyEnter"
+      @keydown.tab="close"
     >
-      <template slot="prepend" v-if="$slots.prepend">
+      <template v-slot:prepend v-if="$slots.prepend">
         <slot name="prepend"></slot>
       </template>
-      <template slot="append" v-if="$slots.append">
+      <template v-slot:append v-if="$slots.append">
         <slot name="append"></slot>
       </template>
-      <template slot="prefix" v-if="$slots.prefix">
+      <template v-slot:prefix v-if="$slots.prefix">
         <slot name="prefix"></slot>
       </template>
-      <template slot="suffix" v-if="$slots.suffix">
+      <template v-slot:suffix v-if="$slots.suffix">
         <slot name="suffix"></slot>
       </template>
     </el-input>
@@ -217,7 +217,7 @@ export default {
       this.activated = false
       this.$emit('clear')
     },
-    close(e) {
+    close() {
       this.activated = false
     },
     handleKeyEnter(e) {
@@ -230,7 +230,7 @@ export default {
         this.select(this.suggestions[this.highlightedIndex])
       } else if (this.selectWhenUnmatched) {
         this.$emit('select', { value: this.value })
-        this.$nextTick((_) => {
+        this.$nextTick(() => {
           this.suggestions = []
           this.highlightedIndex = -1
         })
@@ -239,7 +239,7 @@ export default {
     select(item) {
       this.$emit('input', item[this.valueKey])
       this.$emit('select', item)
-      this.$nextTick((_) => {
+      this.$nextTick(() => {
         this.suggestions = []
         this.highlightedIndex = -1
       })
@@ -288,6 +288,8 @@ export default {
   },
   mounted() {
     this.debouncedGetData = debounce(this.debounce, this.getData)
+    // TODO $on 已经废弃
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('item-click', (item) => {
       this.select(item)
     })
@@ -300,7 +302,7 @@ export default {
       `${this.id}-item-${this.highlightedIndex}`
     )
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$refs.suggestions.$destroy()
   }
 }
diff --git a/packages/breadcrumb/BreadcrumbItem.vue b/packages/breadcrumb/BreadcrumbItem.vue
index 460e4b99c..8cd39fd20 100644
--- a/packages/breadcrumb/BreadcrumbItem.vue
+++ b/packages/breadcrumb/BreadcrumbItem.vue
@@ -26,7 +26,7 @@ export default {
     replace: Boolean
   },
   setup(props) {
-    const { to, replace } = toRefs(props)
+    const { replace } = toRefs(props)
     const separator = inject('separator')
     const separatorClass = inject('separatorClass')
     const link = ref(null)
@@ -34,15 +34,14 @@ export default {
     onMounted(() => {
       link.value.setAttribute('role', 'link')
       link.value.addEventListener('click', () => {
-        if (!to || !ctx.$router) return
-        replace ? ctx.$router.replace(to) : ctx.$router.push(to)
+        if (!props.to || !ctx.$router) return
+        replace ? ctx.$router.replace(props.to) : ctx.$router.push(props.to)
       })
     })
     return {
       separator,
       separatorClass,
-      link,
-      to
+      link
     }
   }
 }
diff --git a/packages/calendar/Calendar.vue b/packages/calendar/Calendar.vue
index 929827ba8..a3d740c66 100644
--- a/packages/calendar/Calendar.vue
+++ b/packages/calendar/Calendar.vue
@@ -101,7 +101,7 @@ export default {
     }
   },
   emits: ['input', 'update:modelValue'],
-  setup(props, { attrs, emit, slots }) {
+  setup(props, { emit }) {
     const instance = getCurrentInstance()
 
     provide('elCalendar', instance)
@@ -167,8 +167,8 @@ export default {
         if (realSelectedDay.value) {
           const d = state.selectedDay.split('-')
           return new Date(d[0], d[1] - 1, d[2])
-        } else if (validatedRange.length) {
-          return validatedRange[0][0]
+        } else if (validatedRange.value.length) {
+          return validatedRange.value[0][0]
         }
         return state.now
       } else {
diff --git a/packages/calendar/DateTable.vue b/packages/calendar/DateTable.vue
index 6e030410c..04c6d0921 100644
--- a/packages/calendar/DateTable.vue
+++ b/packages/calendar/DateTable.vue
@@ -26,7 +26,7 @@ export default {
     firstDayOfWeek: Number
   },
 
-  setup(props, { attrs, emit, slots }) {
+  setup(props, { emit }) {
     const { selectedDay, date, hideHeader, firstDayOfWeek } = toRefs(props)
     const WEEK_DAYS = ref(getI18nSettings().dayNames)
 
diff --git a/packages/carousel/Carousel.vue b/packages/carousel/Carousel.vue
index fea23193e..a7b74ea39 100644
--- a/packages/carousel/Carousel.vue
+++ b/packages/carousel/Carousel.vue
@@ -245,7 +245,6 @@ export default {
       items,
       activeIndex,
       hover,
-      loop,
       arrowDisplay,
       handleButtonEnter,
       handleButtonLeave,
@@ -383,7 +382,7 @@ const useIndicator = (props, initData) => {
       'el-carousel__indicators',
       'el-carousel__indicators--' + props.direction
     ]
-    if (hasLabel) {
+    if (hasLabel.value) {
       classes.push('el-carousel__indicators--labels')
     }
     if (props.indicatorPosition === 'outside' || props.type === 'card') {
diff --git a/packages/cascader-panel/src/cascader-menu.vue b/packages/cascader-panel/src/cascader-menu.vue
index a8781e5d6..53337e581 100644
--- a/packages/cascader-panel/src/cascader-menu.vue
+++ b/packages/cascader-panel/src/cascader-menu.vue
@@ -77,14 +77,14 @@ export default {
       hoverZone.innerHTML = ''
     },
 
-    renderEmptyText(h) {
+    renderEmptyText() {
       return (
         <div class="el-cascader-menu__empty-text">
           {this.t('el.cascader.noData')}
         </div>
       )
     },
-    renderNodeList(h) {
+    renderNodeList() {
       const { menuId } = this
       const { isHoverMenu } = this.panel
       const events = { on: {} }
diff --git a/packages/cascader-panel/src/cascader-node.vue b/packages/cascader-panel/src/cascader-node.vue
index 7e9a9592e..a11ec4869 100644
--- a/packages/cascader-panel/src/cascader-node.vue
+++ b/packages/cascader-panel/src/cascader-node.vue
@@ -119,7 +119,7 @@ export default {
       return null
     },
 
-    renderCheckbox(h) {
+    renderCheckbox() {
       const { node, config, isDisabled } = this
       const events = {
         on: { change: this.handleMultiCheckChange },
@@ -141,7 +141,7 @@ export default {
       )
     },
 
-    renderRadio(h) {
+    renderRadio() {
       let { checkedValue, value, isDisabled } = this
 
       // to keep same reference if value cause radio's checked state is calculated by reference comparision;
@@ -163,19 +163,19 @@ export default {
       )
     },
 
-    renderCheckIcon(h) {
+    renderCheckIcon() {
       return <i class="el-icon-check el-cascader-node__prefix"></i>
     },
 
-    renderLoadingIcon(h) {
+    renderLoadingIcon() {
       return <i class="el-icon-loading el-cascader-node__postfix"></i>
     },
 
-    renderExpandIcon(h) {
+    renderExpandIcon() {
       return <i class="el-icon-arrow-right el-cascader-node__postfix"></i>
     },
 
-    renderContent(h) {
+    renderContent() {
       const { panel, node } = this
       const render = panel.renderLabelFn
       const vnode = render ? render({ node, data: node.data }) : null
diff --git a/packages/cascader-panel/src/cascader-panel.vue b/packages/cascader-panel/src/cascader-panel.vue
index 6df6404a3..a258837a4 100644
--- a/packages/cascader-panel/src/cascader-panel.vue
+++ b/packages/cascader-panel/src/cascader-panel.vue
@@ -57,7 +57,7 @@ const getSibling = (el, distance) => {
   return null
 }
 
-const getMenuIndex = (el, distance) => {
+const getMenuIndex = (el) => {
   if (!el) return
   const pieces = el.id.split('-')
   return Number(pieces[pieces.length - 2])
@@ -132,7 +132,7 @@ export default {
       return this.config.expandTrigger === 'hover'
     },
     renderLabelFn() {
-      return this.renderLabel || this.$scopedSlots.default
+      return this.renderLabel || this.$slots.default
     }
   },
 
@@ -230,15 +230,17 @@ export default {
       const { target, keyCode } = e
 
       switch (keyCode) {
-        case KeyCode.up:
+        case KeyCode.up: {
           const prev = getSibling(target, -1)
           focusNode(prev)
           break
-        case KeyCode.down:
+        }
+        case KeyCode.down: {
           const next = getSibling(target, 1)
           focusNode(next)
           break
-        case KeyCode.left:
+        }
+        case KeyCode.left: {
           const preMenu = this.$refs.menu[getMenuIndex(target) - 1]
           if (preMenu) {
             const expandedNode = preMenu.$el.querySelector(
@@ -247,7 +249,8 @@ export default {
             focusNode(expandedNode)
           }
           break
-        case KeyCode.right:
+        }
+        case KeyCode.right: {
           const nextMenu = this.$refs.menu[getMenuIndex(target) + 1]
           if (nextMenu) {
             const firstNode = nextMenu.$el.querySelector(
@@ -256,6 +259,7 @@ export default {
             focusNode(firstNode)
           }
           break
+        }
         case KeyCode.enter:
           checkNode(target)
           break
diff --git a/packages/cascader/src/cascader.vue b/packages/cascader/src/cascader.vue
index beabf542d..f86fab1e2 100644
--- a/packages/cascader/src/cascader.vue
+++ b/packages/cascader/src/cascader.vue
@@ -50,7 +50,7 @@
           :options="options"
           :props="config"
           :border="false"
-          :render-label="$scopedSlots.default"
+          :render-label="$slots.default"
           @expand-change="handleExpandChange"
           @close="toggleDropDownVisible(false)"
         ></el-cascader-panel>
@@ -319,7 +319,7 @@ export default {
         this.$nextTick(this.updateStyle)
       }
     },
-    filtering(val) {
+    filtering() {
       this.$nextTick(this.updatePopper)
     }
   },
@@ -356,7 +356,7 @@ export default {
     addResizeListener(this.$el, this.updateStyle)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     removeResizeListener(this.$el, this.updateStyle)
   },
 
@@ -559,14 +559,16 @@ export default {
         case KeyCode.enter:
           target.click()
           break
-        case KeyCode.up:
+        case KeyCode.up: {
           const prev = target.previousElementSibling
           prev && prev.focus()
           break
-        case KeyCode.down:
+        }
+        case KeyCode.down: {
           const next = target.nextElementSibling
           next && next.focus()
           break
+        }
         case KeyCode.esc:
         case KeyCode.tab:
           this.toggleDropDownVisible(false)
diff --git a/packages/checkbox-button/CheckboxButton.vue b/packages/checkbox-button/CheckboxButton.vue
index 9fb207c33..fe34c94c9 100644
--- a/packages/checkbox-button/CheckboxButton.vue
+++ b/packages/checkbox-button/CheckboxButton.vue
@@ -69,7 +69,7 @@ export default {
 
   emits: ['update:modelValue', 'change'],
 
-  setup(props) {
+  setup() {
     const state = reactive({
       focus: false
     })
diff --git a/packages/checkbox/Checkbox.vue b/packages/checkbox/Checkbox.vue
index 5db08d331..1e255d626 100644
--- a/packages/checkbox/Checkbox.vue
+++ b/packages/checkbox/Checkbox.vue
@@ -78,7 +78,7 @@ export default {
 
   emits: ['update:modelValue', 'change'],
 
-  setup(props, ctx) {
+  setup() {
     const state = reactive({
       focus: false
     })
diff --git a/packages/col/Col.vue b/packages/col/Col.vue
index 242e8ca47..58d8b2c1b 100644
--- a/packages/col/Col.vue
+++ b/packages/col/Col.vue
@@ -21,7 +21,7 @@ export default {
     lg: [Number, Object],
     xl: [Number, Object]
   },
-  setup(props, { attrs, emit, slots }) {
+  setup(props, { slots }) {
     const { tag } = toRefs(props)
     const gutter = computed(() => {
       let { parent } = getCurrentInstance()
diff --git a/packages/collapse/src/collapse.vue b/packages/collapse/src/collapse.vue
index 59eb854c3..84761681a 100644
--- a/packages/collapse/src/collapse.vue
+++ b/packages/collapse/src/collapse.vue
@@ -68,6 +68,8 @@ export default {
   },
 
   created() {
+    // TODO $on 已经废弃
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('item-click', this.handleItemClick)
   }
 }
diff --git a/packages/color-picker/src/components/picker-dropdown.vue b/packages/color-picker/src/components/picker-dropdown.vue
index 160cab1c1..1cf3956e3 100644
--- a/packages/color-picker/src/components/picker-dropdown.vue
+++ b/packages/color-picker/src/components/picker-dropdown.vue
@@ -6,7 +6,7 @@
           ref="hue"
           :color="color"
           vertical
-          style="float: right"
+          style="float: right;"
         ></hue-slider>
         <sv-panel ref="sl" :color="color"></sv-panel>
       </div>
@@ -20,7 +20,7 @@
         <span class="el-color-dropdown__value">
           <el-input
             v-model="customInput"
-            @keyup.native.enter="handleConfirm"
+            @keyup.enter="handleConfirm"
             @blur="handleConfirm"
             :validate-event="false"
             size="mini"
diff --git a/packages/color-picker/src/main.vue b/packages/color-picker/src/main.vue
index 2c14aa09b..2576afa2f 100644
--- a/packages/color-picker/src/main.vue
+++ b/packages/color-picker/src/main.vue
@@ -153,7 +153,7 @@ export default {
       this.resetColor()
     },
     resetColor() {
-      this.$nextTick((_) => {
+      this.$nextTick(() => {
         if (this.value) {
           this.color.fromString(this.value)
         } else {
diff --git a/packages/container/Container.vue b/packages/container/Container.vue
index bd71167f7..85e6f1d4e 100644
--- a/packages/container/Container.vue
+++ b/packages/container/Container.vue
@@ -11,7 +11,7 @@ export default {
   props: {
     direction: String
   },
-  setup(props, { attrs, emit, slots }) {
+  setup(props, { slots }) {
     const { direction } = toRefs(props)
 
     const isVertical = computed(() => {
diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue
index 4ae79abaf..4658b38e2 100644
--- a/packages/date-picker/src/basic/date-table.vue
+++ b/packages/date-picker/src/basic/date-table.vue
@@ -481,6 +481,8 @@ export default {
       if (this.selectionMode === 'range') {
         if (!this.rangeState.selecting) {
           this.$emit('pick', { minDate: newDate, maxDate: null })
+          // TODO 不可以直接修改 props 的值
+          // eslint-disable-next-line vue/no-mutating-props
           this.rangeState.selecting = true
         } else {
           if (newDate >= this.minDate) {
@@ -488,6 +490,8 @@ export default {
           } else {
             this.$emit('pick', { minDate: newDate, maxDate: this.minDate })
           }
+          // TODO 不可以直接修改 props 的值
+          // eslint-disable-next-line vue/no-mutating-props
           this.rangeState.selecting = false
         }
       } else if (this.selectionMode === 'day') {
diff --git a/packages/date-picker/src/basic/month-table.vue b/packages/date-picker/src/basic/month-table.vue
index 9f5fd1ddb..5958fbc28 100644
--- a/packages/date-picker/src/basic/month-table.vue
+++ b/packages/date-picker/src/basic/month-table.vue
@@ -244,14 +244,16 @@ export default {
       if (this.selectionMode === 'range') {
         if (!this.rangeState.selecting) {
           this.$emit('pick', { minDate: newDate, maxDate: null })
-          this.rangeState.selecting = true
+          // TODO 需要使用 emit 来修改 rangeState 的值
+          // this.rangeState.selecting = true
         } else {
           if (newDate >= this.minDate) {
             this.$emit('pick', { minDate: this.minDate, maxDate: newDate })
           } else {
             this.$emit('pick', { minDate: newDate, maxDate: this.minDate })
           }
-          this.rangeState.selecting = false
+          // TODO 需要使用 emit 来修改 rangeState 的值
+          // this.rangeState.selecting = false
         }
       } else {
         this.$emit('pick', month)
diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue
index d738840f2..cbdf9b953 100644
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@@ -2,8 +2,8 @@
   <div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
     <template v-if="!arrowControl">
       <el-scrollbar
-        @mouseenter.native="emitSelectRange('hours')"
-        @mousemove.native="adjustCurrentSpinner('hours')"
+        @mouseenter="emitSelectRange('hours')"
+        @mousemove="adjustCurrentSpinner('hours')"
         class="el-time-spinner__wrapper"
         wrap-style="max-height: inherit;"
         view-class="el-time-spinner__list"
@@ -23,8 +23,8 @@
         </li>
       </el-scrollbar>
       <el-scrollbar
-        @mouseenter.native="emitSelectRange('minutes')"
-        @mousemove.native="adjustCurrentSpinner('minutes')"
+        @mouseenter="emitSelectRange('minutes')"
+        @mousemove="adjustCurrentSpinner('minutes')"
         class="el-time-spinner__wrapper"
         wrap-style="max-height: inherit;"
         view-class="el-time-spinner__list"
@@ -44,8 +44,8 @@
       </el-scrollbar>
       <el-scrollbar
         v-show="showSeconds"
-        @mouseenter.native="emitSelectRange('seconds')"
-        @mousemove.native="adjustCurrentSpinner('seconds')"
+        @mouseenter="emitSelectRange('seconds')"
+        @mousemove="adjustCurrentSpinner('seconds')"
         class="el-time-spinner__wrapper"
         wrap-style="max-height: inherit;"
         view-class="el-time-spinner__list"
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
index a626b460b..d9cec7f0a 100644
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -600,7 +600,7 @@ export default {
             parsedValue.getMinutes(),
             parsedValue.getSeconds()
           )
-          this.$nextTick((_) => this.$refs.minTimePicker.adjustSpinners())
+          this.$nextTick(() => this.$refs.minTimePicker.adjustSpinners())
         } else {
           this.maxDate = modifyTime(
             this.maxDate,
@@ -608,7 +608,7 @@ export default {
             parsedValue.getMinutes(),
             parsedValue.getSeconds()
           )
-          this.$nextTick((_) => this.$refs.maxTimePicker.adjustSpinners())
+          this.$nextTick(() => this.$refs.maxTimePicker.adjustSpinners())
         }
       }
     },
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index 3434224fe..d2d6d8fc2 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -211,7 +211,7 @@ export default {
     showTime(val) {
       /* istanbul ignore if */
       if (!val) return
-      this.$nextTick((_) => {
+      this.$nextTick(() => {
         const inputElm = this.$refs.input.$el
         if (inputElm) {
           this.pickerWidth = inputElm.getBoundingClientRect().width + 10
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
index 4ca79837a..93e8b1894 100644
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -79,7 +79,7 @@ export default {
 
       this.date = date
       if (this.visible && this.needInitAdjust) {
-        this.$nextTick((_) => this.adjustSpinners())
+        this.$nextTick(() => this.adjustSpinners())
         this.needInitAdjust = false
       }
     },
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index 421f69371..c9b22e0ba 100644
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -620,6 +620,8 @@ export default {
     }
     this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left
 
+    // TODO $on 废弃掉了
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('fieldReset', this.handleFieldReset)
   },
 
@@ -726,7 +728,7 @@ export default {
       }
     },
 
-    handleStartChange(event) {
+    handleStartChange() {
       const value = this.parseString(this.userInput && this.userInput[0])
       if (value) {
         this.userInput = [this.formatToString(value), this.displayValue[1]]
@@ -739,7 +741,7 @@ export default {
       }
     },
 
-    handleEndChange(event) {
+    handleEndChange() {
       const value = this.parseString(this.userInput && this.userInput[1])
       if (value) {
         this.userInput = [this.displayValue[0], this.formatToString(value)]
diff --git a/packages/dialog/Dialog.vue b/packages/dialog/Dialog.vue
index 0be7decaf..f5cf7916f 100644
--- a/packages/dialog/Dialog.vue
+++ b/packages/dialog/Dialog.vue
@@ -121,7 +121,7 @@ export default {
     destroyOnClose: Boolean
   },
   emits: ['update:visible', 'close', 'opened', 'open', 'closed'],
-  setup(props, { emit, slots }) {
+  setup(props, { emit }) {
     const { visible, rendered, open } = usePopup(props)
     const {
       appendToBody,
@@ -131,7 +131,6 @@ export default {
       closeOnClickModal,
       destroyOnClose
     } = toRefs(props)
-    const { beforeClose } = props
     const closed = ref(false)
     const key = ref(0)
     const dialog = ref(null)
@@ -152,8 +151,8 @@ export default {
       handleClose()
     }
     const handleClose = () => {
-      if (typeof beforeClose === 'function') {
-        beforeClose(hide)
+      if (typeof props.beforeClose === 'function') {
+        props.beforeClose(hide)
       } else {
         hide()
       }
@@ -215,7 +214,6 @@ export default {
     return {
       dialog,
       key,
-      fullscreen,
       rendered,
       handleClose,
       style,
diff --git a/packages/drawer/Drawer.vue b/packages/drawer/Drawer.vue
index 5839870ee..f2cc0e881 100644
--- a/packages/drawer/Drawer.vue
+++ b/packages/drawer/Drawer.vue
@@ -134,15 +134,10 @@ export default {
     const {
       appendToBody,
       beforeClose,
-      customClass,
       destroyOnClose,
       direction,
-      showClose,
-      size,
-      title,
       visible,
-      wrapperClosable,
-      withHeader
+      wrapperClosable
     } = toRefs(props)
 
     const closed = ref(false)
@@ -232,12 +227,6 @@ export default {
     })
 
     return {
-      customClass,
-      direction,
-      showClose,
-      size,
-      title,
-      withHeader,
       isHorizontal,
       drawer,
       rendered,
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index 849d74177..5d2b2ed78 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -286,8 +286,8 @@ export default {
     })
 
     instance.proxy.initDomOperation = initDomOperation
-    instance.proxy.dropdownSize = dropdownSize
-    instance.proxy.visible = visible
+    instance.proxy.dropdownSize = dropdownSize.value
+    instance.proxy.visible = visible.value
     instance.proxy.broadcast = broadcast
 
     provide('dropdown', instance)
diff --git a/packages/form-item/FormItem.vue b/packages/form-item/FormItem.vue
index c1e487171..4bf04d991 100644
--- a/packages/form-item/FormItem.vue
+++ b/packages/form-item/FormItem.vue
@@ -374,7 +374,7 @@ const useRules = (props, elForm) => {
   }
 }
 
-function useValidate(props, elForm, getFilteredRule, getRules) {
+function useValidate(props, elForm, getFilteredRule) {
   const { fieldValue, initialValue } = useFieldValue(props, elForm)
   const { broadcast } = useEmitter()
   const validateState = ref('')
diff --git a/packages/form-item/LabelWrap.vue b/packages/form-item/LabelWrap.vue
index c65c8b604..cc04d240f 100644
--- a/packages/form-item/LabelWrap.vue
+++ b/packages/form-item/LabelWrap.vue
@@ -15,7 +15,7 @@ export default {
     isAutoWidth: Boolean,
     updateAll: Boolean
   },
-  setup(props, { emit, slots }) {
+  setup(props, { slots }) {
     const { labelStyle, labelRef } = useLabelWidth(props, slots)
 
     return () => {
diff --git a/packages/form/__tests__/Form.spec.js b/packages/form/__tests__/Form.spec.js
index dd697b19d..7a096f22c 100644
--- a/packages/form/__tests__/Form.spec.js
+++ b/packages/form/__tests__/Form.spec.js
@@ -179,7 +179,7 @@ describe('Form', () => {
 
     wrapper.vm.$refs.form.validate((valid) => {
       expect(valid).toBe(false)
-      wrapper.vm.$refs.form.$nextTick((_) => {
+      wrapper.vm.$refs.form.$nextTick(() => {
         expect(wrapper.find('.el-form-item__error').exists()).toBe(false)
         done()
       })
diff --git a/packages/header/Header.vue b/packages/header/Header.vue
index 5961160b0..f459a016c 100644
--- a/packages/header/Header.vue
+++ b/packages/header/Header.vue
@@ -5,8 +5,6 @@
 </template>
 
 <script>
-import { toRefs } from 'vue'
-
 export default {
   name: 'ElHeader',
 
@@ -15,12 +13,6 @@ export default {
       type: String,
       default: '60px'
     }
-  },
-
-  setup(props) {
-    const { height } = toRefs(props)
-
-    return { height }
   }
 }
 </script>
diff --git a/packages/image/Image.vue b/packages/image/Image.vue
index b5f83351a..e9cbe63c3 100644
--- a/packages/image/Image.vue
+++ b/packages/image/Image.vue
@@ -128,7 +128,7 @@ export default {
   },
 
   watch: {
-    src(val) {
+    src() {
       this.show && this.loadImage()
     },
     show(val) {
@@ -144,7 +144,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.lazy && this.removeLazyLoadListener()
   },
 
diff --git a/packages/image/ImageViewer.vue b/packages/image/ImageViewer.vue
index 89d243679..c523e35dc 100644
--- a/packages/image/ImageViewer.vue
+++ b/packages/image/ImageViewer.vue
@@ -104,7 +104,7 @@ export default {
       default: 0
     }
   },
-  setup(props, ctx) {
+  setup(props) {
     const img = ref(null)
     const imageWrapper = ref(null)
     // data
@@ -153,7 +153,7 @@ export default {
       reset()
       props.onSwitch(val)
     })
-    watch(currentImg, (val) => {
+    watch(currentImg, () => {
       nextTick(() => {
         if (img.value.complete) {
           loading = true
@@ -202,7 +202,7 @@ export default {
     }
 
     const toggleMode = () => {
-      if (loading) return
+      if (loading.value) return
       const modeNames = Object.keys(Mode)
       const modeValues = Object.values(Mode)
 
@@ -215,12 +215,12 @@ export default {
       reset()
     }
     const prev = () => {
-      if (isFirst && !infinite.value) return
+      if (isFirst.value && !infinite.value) return
       const len = props.urlList.length
       index.value = (index.value - 1 + len) % len
     }
     const next = () => {
-      if (isLast && !infinite.value) return
+      if (isLast.value && !infinite.value) return
       const len = props.urlList.length
       index.value = (index.value + 1) % len
     }
@@ -281,7 +281,7 @@ export default {
       deviceSupportUninstall()
       props.onClose()
     }
-    const handleImgLoad = (e) => {
+    const handleImgLoad = () => {
       loading = false
     }
     const handleImgError = (e) => {
@@ -299,7 +299,7 @@ export default {
         state.transform.offsetY = offsetY + ev.pageY - startY
       })
       on(document, 'mousemove', _dragHandler)
-      on(document, 'mouseup', (ev) => {
+      on(document, 'mouseup', () => {
         off(document, 'mousemove', _dragHandler)
       })
 
diff --git a/packages/image/__tests__/ImageViewer.spec.js b/packages/image/__tests__/ImageViewer.spec.js
index adc9496ad..e287d1114 100644
--- a/packages/image/__tests__/ImageViewer.spec.js
+++ b/packages/image/__tests__/ImageViewer.spec.js
@@ -72,7 +72,7 @@ describe('ImageViewer.vue', () => {
     const wrapper = mount(ImageViewer, {
       props: {
         urlList: [IMAGE_SUCCESS, IMAGE_FAIL],
-        onSwitch(newIndex) {
+        onSwitch() {
           caller = true
         }
       }
diff --git a/packages/infinite-scroll/src/main.js b/packages/infinite-scroll/src/main.js
index c0be5c98e..b4275af75 100644
--- a/packages/infinite-scroll/src/main.js
+++ b/packages/infinite-scroll/src/main.js
@@ -126,7 +126,7 @@ const handleScroll = function (cb) {
 export default {
   name: 'InfiniteScroll',
 
-  mounted(el, binding, vnode) {
+  mounted(el, binding) {
     const cb = binding.value
 
     // only include vertical scroll
diff --git a/packages/input-number/InputNumber.vue b/packages/input-number/InputNumber.vue
index 41cfabbc6..9ff178446 100644
--- a/packages/input-number/InputNumber.vue
+++ b/packages/input-number/InputNumber.vue
@@ -335,7 +335,6 @@ export default {
 
     return {
       controlsAtRight,
-      controls,
       inputNumberSize,
       displayValue,
       minDisabled,
diff --git a/packages/input/use.js b/packages/input/use.js
index fb5124ff0..53ca26263 100644
--- a/packages/input/use.js
+++ b/packages/input/use.js
@@ -20,11 +20,7 @@ export const useValidate = () => {
   return { validateState, validateIcon }
 }
 
-export const useTextarea = (
-  { autosize, type, resize },
-  textareaCalcStyle,
-  instance
-) => {
+export const useTextarea = ({ autosize, type, resize }, textareaCalcStyle) => {
   const textarea = ref(null)
 
   const textareaStyle = computed(() => {
@@ -155,7 +151,7 @@ export const useInput = (
   }
 
   return {
-    input: input || textarea,
+    input: input.value || textarea,
     inputSize,
     inputDisabled,
     nativeInputValue,
@@ -173,7 +169,7 @@ export const useInteractive = (
   instance,
   input,
   textarea,
-  { type, modelValue, validateEvent },
+  { modelValue, validateEvent },
   { focused, isComposing, passwordVisible },
   nativeInputValue,
   emit,
diff --git a/packages/loading/Loading.vue b/packages/loading/Loading.vue
index 213104f22..36d3efa42 100644
--- a/packages/loading/Loading.vue
+++ b/packages/loading/Loading.vue
@@ -52,6 +52,8 @@ export default {
   setup(props, { emit }) {
     const $data = reactive({ ...props })
     const handleAfterLeave = () => {
+      // TODO 这里的 emit 修改会造成对 api 的更改
+      // eslint-disable-next-line vue/custom-event-name-casing
       emit('afterLeave')
     }
     const show = () => {
diff --git a/packages/loading/directive.js b/packages/loading/directive.js
index b862b4f34..550a9edce 100644
--- a/packages/loading/directive.js
+++ b/packages/loading/directive.js
@@ -76,7 +76,7 @@ const loadingDirective = {
     }
   },
 
-  unmounted: function (el, binding) {
+  unmounted: function () {
     // if (el.domInserted) {
     //   el.mask && el.mask.parentNode && el.mask.parentNode.removeChild(el.mask)
     //   toggleLoading(el, { value: false, modifiers: binding.modifiers })
diff --git a/packages/menu/src/menu-item.vue b/packages/menu/src/menu-item.vue
index 8a3c46f01..856d94b2f 100644
--- a/packages/menu/src/menu-item.vue
+++ b/packages/menu/src/menu-item.vue
@@ -23,7 +23,9 @@
       effect="dark"
       placement="right"
     >
-      <div slot="content"><slot name="title"></slot></div>
+      <template v-slot:content>
+        <slot name="title"></slot>
+      </template>
       <div
         style="
           position: absolute;
@@ -123,7 +125,7 @@ export default {
     this.parentMenu.addItem(this)
     this.rootMenu.addItem(this)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.parentMenu.removeItem(this)
     this.rootMenu.removeItem(this)
   }
diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue
index 665c2f3d7..17d4374bf 100644
--- a/packages/menu/src/menu.vue
+++ b/packages/menu/src/menu.vue
@@ -7,7 +7,7 @@ import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
 export default {
   name: 'ElMenu',
 
-  render (h) {
+  render () {
     const component = (
       <ul
         role="menubar"
@@ -314,7 +314,10 @@ export default {
   },
   mounted() {
     this.initOpenedMenu();
+    // TODO $on 已经被废弃了，需要重新实现
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('item-click', this.handleItemClick);
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('submenu-click', this.handleSubmenuClick);
     if (this.mode === 'horizontal') {
         new Menubar(this.$el); // eslint-disable-line
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index 1f2799a55..1b69c1aa8 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -60,9 +60,9 @@ export default {
     }
   },
   watch: {
-    opened(val) {
+    opened() {
       if (this.isMenuPopup) {
-        this.$nextTick((_) => {
+        this.$nextTick(() => {
           this.updatePopper()
         })
       }
@@ -252,11 +252,15 @@ export default {
     }
   },
   created() {
+    // TODO $on 已经废弃了，重构时需要重新实现
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('toggle-collapse', this.handleCollapseToggle)
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('mouse-enter-child', () => {
       this.mouseInChild = true
       clearTimeout(this.timeout)
     })
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('mouse-leave-child', () => {
       this.mouseInChild = false
       clearTimeout(this.timeout)
@@ -267,11 +271,11 @@ export default {
     this.rootMenu.addSubmenu(this)
     this.initPopper()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.parentMenu.removeSubmenu(this)
     this.rootMenu.removeSubmenu(this)
   },
-  render(h) {
+  render() {
     const {
       active,
       opened,
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index c9d9e7ff4..9592ec2d5 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -53,7 +53,7 @@
             <el-input
               v-model="inputValue"
               :type="inputType"
-              @keydown.enter.native="handleInputEnter"
+              @keydown.enter="handleInputEnter"
               :placeholder="inputPlaceholder"
               ref="input"
             ></el-input>
@@ -74,7 +74,7 @@
             v-if="showCancelButton"
             :round="roundButton"
             size="small"
-            @click.native="handleAction('cancel')"
+            @click="handleAction('cancel')"
             @keydown.enter="handleAction('cancel')"
           >
             {{ cancelButtonText || t('el.messagebox.cancel') }}
@@ -86,7 +86,7 @@
             v-show="showConfirmButton"
             :round="roundButton"
             size="small"
-            @click.native="handleAction('confirm')"
+            @click="handleAction('confirm')"
             @keydown.enter="handleAction('confirm')"
           >
             {{ confirmButtonText || t('el.messagebox.confirm') }}
@@ -268,7 +268,7 @@ export default {
     inputValue: {
       immediate: true,
       handler(val) {
-        this.$nextTick((_) => {
+        this.$nextTick(() => {
           if (this.$type === 'prompt' && val !== null) {
             this.validate()
           }
@@ -315,7 +315,7 @@ export default {
     })
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.closeOnHashChange) {
       window.removeEventListener('hashchange', this.close)
     }
diff --git a/packages/notification/Notification.vue b/packages/notification/Notification.vue
index d5fb252b5..410239dc9 100644
--- a/packages/notification/Notification.vue
+++ b/packages/notification/Notification.vue
@@ -73,6 +73,7 @@ export default {
     type: { type: String, default: '' }
   },
   setup(props) {
+    // eslint-disable-next-line vue/no-setup-props-destructure
     const { duration, onClose, onClick } = props
     const typeClass = computed(() => {
       return props.type && typeMap[props.type]
diff --git a/packages/page-header/PageHeader.vue b/packages/page-header/PageHeader.vue
index 6dc204a1f..3d8a68e65 100644
--- a/packages/page-header/PageHeader.vue
+++ b/packages/page-header/PageHeader.vue
@@ -14,7 +14,6 @@
 
 <script>
 import { t } from 'element-ui/src/locale'
-import { toRefs } from 'vue'
 export default {
   name: 'ElPageHeader',
   props: {
@@ -27,14 +26,11 @@ export default {
     content: String
   },
   setup(props, ctx) {
-    const { title, content } = toRefs(props)
     const handleClick = (evt) => {
       ctx.emit('back', evt)
     }
     return {
-      handleClick,
-      title,
-      content
+      handleClick
     }
   }
 }
diff --git a/packages/pagination/Pagination.js b/packages/pagination/Pagination.js
index 5c9850370..ef550bb08 100644
--- a/packages/pagination/Pagination.js
+++ b/packages/pagination/Pagination.js
@@ -266,8 +266,8 @@ export default {
         <Jumper
           currentPage={this.internalCurrentPage}
           pageCount={this.internalPageCount}
-          handleChange={this.handleChange}
           disabled={this.disabled}
+          onChange={this.handleChange}
         />
       ),
       pager: (
diff --git a/packages/pagination/__tests__/Pagination.spec.js b/packages/pagination/__tests__/Pagination.spec.js
index 504f8a786..cbc4b7d7e 100644
--- a/packages/pagination/__tests__/Pagination.spec.js
+++ b/packages/pagination/__tests__/Pagination.spec.js
@@ -198,7 +198,7 @@ describe('components', () => {
       const wrapper = mount(Jumper, {
         props: {
           currentPage,
-          handleChange(val) {
+          onChange(val) {
             currentPage.value = Number(val)
           }
         },
diff --git a/packages/pagination/components/Jumper.vue b/packages/pagination/components/Jumper.vue
index 87f2a643b..07aff9169 100644
--- a/packages/pagination/components/Jumper.vue
+++ b/packages/pagination/components/Jumper.vue
@@ -38,13 +38,13 @@ export default {
     disabled: {
       type: Boolean,
       default: false
-    },
-    handleChange: Function
+    }
   },
+  emits: ['change'],
 
-  setup(props) {
+  setup(props, { emit }) {
     const userInput = ref(null)
-    const { disabled, currentPage, pageCount } = toRefs(props)
+    const { currentPage } = toRefs(props)
     const t = useLocale()
     const showValue = computed(() => userInput.value ?? currentPage.value)
 
@@ -52,14 +52,12 @@ export default {
       userInput.value = val
     }
     const handleChange = (val) => {
-      props.handleChange?.(val)
+      emit('change', val)
       userInput.value = null
     }
     return {
       // state
-      disabled,
       showValue,
-      pageCount,
       // method
       t,
       handleInput,
diff --git a/packages/pagination/components/Pager.vue b/packages/pagination/components/Pager.vue
index c5adda05f..05a2a5398 100644
--- a/packages/pagination/components/Pager.vue
+++ b/packages/pagination/components/Pager.vue
@@ -86,7 +86,6 @@ export default {
       pagers,
       showMore,
       quickClass,
-      disabled,
       // method
       onMouseEnter,
       onPagerClick
diff --git a/packages/popconfirm/Popconfirm.vue b/packages/popconfirm/Popconfirm.vue
index 748e237c4..eb314e1ce 100644
--- a/packages/popconfirm/Popconfirm.vue
+++ b/packages/popconfirm/Popconfirm.vue
@@ -76,10 +76,14 @@ export default {
     })
     const confirm = () => {
       state.visible = false
+      // TODO 如果把 onConfirm 修改成 on-confirm 的话就涉及到 api 的变更了
+      // 不过在发版之前可以讨论一波
+      // eslint-disable-next-line vue/custom-event-name-casing
       emit('onConfirm')
     }
     const cancel = () => {
       state.visible = false
+      // eslint-disable-next-line vue/custom-event-name-casing
       emit('onCancel')
     }
     return {
diff --git a/packages/popover/vue-popper.js b/packages/popover/vue-popper.js
index 294370e59..b1a37b443 100644
--- a/packages/popover/vue-popper.js
+++ b/packages/popover/vue-popper.js
@@ -118,7 +118,7 @@ function useVuePopper(props, { emit, slots, referenceEl }) {
     options.offset = offset.value
     options.arrowOffset = arrowOffset.value
     popperJS.value = new PopperJS(referenceRef, popperRef, options)
-    popperJS.value.onCreate((_) => {
+    popperJS.value.onCreate(() => {
       emit('created', instance.proxy)
       resetTransformOrigin()
       nextTick(() => updatePopper())
diff --git a/packages/progress/Progress.vue b/packages/progress/Progress.vue
index a69e5375b..0ddde11b5 100644
--- a/packages/progress/Progress.vue
+++ b/packages/progress/Progress.vue
@@ -115,10 +115,7 @@ export default {
       width,
       type,
       status,
-      format,
-      strokeLinecap,
-      textInside,
-      showText
+      format
     } = toRefs(props)
 
     const getCurrentColor = (percentage) => {
@@ -185,17 +182,7 @@ export default {
       stroke,
       iconClass,
       progressTextSize,
-      content,
-      percentage,
-      color,
-      strokeWidth,
-      width,
-      type,
-      status,
-      format,
-      strokeLinecap,
-      textInside,
-      showText
+      content
     }
   }
 }
diff --git a/packages/radio-button/RadioButton.vue b/packages/radio-button/RadioButton.vue
index beefb7d10..69cde713a 100644
--- a/packages/radio-button/RadioButton.vue
+++ b/packages/radio-button/RadioButton.vue
@@ -56,7 +56,7 @@ export default {
     name: String
   },
 
-  setup(props, ctx) {
+  setup(props) {
     const { label, disabled } = toRefs(props)
     const radio = ref()
     const focus = ref(false)
@@ -119,7 +119,7 @@ function useCheckGroup() {
   }
 }
 
-function useModel({ radioGroup, label, radio }) {
+function useModel({ radioGroup }) {
   const value = computed({
     get() {
       return radioGroup.props.modelValue
diff --git a/packages/rate/Rate.vue b/packages/rate/Rate.vue
index 4f55b8490..4de889863 100644
--- a/packages/rate/Rate.vue
+++ b/packages/rate/Rate.vue
@@ -231,12 +231,10 @@ export default {
 
     return {
       // state
-      modelValue,
       rateDisabled,
       classMap,
       classes,
       text,
-      max,
       hoverIndex,
       decimalStyle,
       decimalIconClass,
diff --git a/packages/scrollbar/Bar.js b/packages/scrollbar/Bar.js
index 955122f66..b03dbeeb8 100644
--- a/packages/scrollbar/Bar.js
+++ b/packages/scrollbar/Bar.js
@@ -40,7 +40,7 @@ const useDrag = ({ bar, state, thumb, cursorDown }) => {
       (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100
   }
 
-  const mouseUpDocumentHandler = (e) => {
+  const mouseUpDocumentHandler = () => {
     cursorDown.value = false
     state[bar.value.axis] = 0
     off(document, 'mousemove', mouseMoveDocumentHandler)
diff --git a/packages/select/Select.vue b/packages/select/Select.vue
index 8fb2a5fed..f27782bc0 100644
--- a/packages/select/Select.vue
+++ b/packages/select/Select.vue
@@ -4,8 +4,8 @@
     :class="[selectSize ? 'el-select--' + selectSize : '']"
     @click.stop="toggleMenu"
     v-clickoutside="handleClose"
-    @mouseenter.native="inputHovering = true"
-    @mouseleave.native="inputHovering = false"
+    @mouseenter="inputHovering = true"
+    @mouseleave="inputHovering = false"
   >
     <div
       class="el-select__tags"
@@ -103,7 +103,7 @@
       @keydown.enter.prevent="selectOption"
       @keydown.esc.stop.prevent="visible = false"
       @keydown.tab="visible = false"
-      @paste.native="debouncedOnInputChange"
+      @paste="debouncedOnInputChange"
     >
       <template v-slot:prefix v-if="$slots.prefix">
         <slot name="prefix"></slot>
@@ -317,7 +317,7 @@ export default {
     /** @Deprecated in next major version */
     autoComplete: {
       type: String,
-      validator(val) {
+      validator() {
         process.env.NODE_ENV !== 'production' &&
           console.warn(
             "[Element Warn][Select]'auto-complete' property will be deprecated in next major version. please use 'autocomplete' instead."
@@ -533,7 +533,7 @@ export default {
       const text = event.target.value
       if (event.type === 'compositionend') {
         this.isOnComposition = false
-        this.$nextTick((_) => this.handleQueryChange(text))
+        this.$nextTick(() => this.handleQueryChange(text))
       } else {
         const lastCharacter = text[text.length - 1] || ''
         this.isOnComposition = !isKorean(lastCharacter)
@@ -1018,7 +1018,7 @@ export default {
     this.setSelected()
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.$el && this.handleResize)
       removeResizeListener(this.$el, this.handleResize)
   }
diff --git a/packages/slider/src/button.vue b/packages/slider/src/button.vue
index f3a12e09e..4fa0c2192 100644
--- a/packages/slider/src/button.vue
+++ b/packages/slider/src/button.vue
@@ -22,7 +22,9 @@
       :popper-class="tooltipClass"
       :disabled="!showTooltip"
     >
-      <span slot="content">{{ formatValue }}</span>
+      <template v-slot:content>
+        <span>{{ formatValue }}</span>
+      </template>
       <div
         class="el-slider__button"
         :class="{ hover: hovering, dragging: dragging }"
diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue
index eb7e2539e..4995a784a 100644
--- a/packages/slider/src/main.vue
+++ b/packages/slider/src/main.vue
@@ -454,7 +454,7 @@ export default {
     window.addEventListener('resize', this.resetSize)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.resetSize)
   }
 }
diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue
index 5ddd86ae0..d99343d73 100644
--- a/packages/steps/src/step.vue
+++ b/packages/steps/src/step.vue
@@ -75,7 +75,7 @@ export default {
     status: String
   },
 
-  setup(props, context) {
+  setup(props) {
     const parentState = inject(stateSymbol)
     const steps = parentState.steps
     const stepOffset = parentState.stepOffset
diff --git a/packages/steps/src/steps.vue b/packages/steps/src/steps.vue
index 542a4d201..6f2d461a5 100644
--- a/packages/steps/src/steps.vue
+++ b/packages/steps/src/steps.vue
@@ -60,7 +60,7 @@ export default {
     )
     watch(
       () => state.steps,
-      (steps) => {
+      () => {
         state.steps.forEach((child, index) => {
           child.state.index = index
         })
diff --git a/packages/switch/Switch.vue b/packages/switch/Switch.vue
index 34b815f55..86a70ad19 100644
--- a/packages/switch/Switch.vue
+++ b/packages/switch/Switch.vue
@@ -85,11 +85,6 @@ export default {
       inactiveValue,
       modelValue,
       disabled,
-      width,
-      activeText,
-      inactiveText,
-      activeIconClass,
-      inactiveIconClass,
       activeColor,
       inactiveColor
     } = toRefs(props)
@@ -119,12 +114,6 @@ export default {
 
     return {
       isChecked,
-      disabled,
-      width,
-      activeText,
-      inactiveText,
-      inactiveIconClass,
-      activeIconClass,
       backgroundColor,
       handleClick
     }
diff --git a/packages/switch/SwitchLabel.vue b/packages/switch/SwitchLabel.vue
index 5bcddcbc1..d60f5f4e7 100644
--- a/packages/switch/SwitchLabel.vue
+++ b/packages/switch/SwitchLabel.vue
@@ -14,7 +14,6 @@
 </template>
 
 <script>
-import { toRefs } from 'vue'
 export default {
   props: {
     type: {
@@ -32,10 +31,6 @@ export default {
       type: String,
       default: ''
     }
-  },
-  setup(props) {
-    const { type, active, text, iconClass } = toRefs(props)
-    return { type, text, active, iconClass }
   }
 }
 </script>
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index 6bcea2808..f8811eb5b 100644
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -34,7 +34,7 @@ export default {
     highlight: Boolean
   },
 
-  render(h) {
+  render() {
     const data = this.data || []
     return (
       <table class="el-table__body" cellspacing="0" cellpadding="0" border="0">
@@ -365,7 +365,7 @@ export default {
           on-dblclick={($event) => this.handleDoubleClick($event, row)}
           on-click={($event) => this.handleClick($event, row)}
           on-contextmenu={($event) => this.handleContextMenu($event, row)}
-          on-mouseenter={(_) => this.handleMouseEnter($index)}
+          on-mouseenter={() => this.handleMouseEnter($index)}
           on-mouseleave={this.handleMouseLeave}
         >
           {columns.map((column, cellIndex) => {
diff --git a/packages/table/src/table-footer.js b/packages/table/src/table-footer.js
index 7690b2298..a68c0dd8e 100644
--- a/packages/table/src/table-footer.js
+++ b/packages/table/src/table-footer.js
@@ -6,7 +6,7 @@ export default {
 
   mixins: [LayoutObserver],
 
-  render(h) {
+  render() {
     let sums = []
     if (this.summaryMethod) {
       sums = this.summaryMethod({
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
index 3c99e16cd..b369f8972 100644
--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@@ -740,7 +740,7 @@ export default {
     this.$ready = true
   },
 
-  destroyed() {
+  unmounted() {
     this.unbindEvents()
   },
 
diff --git a/packages/tabs/src/tab-bar.vue b/packages/tabs/src/tab-bar.vue
index e40b04452..b83fcb64e 100644
--- a/packages/tabs/src/tab-bar.vue
+++ b/packages/tabs/src/tab-bar.vue
@@ -32,7 +32,7 @@ export default {
             .toLowerCase()
             .replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
         }
-        this.tabs.every((tab, index) => {
+        this.tabs.every((tab) => {
           const $el = arrayFind(
             this.$parent.$refs.tabs || [],
             (t) => t.id.replace('tab-', '') === tab.paneName
diff --git a/packages/tabs/src/tab-nav.vue b/packages/tabs/src/tab-nav.vue
index 0a798f1d6..6fb497c02 100644
--- a/packages/tabs/src/tab-nav.vue
+++ b/packages/tabs/src/tab-nav.vue
@@ -216,7 +216,7 @@ export default {
     this.update()
   },
 
-  render(h) {
+  render() {
     const {
       type,
       panes,
@@ -347,7 +347,7 @@ export default {
     }, 0)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.$el && this.update) removeResizeListener(this.$el, this.update)
     document.removeEventListener(
       'visibilitychange',
diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue
index 59fa8e274..96e6d1462 100644
--- a/packages/tabs/src/tabs.vue
+++ b/packages/tabs/src/tabs.vue
@@ -43,10 +43,10 @@ export default {
     value(value) {
       this.setCurrentName(value)
     },
-    currentName(value) {
+    currentName() {
       if (this.$refs.nav) {
         this.$nextTick(() => {
-          this.$refs.nav.$nextTick((_) => {
+          this.$refs.nav.$nextTick(() => {
             this.$refs.nav.scrollToActiveTab()
           })
         })
@@ -57,6 +57,8 @@ export default {
   methods: {
     calcPaneInstances(isForceUpdate = false) {
       if (this.$slots.default) {
+        // TODO this.$slots.default 变更为函数了，需要调用
+        // eslint-disable-next-line vue/require-slots-as-functions
         const paneSlots = this.$slots.default.filter(
           (vnode) =>
             vnode.tag &&
@@ -120,7 +122,7 @@ export default {
     }
   },
 
-  render(h) {
+  render() {
     const {
       type,
       handleTabClick,
@@ -189,6 +191,8 @@ export default {
       this.setCurrentName('0')
     }
 
+    // TODO $on 已经废弃了，需要重新实现这个逻辑
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true))
   },
 
diff --git a/packages/tag/Tag.vue b/packages/tag/Tag.vue
index 0331f9d48..b318ed7a5 100644
--- a/packages/tag/Tag.vue
+++ b/packages/tag/Tag.vue
@@ -33,7 +33,7 @@ export default {
       const classes = [
         'el-tag',
         props.type ? `el-tag--${props.type}` : '',
-        tagSize ? `el-tag--${tagSize}` : '',
+        tagSize.value ? `el-tag--${tagSize.value}` : '',
         props.effect ? `el-tag--${props.effect}` : '',
         props.hit && 'is-hit'
       ]
diff --git a/packages/tooltip/Tooltip.js b/packages/tooltip/Tooltip.js
index 192a042ee..3909b51c5 100644
--- a/packages/tooltip/Tooltip.js
+++ b/packages/tooltip/Tooltip.js
@@ -3,7 +3,15 @@ import debounce from 'throttle-debounce/debounce'
 import { addClass, removeClass, on, off } from 'element-ui/src/utils/dom'
 import { generateId } from 'element-ui/src/utils/util'
 // eslint-disable-next-line
-import { createApp, ref, watch, onMounted, onUnmounted, getCurrentInstance, Transition } from 'vue'
+import {
+  createApp,
+  ref,
+  watch,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  Transition
+} from 'vue'
 
 export default {
   name: 'ElTooltip',
@@ -177,7 +185,7 @@ export default {
       return element
     }
 
-    watch(focusing, (val, old) => {
+    watch(focusing, (val) => {
       if (val) {
         addClass(referenceElm.value, 'focusing')
       } else {
diff --git a/packages/transfer/src/Transfer.vue b/packages/transfer/src/Transfer.vue
index cef2b1796..9518561a2 100644
--- a/packages/transfer/src/Transfer.vue
+++ b/packages/transfer/src/Transfer.vue
@@ -155,7 +155,7 @@ export default {
       }
     }
 
-    watch(props.modelValue, (val, oldVal) => emit('update:modelValue', val))
+    watch(props.modelValue, (val) => emit('update:modelValue', val))
 
     provide(
       'defaultScopedSlots',
diff --git a/packages/transfer/src/TransferPanel.vue b/packages/transfer/src/TransferPanel.vue
index 0eeef8513..4fb4414ec 100644
--- a/packages/transfer/src/TransferPanel.vue
+++ b/packages/transfer/src/TransferPanel.vue
@@ -214,12 +214,12 @@ const useTransferPanelData = (props, state, slots, emit) => {
 
   watch(
     () => checkableData.value,
-    (val, oldVal) => updateAllChecked()
+    () => updateAllChecked()
   )
 
   watch(
     () => props.data,
-    (val, oldVal) => {
+    () => {
       const checked = []
       const filteredDataKeys = filteredData.value.map(
         (item) => item[keyProp.value]
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
index 5edf81579..d30693b4a 100644
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -38,7 +38,6 @@
       </span>
       <el-checkbox
         v-if="showCheckbox"
-        v-model="node.checked"
         :indeterminate="node.indeterminate"
         :disabled="!!node.disabled"
         @click.stop
@@ -272,6 +271,8 @@ export default {
     }
 
     if(this.tree.accordion) {
+    // TODO $on 已经废弃了，需要重新实现这个逻辑
+    // eslint-disable-next-line vue/no-deprecated-events-api
       this.$on('tree-node-expand', node => {
         if(this.node !== node) {
           this.node.collapse();
diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue
index e0b269ce7..5a2aac339 100644
--- a/packages/tree/src/tree.vue
+++ b/packages/tree/src/tree.vue
@@ -134,8 +134,9 @@ export default {
 
   computed: {
     children: {
-      set(value) {
-        this.data = value
+      set() {
+        // TODO 直接修改 props 的值很迷
+        // this.data = value
       },
       get() {
         return this.data
@@ -361,6 +362,9 @@ export default {
     this.root = this.store.root
 
     const dragState = this.dragState
+
+    // TODO $on 已经废弃了，需要重新实现这个逻辑
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('tree-node-drag-start', (event, treeNode) => {
       if (
         typeof this.allowDrag === 'function' &&
@@ -376,12 +380,15 @@ export default {
         // setData is required for draggable to work in FireFox
         // the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox
         event.dataTransfer.setData('text/plain', '')
+        // eslint-disable-next-line no-empty
       } catch (e) {}
       dragState.draggingNode = treeNode
       this.$emit('node-drag-start', treeNode.node, event)
     })
 
-    this.$on('tree-node-drag-over', (event, treeNode) => {
+    // TODO $on 已经废弃了，需要重新实现这个逻辑
+    // eslint-disable-next-line vue/no-deprecated-events-api
+    this.$on('tree-node-drag-over', (event) => {
       const dropNode = findNearestComponent(event.target, 'ElTreeNode')
       const oldDropNode = dragState.dropNode
       if (oldDropNode && oldDropNode !== dropNode) {
@@ -494,6 +501,8 @@ export default {
       this.$emit('node-drag-over', draggingNode.node, dropNode.node, event)
     })
 
+    // TODO $on 已经废弃了，需要重新实现这个逻辑
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('tree-node-drag-end', (event) => {
       const { draggingNode, dropType, dropNode } = dragState
       event.preventDefault()
diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue
index f8265ed58..10a8f9ea4 100644
--- a/packages/upload/src/index.vue
+++ b/packages/upload/src/index.vue
@@ -351,7 +351,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.uploadFiles.forEach((file) => {
       if (file.url && file.url.indexOf('blob:') === 0) {
         URL.revokeObjectURL(file.url)
diff --git a/src/use/popper.js b/src/use/popper.js
index 249b1e837..f8c712e08 100644
--- a/src/use/popper.js
+++ b/src/use/popper.js
@@ -108,7 +108,7 @@ function usePopper(props, { emit, slots }, { referenceElm, popperElm }) {
     options.offset = offset.value
     options.arrowOffset = arrowOffset.value
     popperJS.value = new PopperJS(referenceRef, popperRef, options)
-    popperJS.value.onCreate((_) => {
+    popperJS.value.onCreate(() => {
       emit('created', instance.proxy)
       resetTransformOrigin()
       nextTick(() => updatePopper())
diff --git a/src/utils/aria-utils.js b/src/utils/aria-utils.js
index 41d59328e..af851254b 100644
--- a/src/utils/aria-utils.js
+++ b/src/utils/aria-utils.js
@@ -57,9 +57,10 @@ aria.Utils.attemptFocus = function (element) {
     return false
   }
   aria.Utils.IgnoreUtilFocusChanges = true
-  try {
+
+  if (element && element.focus) {
     element.focus()
-  } catch (e) {}
+  }
   aria.Utils.IgnoreUtilFocusChanges = false
   return document.activeElement === element
 }
diff --git a/src/utils/util.js b/src/utils/util.js
index f98d6cbc5..822cac9a0 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -229,7 +229,7 @@ export function rafThrottle(fn) {
   return function (...args) {
     if (locked) return
     locked = true
-    window.requestAnimationFrame((_) => {
+    window.requestAnimationFrame(() => {
       fn.apply(this, args)
       locked = false
     })
diff --git a/src/utils/vue-popper.js b/src/utils/vue-popper.js
index e2ea10f41..23e3dd3ee 100644
--- a/src/utils/vue-popper.js
+++ b/src/utils/vue-popper.js
@@ -105,7 +105,7 @@ export default {
       options.offset = this.offset
       options.arrowOffset = this.arrowOffset
       this.popperJS = new PopperJS(reference, popper, options)
-      this.popperJS.onCreate((_) => {
+      this.popperJS.onCreate(() => {
         this.$emit('created', this)
         this.resetTransformOrigin()
         this.$nextTick(this.updatePopper)