refactor(mixins): remove observer behavior (#2640)

packages/area/index.ts

@@ -14,14 +14,26 @@ VantComponent({
 
   props: {
     ...pickerProps,
-    value: String,
+    value: {
+      type: String,
+      observer(value: string) {
+        this.code = value;
+        this.setValues();
+      },
+    },
     areaList: {
       type: Object,
-      value: {}
+      value: {},
+      observer: 'setValues'
     },
     columnsNum: {
       type: null,
-      value: 3
+      value: 3,
+      observer(value: number) {
+        this.setData({
+          displayColumns: this.data.columns.slice(0, +value)
+        });
+      }
     },
     columnsPlaceholder: {
       type: Array,
@@ -43,21 +55,6 @@ VantComponent({
     typeToColumnsPlaceholder: {}
   },
 
-  watch: {
-    value(value: string) {
-      this.code = value;
-      this.setValues();
-    },
-
-    areaList: 'setValues',
-
-    columnsNum(value: number) {
-      this.setData({
-        displayColumns: this.data.columns.slice(0, +value)
-      });
-    }
-  },
-
   mounted() {
     setTimeout(() => {
       this.setValues();

packages/common/component.ts

@@ -1,5 +1,4 @@
 import { basic } from '../mixins/basic';
-import { observe } from '../mixins/observer/index';
 import { VantComponentOptions, CombinedComponentInstance } from 'definitions/index';
 
 function mapKeys(source: object, target: object, map: object) {
@@ -59,7 +58,6 @@ function VantComponent<Data, Props, Methods>(
     addGlobalClass: true
   };
 
-  observe(vantOptions, options);
   Component(options);
 }
 

packages/datetime-picker/index.ts

@@ -45,11 +45,15 @@ VantComponent({
 
   props: {
     ...pickerProps,
-    value: null,
+    value: {
+      type: null,
+      observer: 'updateValue'
+    },
     filter: null,
     type: {
       type: String,
-      value: 'datetime'
+      value: 'datetime',
+      observer: 'updateValue'
     },
     showToolbar: {
       type: Boolean,
@@ -61,27 +65,33 @@ VantComponent({
     },
     minDate: {
       type: Number,
-      value: new Date(currentYear - 10, 0, 1).getTime()
+      value: new Date(currentYear - 10, 0, 1).getTime(),
+      observer: 'updateValue'
     },
     maxDate: {
       type: Number,
-      value: new Date(currentYear + 10, 11, 31).getTime()
+      value: new Date(currentYear + 10, 11, 31).getTime(),
+      observer: 'updateValue'
     },
     minHour: {
       type: Number,
-      value: 0
+      value: 0,
+      observer: 'updateValue'
     },
     maxHour: {
       type: Number,
-      value: 23
+      value: 23,
+      observer: 'updateValue'
     },
     minMinute: {
       type: Number,
-      value: 0
+      value: 0,
+      observer: 'updateValue'
     },
     maxMinute: {
       type: Number,
-      value: 59
+      value: 59,
+      observer: 'updateValue'
     }
   },
 
@@ -90,17 +100,6 @@ VantComponent({
     columns: []
   },
 
-  watch: {
-    value: 'updateValue',
-    type: 'updateValue',
-    minDate: 'updateValue',
-    maxDate: 'updateValue',
-    minHour: 'updateValue',
-    maxHour: 'updateValue',
-    minMinute: 'updateValue',
-    maxMinute: 'updateValue'
-  },
-
   methods: {
     updateValue() {
       const { data } = this;

packages/definitions/index.ts

@@ -19,7 +19,6 @@ export interface VantComponentOptions<Data, Props, Methods, Instance> {
   classes?: string[];
   mixins?: string[];
   props?: Props & Weapp.PropertyOption;
-  watch?: Weapp.WatchOption<Instance>;
   relation?: Weapp.RelationOption<Instance> & { name: string };
   relations?: {
     [componentName: string]: Weapp.RelationOption<Instance>;

packages/definitions/weapp.ts

@@ -91,13 +91,6 @@ export namespace Weapp {
     changedPath: Array<string | number>,
   ) => void;
 
-  /**
-   * watch定义
-   */
-  export interface WatchOption<Instance> {
-    [name: string]: string | Observer<Instance, any>
-  }
-
   /**
    * methods定义，miniprogram-api-typings缺少this定义
    */

packages/dialog/index.ts

@@ -9,7 +9,12 @@ VantComponent({
   mixins: [button, openType],
 
   props: {
-    show: Boolean,
+    show: {
+      type: Boolean,
+      observer(show: boolean) {
+        !show && this.stopLoading();
+      }
+    },
     title: String,
     message: String,
     useSlot: Boolean,
@@ -64,12 +69,6 @@ VantComponent({
     }
   },
 
-  watch: {
-    show(show: boolean) {
-      !show && this.stopLoading();
-    }
-  },
-
   methods: {
     onConfirm() {
       this.handleAction('confirm');

packages/image/index.ts

@@ -16,7 +16,15 @@ VantComponent({
   classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
 
   props: {
-    src: String,
+    src: {
+      type: String,
+      observer() {
+        this.setData({
+          error: false,
+          loading: true
+        });
+      }
+    },
     round: Boolean,
     width: {
       type: null,
@@ -51,15 +59,6 @@ VantComponent({
     loading: true
   },
 
-  watch: {
-    src() {
-      this.setData({
-        error: false,
-        loading: true
-      });
-    }
-  },
-
   mounted() {
     this.setMode();
     this.setStyle();

packages/mixins/basic.ts

@@ -4,6 +4,12 @@ export const basic = Behavior({
       this.triggerEvent(...args);
     },
 
+    set(data: object, callback: Function) {
+      this.setData(data, callback);
+
+      return new Promise(resolve => wx.nextTick(resolve));
+    },
+
     getRect(selector: string, all: boolean) {
       return new Promise(resolve => {
         wx.createSelectorQuery()

packages/mixins/observer/behavior.ts

@@ -1,9 +0,0 @@
-export const behavior = Behavior({
-  methods: {
-    set(data: object, callback: Function) {
-      this.setData(data, callback);
-
-      return new Promise(resolve => wx.nextTick(resolve));
-    }
-  }
-});

packages/mixins/observer/index.ts

@@ -1,23 +0,0 @@
-import { behavior } from './behavior';
-
-export function observe(vantOptions, options) {
-  const { watch } = vantOptions;
-
-  options.behaviors.push(behavior);
-
-  if (watch) {
-    const props = options.properties || {};
-    Object.keys(watch).forEach(key => {
-      if (key in props) {
-        let prop = props[key];
-        if (prop === null || !('type' in prop)) {
-          prop = { type: prop };
-        }
-        prop.observer = watch[key];
-        props[key] = prop;
-      }
-    });
-
-    options.properties = props;
-  }
-}

packages/notice-bar/index.ts

@@ -8,7 +8,12 @@ VantComponent({
   props: {
     text: {
       type: String,
-      value: ''
+      value: '',
+      observer() {
+        wx.nextTick(() => {
+          this.init();
+        });
+      },
     },
     mode: {
       type: String,
@@ -28,7 +33,12 @@ VantComponent({
     },
     speed: {
       type: Number,
-      value: 50
+      value: 50,
+      observer() {
+        wx.nextTick(() => {
+          this.init();
+        });
+      }
     },
     scrollable: {
       type: Boolean,
@@ -53,15 +63,6 @@ VantComponent({
     show: true
   },
 
-  watch: {
-    text() {
-      this.setData({}, this.init);
-    },
-    speed() {
-      this.setData({}, this.init);
-    }
-  },
-
   created() {
     this.resetAnimation = wx.createAnimation({
       duration: 0,

packages/picker-column/index.ts

@@ -18,7 +18,10 @@ VantComponent({
     },
     defaultIndex: {
       type: Number,
-      value: 0
+      value: 0,
+      observer(value: number) {
+        this.setIndex(value);
+      }
     }
   },
 
@@ -42,12 +45,6 @@ VantComponent({
     });
   },
 
-  watch: {
-    defaultIndex(value: number) {
-      this.setIndex(value);
-    }
-  },
-
   methods: {
     getCount() {
       return this.data.options.length;

packages/row/index.ts

@@ -12,11 +12,10 @@ VantComponent({
   },
 
   props: {
-    gutter: Number
-  },
-
-  watch: {
-    gutter: 'setGutter'
+    gutter: {
+      type: Number,
+      observer: 'setGutter'
+    }
   },
 
   mounted() {

packages/slider/index.ts

@@ -25,7 +25,10 @@ VantComponent({
     },
     value: {
       type: Number,
-      value: 0
+      value: 0,
+      observer(value: number) {
+        this.updateValue(value, false);
+      }
     },
     barHeight: {
       type: null,
@@ -33,12 +36,6 @@ VantComponent({
     }
   },
 
-  watch: {
-    value(value: number) {
-      this.updateValue(value, false);
-    }
-  },
-
   created() {
     this.updateValue(this.data.value);
   },

packages/stepper/index.ts

@@ -17,11 +17,39 @@ VantComponent({
   classes: ['input-class', 'plus-class', 'minus-class'],
 
   props: {
-    value: null,
+    value: {
+      type: null,
+      observer(value) {
+        if (value === '') {
+          return;
+        }
+
+        const newValue = this.range(value);
+
+        if (typeof newValue === 'number' && +this.data.value !== newValue) {
+          this.setData({ value: newValue });
+        }
+      },
+    },
     integer: Boolean,
     disabled: Boolean,
-    inputWidth: null,
-    buttonSize: null,
+    inputWidth: {
+      type: null,
+      observer() {
+        this.setData({
+          inputStyle: this.computeInputStyle()
+        });
+      },
+    },
+    buttonSize: {
+      type: null,
+      observer() {
+        this.setData({
+          inputStyle: this.computeInputStyle(),
+          buttonStyle: this.computeButtonStyle()
+        });
+      }
+    },
     asyncChange: Boolean,
     disableInput: Boolean,
     decimalLength: {
@@ -52,33 +80,6 @@ VantComponent({
     disableMinus: Boolean
   },
 
-  watch: {
-    value(value) {
-      if (value === '') {
-        return;
-      }
-
-      const newValue = this.range(value);
-
-      if (typeof newValue === 'number' && +this.data.value !== newValue) {
-        this.setData({ value: newValue });
-      }
-    },
-
-    inputWidth() {
-      this.set({
-        inputStyle: this.computeInputStyle()
-      });
-    },
-
-    buttonSize() {
-      this.set({
-        inputStyle: this.computeInputStyle(),
-        buttonStyle: this.computeButtonStyle()
-      });
-    }
-  },
-
   data: {
     focus: false,
     inputStyle: '',

packages/switch/index.ts

@@ -7,7 +7,13 @@ VantComponent({
   classes: ['node-class'],
 
   props: {
-    checked: null,
+    checked: {
+      type: null,
+      observer(value) {
+        const loadingColor = this.getLoadingColor(value);
+        this.setData({ value, loadingColor });
+      }
+    },
     loading: Boolean,
     disabled: Boolean,
     activeColor: String,
@@ -26,13 +32,6 @@ VantComponent({
     }
   },
 
-  watch: {
-    checked(value) {
-      const loadingColor = this.getLoadingColor(value);
-      this.setData({ value, loadingColor });
-    }
-  },
-
   created() {
     const { checked: value } = this.data;
     const loadingColor = this.getLoadingColor(value);

packages/tab/index.ts

@@ -13,11 +13,26 @@ VantComponent({
   },
 
   props: {
-    dot: Boolean,
-    info: null,
-    title: String,
-    disabled: Boolean,
-    titleStyle: String,
+    dot: {
+      type: Boolean,
+      observer: 'update'
+    },
+    info: {
+      type: null,
+      observer: 'update'
+    },
+    title: {
+      type: String,
+      observer: 'update'
+    },
+    disabled: {
+      type: Boolean,
+      observer: 'update'
+    },
+    titleStyle: {
+      type: String,
+      observer: 'update'
+    },
     name: {
       type: [Number, String],
       value: '',
@@ -28,14 +43,6 @@ VantComponent({
     active: false
   },
 
-  watch: {
-    title: 'update',
-    disabled: 'update',
-    dot: 'update',
-    info: 'update',
-    titleStyle: 'update'
-  },
-
   methods: {
     getComputedName() {
       if (this.data.name !== '') {