[improvement] optimize watch options (#4075)

src/area/index.js

@@ -51,9 +51,7 @@ export default createComponent({
 
     areaList: {
       deep: true,
-      handler() {
+      handler: 'setValues'
-        this.setValues();
-      }
     },
 
     columnsNum() {

src/count-down/demo/index.vue

@@ -35,7 +35,7 @@
       <van-count-down
         ref="countDown"
         millisecond
-        :time="manualTime"
+        :time="3000"
         :auto-start="false"
         format="ss:SSS"
         @finish="$toast($t('finished'))"
@@ -73,7 +73,6 @@ export default {
       customFormat: '自定义格式',
       manualControl: '手动控制',
       formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
-      add: '延长',
       reset: '重置',
       pause: '暂停',
       start: '开始',
@@ -85,7 +84,6 @@ export default {
       customFormat: 'Custom Format',
       manualControl: 'Manual Control',
       formatWithDay: 'DD Day, HH:mm:ss',
-      add: 'Add',
       reset: 'Reset',
       pause: 'Pause',
       start: 'Start',
@@ -95,8 +93,7 @@ export default {
 
   data() {
     return {
-      time: 30 * 60 * 60 * 1000,
+      time: 30 * 60 * 60 * 1000
-      manualTime: 3000
     };
   },
 
@@ -111,10 +108,6 @@ export default {
 
     reset() {
       this.$refs.countDown.reset();
-    },
-
-    add() {
-      this.manualTime += 3000;
     }
   }
 };

src/count-down/index.js

@@ -40,9 +40,7 @@ export default createComponent({
   watch: {
     time: {
       immediate: true,
-      handler() {
+      handler: 'reset'
-        this.reset();
-      }
     }
   },
 

src/coupon-list/index.js

@@ -94,9 +94,7 @@ export default createComponent({
       this.$emit('input', code);
     },
 
-    displayedCouponIndex(val) {
+    displayedCouponIndex: 'scrollToShowCoupon'
-      this.scrollToShowCoupon(val);
-    }
   },
 
   mounted() {

src/mixins/popup/index.js

@@ -62,9 +62,7 @@ export const PopupMixin = {
       this.$emit(type);
     },
 
-    overlay() {
+    overlay: 'renderOverlay'
-      this.renderOverlay();
-    }
   },
 
   mounted() {

src/mixins/portal.ts

@@ -20,9 +20,7 @@ export function PortalMixin({ afterPortal }: PortalMixinOptions) {
     },
 
     watch: {
-      getContainer() {
+      getContainer: 'portal'
-        this.portal();
-      }
     },
 
     mounted() {

src/picker/index.js

@@ -42,9 +42,7 @@ export default createComponent({
   },
 
   watch: {
-    columns() {
+    columns: 'setColumns'
-      this.setColumns();
-    }
   },
 
   methods: {

src/progress/index.js

@@ -35,21 +35,16 @@ export default createComponent({
   },
 
   mounted() {
-    this.getWidth();
+    this.setWidth();
   },
 
   watch: {
-    showPivot() {
+    showPivot: 'setWidth',
-      this.getWidth();
+    pivotText: 'setWidth'
-    },
-
-    pivotText() {
-      this.getWidth();
-    }
   },
 
   methods: {
-    getWidth() {
+    setWidth() {
       this.$nextTick(() => {
         this.progressWidth = this.$el.offsetWidth;
         this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;

src/sku/Sku.js

@@ -105,9 +105,7 @@ export default createComponent({
       this.show = val;
     },
 
-    skuTree(val) {
+    skuTree: 'resetSelectedSku'
-      this.resetSelectedSku(val);
-    }
   },
 
   computed: {

src/tabbar/index.js

@@ -30,13 +30,8 @@ export default createComponent({
   },
 
   watch: {
-    children() {
+    value: 'setActiveItem',
-      this.setActiveItem();
+    children: 'setActiveItem'
-    },
-
-    value() {
-      this.setActiveItem();
-    }
   },
 
   methods: {

src/tabs/index.js

@@ -99,16 +99,14 @@ export default createComponent({
   },
 
   watch: {
+    color: 'setLine',
+
     active(name) {
       if (name !== this.currentName) {
         this.setCurrentIndexByName(name);
       }
     },
 
-    color() {
-      this.setLine();
-    },
-
     children() {
       this.setCurrentIndexByName(this.currentName || this.active);
       this.scrollIntoView();

src/toast/Toast.js

@@ -44,13 +44,8 @@ export default createComponent({
   },
 
   watch: {
-    value() {
+    value: 'toggleClickable',
-      this.toggleClickable();
+    forbidClick: 'toggleClickable'
-    },
-
-    forbidClick() {
-      this.toggleClickable();
-    }
   },
 
   methods: {