[Improvement] optimize watcher (#1001)

packages/circle/index.vue

@@ -83,31 +83,26 @@ export default create({
     }
   },
 
-  mounted() {
-    this.render();
-  },
-
   watch: {
-    rate() {
-      this.render();
+    rate: {
+      handler() {
+        this.startTime = Date.now();
+        this.startRate = this.value;
+        this.endRate = this.format(this.rate);
+        this.increase = this.endRate > this.startRate;
+        this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
+        if (this.speed) {
+          cancel(this.rafId);
+          this.rafId = raf(this.animate);
+        } else {
+          this.$emit('input', this.endRate);
+        }
+      },
+      immediate: true
     }
   },
 
   methods: {
-    render() {
-      this.startTime = Date.now();
-      this.startRate = this.value;
-      this.endRate = this.format(this.rate);
-      this.increase = this.endRate > this.startRate;
-      this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
-      if (this.speed) {
-        cancel(this.rafId);
-        this.rafId = raf(this.animate);
-      } else {
-        this.$emit('input', this.endRate);
-      }
-    },
-
     animate() {
       const now = Date.now();
       const progress = Math.min((now - this.startTime) / this.duration, 1);

packages/field/index.vue

@@ -58,19 +58,22 @@ export default create({
   inheritAttrs: false,
 
   props: {
-    type: {
-      type: String,
-      default: 'text'
-    },
-    value: {},
+    value: null,
     icon: String,
     label: String,
     error: Boolean,
     center: Boolean,
-    border: Boolean,
     required: Boolean,
     autosize: [Boolean, Object],
     errorMessage: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
     onIconClick: {
       type: Function,
       default: () => {}

packages/notice-bar/index.vue

@@ -69,12 +69,14 @@ export default create({
     iconName() {
       return this.mode === 'closeable' ? 'close' : this.mode === 'link' ? 'arrow' : '';
     },
+
     barStyle() {
       return {
         color: this.color,
         background: this.background
       };
     },
+
     contentStyle() {
       return {
         paddingLeft: this.firstRound ? 0 : this.wrapWidth + 'px',
@@ -84,13 +86,21 @@ export default create({
     }
   },
 
-  mounted() {
-    this.initAnimation();
-  },
-
   watch: {
-    text: function() {
-      this.$nextTick(this.initAnimation);
+    text: {
+      handler() {
+        this.$nextTick(() => {
+          const offsetWidth = this.$refs.content.getBoundingClientRect().width;
+          const wrapWidth = this.$refs.wrap.getBoundingClientRect().width;
+          if (this.scrollable && offsetWidth > wrapWidth) {
+            this.wrapWidth = wrapWidth;
+            this.offsetWidth = offsetWidth;
+            this.duration = offsetWidth / this.speed;
+            this.animationClass = this.b('play');
+          }
+        });
+      },
+      immediate: true
     }
   },
 
@@ -105,17 +115,6 @@ export default create({
         this.duration = (this.offsetWidth + this.wrapWidth) / this.speed;
         this.animationClass = this.b('play--infinite');
       });
-    },
-
-    initAnimation() {
-      const offsetWidth = this.$refs.content.getBoundingClientRect().width;
-      const wrapWidth = this.$refs.wrap.getBoundingClientRect().width;
-      if (this.scrollable && offsetWidth > wrapWidth) {
-        this.wrapWidth = wrapWidth;
-        this.offsetWidth = offsetWidth;
-        this.duration = offsetWidth / this.speed;
-        this.animationClass = this.b('play');
-      }
     }
   }
 });

packages/pagination/index.vue

@@ -118,13 +118,12 @@ export default create({
     }
   },
 
-  created() {
-    this.selectPage(this.value);
-  },
-
   watch: {
-    value(page) {
-      this.selectPage(page);
+    value: {
+      handler(page) {
+        this.selectPage(page || this.value);
+      },
+      immediate: true
     }
   },
 

packages/picker/index.vue

@@ -70,13 +70,14 @@ export default create({
     };
   },
 
-  created() {
-    this.initColumns();
-  },
-
   watch: {
-    columns() {
-      this.initColumns();
+    columns: {
+      handler() {
+        const columns = this.columns.map(deepClone);
+        this.isSimpleColumn = columns.length && !columns[0].values;
+        this.currentColumns = this.isSimpleColumn ? [{ values: columns }] : columns;
+      },
+      immediate: true
     }
   },
 
@@ -95,12 +96,6 @@ export default create({
   },
 
   methods: {
-    initColumns() {
-      const columns = this.columns.map(deepClone);
-      this.isSimpleColumn = columns.length && !columns[0].values;
-      this.currentColumns = this.isSimpleColumn ? [{ values: columns }] : columns;
-    },
-
     emit(event) {
       if (this.isSimpleColumn) {
         this.$emit(event, this.getColumnValue(0), this.getColumnIndex(0));