diff --git a/dist/button/index.js b/dist/button/index.js
index 2dd7c883..f2fe2701 100644
--- a/dist/button/index.js
+++ b/dist/button/index.js
@@ -45,28 +45,7 @@ VantComponent({
       type: String,
       value: '20px',
     },
-    color: {
-      type: String,
-      observer(color) {
-        let style = '';
-        if (color) {
-          style += `color: ${this.data.plain ? color : 'white'};`;
-          if (!this.data.plain) {
-            // Use background instead of backgroundColor to make linear-gradient work
-            style += `background: ${color};`;
-          }
-          // hide border when color is linear-gradient
-          if (color.indexOf('gradient') !== -1) {
-            style += 'border: 0;';
-          } else {
-            style += `border-color: ${color};`;
-          }
-        }
-        if (style !== this.data.baseStyle) {
-          this.setData({ baseStyle: style });
-        }
-      },
-    },
+    color: String,
   },
   methods: {
     onClick() {
diff --git a/dist/button/index.wxml b/dist/button/index.wxml
index ab393e8f..1d7db84c 100644
--- a/dist/button/index.wxml
+++ b/dist/button/index.wxml
@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <button
   id="{{ id }}"
@@ -7,7 +8,7 @@
   hover-class="van-button--active hover-class"
   lang="{{ lang }}"
   form-type="{{ formType }}"
-  style="{{ baseStyle }} {{ customStyle }}"
+  style="{{ computed.rootStyle({ plain, color }) }} {{ customStyle }}"
   open-type="{{ disabled ? '' : openType }}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"
@@ -30,7 +31,7 @@
       custom-class="loading-class"
       size="{{ loadingSize }}"
       type="{{ loadingType }}"
-      color="{{ loadingColor(type,color,plain) }}"
+      color="{{ computed.loadingColor({ type, color, plain }) }}"
     />
     <view wx:if="{{ loadingText }}" class="van-button__loading-text">
       {{ loadingText }}
@@ -50,19 +51,3 @@
     </view>
   </block>
 </button>
-
-
-<wxs module="loadingColor">
-function get(type, color,plain) {
-  if(plain) {
-    return color ? color: '#c9c9c9';
-  }
-
-  if(type === 'default') {
-    return '#c9c9c9';
-  }
-  return 'white';
-}
-
-module.exports = get;
-</wxs>
diff --git a/dist/button/index.wxs b/dist/button/index.wxs
new file mode 100644
index 00000000..7bb506a9
--- /dev/null
+++ b/dist/button/index.wxs
@@ -0,0 +1,39 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  if (!data.color) {
+    return '';
+  }
+
+  var properties = {
+    color: data.plain ? data.color : '#fff',
+    background: data.plain ? null : data.color,
+  };
+
+  // hide border when color is linear-gradient
+  if (data.color.indexOf('gradient') !== -1) {
+    properties.border = 0;
+  } else {
+    properties['border-color'] = data.color;
+  }
+
+  return style(properties);
+}
+
+function loadingColor(data) {
+  if (data.plain) {
+    return data.color ? data.color : '#c9c9c9';
+  }
+
+  if (data.type === 'default') {
+    return '#c9c9c9';
+  }
+
+  return '#fff';
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  loadingColor: loadingColor,
+};
diff --git a/dist/checkbox/index.wxs b/dist/checkbox/index.wxs
index 927eb55d..eb9c7726 100644
--- a/dist/checkbox/index.wxs
+++ b/dist/checkbox/index.wxs
@@ -1,20 +1,20 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
-  var styles = [['font-size', utils.addUnit(iconSize)]];
+  var styles = {
+    'font-size': addUnit(iconSize),
+  };
+
   if (checkedColor && value && !disabled && !parentDisabled) {
-    styles.push(['border-color', checkedColor]);
-    styles.push(['background-color', checkedColor]);
+    styles['border-color'] = checkedColor;
+    styles['background-color'] = checkedColor;
   }
 
-  return styles
-    .map(function(item) {
-      return item.join(':');
-    })
-    .join(';');
+  return style(styles);
 }
 
 module.exports = {
-  iconStyle: iconStyle
+  iconStyle: iconStyle,
 };
diff --git a/dist/circle/index.js b/dist/circle/index.js
index 3feaa5c8..28808f69 100644
--- a/dist/circle/index.js
+++ b/dist/circle/index.js
@@ -1,7 +1,8 @@
 import { VantComponent } from '../common/component';
-import { isObj } from '../common/utils';
 import { BLUE, WHITE } from '../common/color';
 import { adaptor } from './canvas';
+import { isObj } from '../common/validator';
+import { getSystemInfoSync } from '../common/utils';
 function format(rate) {
   return Math.min(Math.max(rate, 0), 100);
 }
@@ -68,7 +69,7 @@ VantComponent({
         const ctx = wx.createCanvasContext('van-circle', this);
         return Promise.resolve(ctx);
       }
-      const dpr = wx.getSystemInfoSync().pixelRatio;
+      const dpr = getSystemInfoSync().pixelRatio;
       return new Promise((resolve) => {
         wx.createSelectorQuery()
           .in(this)
diff --git a/dist/collapse-item/animate.js b/dist/collapse-item/animate.js
index c3f15927..7ce1dae0 100644
--- a/dist/collapse-item/animate.js
+++ b/dist/collapse-item/animate.js
@@ -60,8 +60,7 @@ function useAnimation(context, expanded, mounted, height) {
   });
 }
 export function setContentAnimate(context, expanded, mounted) {
-  getRect
-    .call(context, '.van-collapse-item__content')
+  getRect(context, '.van-collapse-item__content')
     .then((rect) => rect.height)
     .then((height) => {
       canIUseAnimate()
diff --git a/dist/common/utils.d.ts b/dist/common/utils.d.ts
index c0947476..b4900da5 100644
--- a/dist/common/utils.d.ts
+++ b/dist/common/utils.d.ts
@@ -1,22 +1,24 @@
 /// <reference types="miniprogram-api-typings" />
-export declare function isDef(value: any): boolean;
-export declare function isObj(x: any): boolean;
 export declare function range(num: number, min: number, max: number): number;
-export declare function nextTick(fn: Function): void;
+export declare function nextTick(cb: (...args: any[]) => void): void;
 export declare function getSystemInfoSync(): WechatMiniprogram.GetSystemInfoSyncResult;
 export declare function addUnit(value?: string | number): string | undefined;
 export declare function requestAnimationFrame(
-  cb: Function
-): void | WechatMiniprogram.NodesRef;
+  cb: () => void
+): number | WechatMiniprogram.NodesRef;
 export declare function pickExclude(obj: unknown, keys: string[]): {};
 export declare function getRect(
-  this: WechatMiniprogram.Component.TrivialInstance,
+  context: WechatMiniprogram.Component.TrivialInstance,
   selector: string
 ): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
 export declare function getAllRect(
-  this: WechatMiniprogram.Component.TrivialInstance,
+  context: WechatMiniprogram.Component.TrivialInstance,
   selector: string
 ): Promise<WechatMiniprogram.BoundingClientRectCallbackResult[]>;
+export declare function groupSetData(
+  context: WechatMiniprogram.Component.TrivialInstance,
+  cb: () => void
+): void;
 export declare function toPromise(
   promiseLike: Promise<unknown> | unknown
 ): Promise<unknown>;
diff --git a/dist/common/utils.js b/dist/common/utils.js
index 24b55413..576a67ed 100644
--- a/dist/common/utils.js
+++ b/dist/common/utils.js
@@ -1,18 +1,16 @@
-import { isNumber, isPlainObject, isPromise } from './validator';
-export function isDef(value) {
-  return value !== undefined && value !== null;
-}
-export function isObj(x) {
-  const type = typeof x;
-  return x !== null && (type === 'object' || type === 'function');
-}
+import { isDef, isNumber, isPlainObject, isPromise } from './validator';
+import { canIUseGroupSetData, canIUseNextTick } from './version';
 export function range(num, min, max) {
   return Math.min(Math.max(num, min), max);
 }
-export function nextTick(fn) {
-  setTimeout(() => {
-    fn();
-  }, 1000 / 30);
+export function nextTick(cb) {
+  if (canIUseNextTick()) {
+    wx.nextTick(cb);
+  } else {
+    setTimeout(() => {
+      cb();
+    }, 1000 / 30);
+  }
 }
 let systemInfo;
 export function getSystemInfoSync() {
@@ -31,7 +29,9 @@ export function addUnit(value) {
 export function requestAnimationFrame(cb) {
   const systemInfo = getSystemInfoSync();
   if (systemInfo.platform === 'devtools') {
-    return nextTick(cb);
+    return setTimeout(() => {
+      cb();
+    }, 1000 / 30);
   }
   return wx
     .createSelectorQuery()
@@ -52,24 +52,31 @@ export function pickExclude(obj, keys) {
     return prev;
   }, {});
 }
-export function getRect(selector) {
+export function getRect(context, selector) {
   return new Promise((resolve) => {
     wx.createSelectorQuery()
-      .in(this)
+      .in(context)
       .select(selector)
       .boundingClientRect()
       .exec((rect = []) => resolve(rect[0]));
   });
 }
-export function getAllRect(selector) {
+export function getAllRect(context, selector) {
   return new Promise((resolve) => {
     wx.createSelectorQuery()
-      .in(this)
+      .in(context)
       .selectAll(selector)
       .boundingClientRect()
       .exec((rect = []) => resolve(rect[0]));
   });
 }
+export function groupSetData(context, cb) {
+  if (canIUseGroupSetData()) {
+    context.groupSetData(cb);
+  } else {
+    cb();
+  }
+}
 export function toPromise(promiseLike) {
   if (isPromise(promiseLike)) {
     return promiseLike;
diff --git a/dist/common/validator.d.ts b/dist/common/validator.d.ts
index f90bc133..ae7c48f1 100644
--- a/dist/common/validator.d.ts
+++ b/dist/common/validator.d.ts
@@ -3,7 +3,7 @@ export declare function isPlainObject(
   val: unknown
 ): val is Record<string, unknown>;
 export declare function isPromise<T = unknown>(val: unknown): val is Promise<T>;
-export declare function isDef(value: any): boolean;
+export declare function isDef(value: unknown): boolean;
 export declare function isObj(x: unknown): x is Record<string, unknown>;
 export declare function isNumber(value: string): boolean;
 export declare function isBoolean(value: unknown): value is boolean;
diff --git a/dist/common/version.d.ts b/dist/common/version.d.ts
index 4af01327..79c0c248 100644
--- a/dist/common/version.d.ts
+++ b/dist/common/version.d.ts
@@ -1,3 +1,5 @@
 export declare function canIUseModel(): boolean;
 export declare function canIUseFormFieldButton(): boolean;
 export declare function canIUseAnimate(): boolean;
+export declare function canIUseGroupSetData(): boolean;
+export declare function canIUseNextTick(): boolean;
diff --git a/dist/common/version.js b/dist/common/version.js
index 1e0a0723..9634c504 100644
--- a/dist/common/version.js
+++ b/dist/common/version.js
@@ -33,3 +33,10 @@ export function canIUseAnimate() {
   const system = getSystemInfoSync();
   return compareVersion(system.SDKVersion, '2.9.0') >= 0;
 }
+export function canIUseGroupSetData() {
+  const system = getSystemInfoSync();
+  return compareVersion(system.SDKVersion, '2.4.0') >= 0;
+}
+export function canIUseNextTick() {
+  return wx.canIUse('nextTick');
+}
diff --git a/dist/datetime-picker/index.js b/dist/datetime-picker/index.js
index 06d4f328..75bd0630 100644
--- a/dist/datetime-picker/index.js
+++ b/dist/datetime-picker/index.js
@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { isDef } from '../common/utils';
+import { isDef } from '../common/validator';
 import { pickerProps } from '../picker/shared';
 const currentYear = new Date().getFullYear();
 function isValidDate(date) {
diff --git a/dist/dropdown-menu/index.js b/dist/dropdown-menu/index.js
index 6a1d7674..bdb884c8 100644
--- a/dist/dropdown-menu/index.js
+++ b/dist/dropdown-menu/index.js
@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { addUnit, getRect } from '../common/utils';
+import { addUnit, getRect, getSystemInfoSync } from '../common/utils';
 let ARRAY = [];
 VantComponent({
   field: true,
@@ -52,7 +52,7 @@ VantComponent({
     itemListData: [],
   },
   beforeCreate() {
-    const { windowHeight } = wx.getSystemInfoSync();
+    const { windowHeight } = getSystemInfoSync();
     this.windowHeight = windowHeight;
     ARRAY.push(this);
   },
@@ -87,7 +87,7 @@ VantComponent({
     },
     getChildWrapperStyle() {
       const { zIndex, direction } = this.data;
-      return getRect.call(this, '.van-dropdown-menu').then((rect) => {
+      return getRect(this, '.van-dropdown-menu').then((rect) => {
         const { top = 0, bottom = 0 } = rect;
         const offset = direction === 'down' ? bottom : this.windowHeight - top;
         let wrapperStyle = `z-index: ${zIndex};`;
diff --git a/dist/goods-action/index.wxss b/dist/goods-action/index.wxss
index f03c6e79..d0def95e 100644
--- a/dist/goods-action/index.wxss
+++ b/dist/goods-action/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-goods-action{position:fixed;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:50px;height:var(--goods-action-height,50px);background-color:#fff;background-color:var(--goods-action-background-color,#fff)}.van-goods-action--safe{padding-bottom:env(safe-area-inset-bottom)}
\ No newline at end of file
+@import '../common/index.wxss';.van-goods-action{position:fixed;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;box-sizing:initial;height:50px;height:var(--goods-action-height,50px);background-color:#fff;background-color:var(--goods-action-background-color,#fff)}.van-goods-action--safe{padding-bottom:env(safe-area-inset-bottom)}
\ No newline at end of file
diff --git a/dist/grid-item/index.js b/dist/grid-item/index.js
index eede827f..50184202 100644
--- a/dist/grid-item/index.js
+++ b/dist/grid-item/index.js
@@ -1,6 +1,5 @@
 import { link } from '../mixins/link';
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
 VantComponent({
   relation: {
     name: 'grid',
@@ -40,32 +39,7 @@ VantComponent({
         direction,
         iconSize,
       } = data;
-      const width = `${100 / columnNum}%`;
-      const styleWrapper = [];
-      styleWrapper.push(`width: ${width}`);
-      if (square) {
-        styleWrapper.push(`padding-top: ${width}`);
-      }
-      if (gutter) {
-        const gutterValue = addUnit(gutter);
-        styleWrapper.push(`padding-right: ${gutterValue}`);
-        const index = children.indexOf(this);
-        if (index >= columnNum && !square) {
-          styleWrapper.push(`margin-top: ${gutterValue}`);
-        }
-      }
-      let contentStyle = '';
-      if (square && gutter) {
-        const gutterValue = addUnit(gutter);
-        contentStyle = `
-          right: ${gutterValue};
-          bottom: ${gutterValue};
-          height: auto;
-        `;
-      }
       this.setData({
-        viewStyle: styleWrapper.join('; '),
-        contentStyle,
         center,
         border,
         square,
@@ -73,6 +47,8 @@ VantComponent({
         clickable,
         direction,
         iconSize,
+        index: children.indexOf(this),
+        columnNum,
       });
     },
     onClick() {
diff --git a/dist/grid-item/index.wxml b/dist/grid-item/index.wxml
index ede970ca..0070a2bb 100644
--- a/dist/grid-item/index.wxml
+++ b/dist/grid-item/index.wxml
@@ -1,9 +1,14 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
-<view class="custom-class {{ utils.bem('grid-item', { square }) }}" style="{{ viewStyle }}" bindtap="onClick">
+<view
+  class="custom-class {{ utils.bem('grid-item', { square }) }}"
+  style="{{ computed.wrapperStyle({ square, gutter, columnNum, index }) }}"
+  bindtap="onClick"
+>
   <view
     class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
-    style="{{ contentStyle }}"
+    style="{{ computed.contentStyle({ square, gutter }) }}"
   >
     <block wx:if="{{ useSlot }}">
       <slot />
diff --git a/dist/grid-item/index.wxs b/dist/grid-item/index.wxs
new file mode 100644
index 00000000..2cfe37d0
--- /dev/null
+++ b/dist/grid-item/index.wxs
@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function wrapperStyle(data) {
+  var width = 100 / data.columnNum + '%';
+
+  return style({
+    width: width,
+    'padding-top': data.square ? width : null,
+    'padding-right': addUnit(data.gutter),
+    'margin-top':
+      data.index >= data.columnNum && !data.square
+        ? addUnit(data.gutter)
+        : null,
+  });
+}
+
+function contentStyle(data) {
+  return data.square
+    ? style({
+        right: addUnit(data.gutter),
+        bottom: addUnit(data.gutter),
+        height: 'auto',
+      })
+    : '';
+}
+
+module.exports = {
+  wrapperStyle: wrapperStyle,
+  contentStyle: contentStyle,
+};
diff --git a/dist/grid/index.js b/dist/grid/index.js
index a3bec16b..06eca9be 100644
--- a/dist/grid/index.js
+++ b/dist/grid/index.js
@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
 VantComponent({
   relation: {
     name: 'grid-item',
@@ -44,17 +43,6 @@ VantComponent({
       observer: 'updateChildren',
     },
   },
-  data: {
-    viewStyle: '',
-  },
-  created() {
-    const { gutter } = this.data;
-    if (gutter) {
-      this.setData({
-        viewStyle: `padding-left: ${addUnit(gutter)}`,
-      });
-    }
-  },
   methods: {
     updateChildren() {
       this.children.forEach((child) => {
diff --git a/dist/grid/index.wxml b/dist/grid/index.wxml
index c5a545f5..2e4118f3 100644
--- a/dist/grid/index.wxml
+++ b/dist/grid/index.wxml
@@ -1,3 +1,8 @@
-<view class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}" style="{{ viewStyle }}">
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
+>
   <slot />
 </view>
diff --git a/dist/grid/index.wxs b/dist/grid/index.wxs
new file mode 100644
index 00000000..cd3b1bd5
--- /dev/null
+++ b/dist/grid/index.wxs
@@ -0,0 +1,13 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    'padding-left': addUnit(data.gutter),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};
diff --git a/dist/icon/index.wxml b/dist/icon/index.wxml
index 62eff360..3c701745 100644
--- a/dist/icon/index.wxml
+++ b/dist/icon/index.wxml
@@ -1,10 +1,9 @@
-<wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./computed.wxs" module="computed" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="{{ computed.rootClass({ classPrefix, name }) }}"
   style="{{ computed.rootStyle({ customStyle, color, size }) }}"
-  bind:tap="onClick"
+  bindtap="onClick"
 >
   <van-info
     wx:if="{{ info !== null || dot }}"
diff --git a/dist/icon/computed.wxs b/dist/icon/index.wxs
similarity index 59%
rename from dist/icon/computed.wxs
rename to dist/icon/index.wxs
index 4fde5f08..45e3aa0a 100644
--- a/dist/icon/computed.wxs
+++ b/dist/icon/index.wxs
@@ -1,5 +1,6 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function isImage(name) {
   return name.indexOf('/') !== -1;
@@ -22,25 +23,13 @@ function rootClass(data) {
 }
 
 function rootStyle(data) {
-  var styles = [];
-
-  if (data.color) {
-    styles.push(['color', data.color]);
-  }
-
-  if (data.size) {
-    styles.push(['font-size', utils.addUnit(data.size)]);
-  }
-
-  if (data.customStyle) {
-    styles.push([data.customStyle]);
-  }
-
-  return styles
-    .map(function (pair) {
-      return pair.join(':');
-    })
-    .join(';');
+  return style([
+    {
+      color: data.color,
+      'font-size': addUnit(data.size),
+    },
+    data.customStyle,
+  ]);
 }
 
 module.exports = {
diff --git a/dist/image/index.js b/dist/image/index.js
index ff408c5e..9972cb5a 100644
--- a/dist/image/index.js
+++ b/dist/image/index.js
@@ -1,15 +1,6 @@
-import { addUnit, isDef } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
-const FIT_MODE_MAP = {
-  none: 'center',
-  fill: 'scaleToFill',
-  cover: 'aspectFill',
-  contain: 'aspectFit',
-  widthFix: 'widthFix',
-  heightFix: 'heightFix',
-};
 VantComponent({
   mixins: [button, openType],
   classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
@@ -24,14 +15,8 @@ VantComponent({
       },
     },
     round: Boolean,
-    width: {
-      type: null,
-      observer: 'setStyle',
-    },
-    height: {
-      type: null,
-      observer: 'setStyle',
-    },
+    width: null,
+    height: null,
     radius: null,
     lazyLoad: Boolean,
     useErrorSlot: Boolean,
@@ -40,7 +25,6 @@ VantComponent({
     fit: {
       type: String,
       value: 'fill',
-      observer: 'setMode',
     },
     showError: {
       type: Boolean,
@@ -56,31 +40,7 @@ VantComponent({
     loading: true,
     viewStyle: '',
   },
-  mounted() {
-    this.setMode();
-    this.setStyle();
-  },
   methods: {
-    setMode() {
-      this.setData({
-        mode: FIT_MODE_MAP[this.data.fit],
-      });
-    },
-    setStyle() {
-      const { width, height, radius } = this.data;
-      let style = '';
-      if (isDef(width)) {
-        style += `width: ${addUnit(width)};`;
-      }
-      if (isDef(height)) {
-        style += `height: ${addUnit(height)};`;
-      }
-      if (isDef(radius)) {
-        style += 'overflow: hidden;';
-        style += `border-radius: ${addUnit(radius)};`;
-      }
-      this.setData({ viewStyle: style });
-    },
     onLoad(event) {
       this.setData({
         loading: false,
diff --git a/dist/image/index.wxml b/dist/image/index.wxml
index 2cccaff0..d3092bd9 100644
--- a/dist/image/index.wxml
+++ b/dist/image/index.wxml
@@ -1,14 +1,15 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
-  style="{{ viewStyle }}"
+  style="{{ computed.rootStyle({ width, height, radius }) }}"
   class="custom-class {{ utils.bem('image', { round })}}"
   bind:tap="onClick"
 >
   <image
     wx:if="{{ !error }}"
     src="{{ src }}"
-    mode="{{ mode }}"
+    mode="{{ computed.mode(fit) }}"
     lazy-load="{{ lazyLoad }}"
     class="image-class van-image__img"
     show-menu-by-longpress="{{ showMenuByLongpress }}"
diff --git a/dist/image/index.wxs b/dist/image/index.wxs
new file mode 100644
index 00000000..cec14b8b
--- /dev/null
+++ b/dist/image/index.wxs
@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      width: addUnit(data.width),
+      height: addUnit(data.height),
+      'border-radius': addUnit(data.radius),
+    },
+    data.radius ? 'overflow: hidden' : null,
+  ]);
+}
+
+var FIT_MODE_MAP = {
+  none: 'center',
+  fill: 'scaleToFill',
+  cover: 'aspectFill',
+  contain: 'aspectFit',
+  widthFix: 'widthFix',
+  heightFix: 'heightFix',
+};
+
+function mode(fit) {
+  return FIT_MODE_MAP[fit];
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  mode: mode,
+};
diff --git a/dist/index-anchor/index.js b/dist/index-anchor/index.js
index 3e2eeede..d2a61ce9 100644
--- a/dist/index-anchor/index.js
+++ b/dist/index-anchor/index.js
@@ -17,7 +17,7 @@ VantComponent({
   },
   methods: {
     scrollIntoView(scrollTop) {
-      getRect.call(this, '.van-index-anchor-wrapper').then((rect) => {
+      getRect(this, '.van-index-anchor-wrapper').then((rect) => {
         wx.pageScrollTo({
           duration: 0,
           scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop,
diff --git a/dist/index-bar/index.js b/dist/index-bar/index.js
index c43284fd..4d6e4cc6 100644
--- a/dist/index-bar/index.js
+++ b/dist/index-bar/index.js
@@ -84,7 +84,7 @@ VantComponent({
     setAnchorsRect() {
       return Promise.all(
         this.children.map((anchor) =>
-          getRect.call(anchor, '.van-index-anchor-wrapper').then((rect) => {
+          getRect(anchor, '.van-index-anchor-wrapper').then((rect) => {
             Object.assign(anchor, {
               height: rect.height,
               top: rect.top + this.scrollTop,
@@ -94,7 +94,7 @@ VantComponent({
       );
     },
     setListRect() {
-      return getRect.call(this, '.van-index-bar').then((rect) => {
+      return getRect(this, '.van-index-bar').then((rect) => {
         Object.assign(this, {
           height: rect.height,
           top: rect.top + this.scrollTop,
@@ -102,7 +102,7 @@ VantComponent({
       });
     },
     setSiderbarRect() {
-      return getRect.call(this, '.van-index-bar__sidebar').then((res) => {
+      return getRect(this, '.van-index-bar__sidebar').then((res) => {
         this.sidebar = {
           height: res.height,
           top: res.top,
@@ -121,7 +121,7 @@ VantComponent({
       }
     },
     getAnchorRect(anchor) {
-      return getRect.call(anchor, '.van-index-anchor-wrapper').then((rect) => ({
+      return getRect(anchor, '.van-index-anchor-wrapper').then((rect) => ({
         height: rect.height,
         top: rect.top,
       }));
diff --git a/dist/mixins/transition.js b/dist/mixins/transition.js
index 1694bd1a..bbfcc869 100644
--- a/dist/mixins/transition.js
+++ b/dist/mixins/transition.js
@@ -1,5 +1,6 @@
 // @ts-nocheck
-import { isObj, requestAnimationFrame } from '../common/utils';
+import { requestAnimationFrame } from '../common/utils';
+import { isObj } from '../common/validator';
 const getClassNames = (name) => ({
   enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`,
   'enter-to': `van-${name}-enter-to van-${name}-enter-active enter-to-class enter-active-class`,
diff --git a/dist/nav-bar/index.js b/dist/nav-bar/index.js
index 11799985..b620a5dd 100644
--- a/dist/nav-bar/index.js
+++ b/dist/nav-bar/index.js
@@ -54,7 +54,7 @@ VantComponent({
         return;
       }
       wx.nextTick(() => {
-        getRect.call(this, '.van-nav-bar').then((res) => {
+        getRect(this, '.van-nav-bar').then((res) => {
           if (res && 'height' in res) {
             this.setData({ height: res.height });
           }
diff --git a/dist/notice-bar/index.js b/dist/notice-bar/index.js
index eb6aa127..ce37532d 100644
--- a/dist/notice-bar/index.js
+++ b/dist/notice-bar/index.js
@@ -64,8 +64,8 @@ VantComponent({
   methods: {
     init() {
       Promise.all([
-        getRect.call(this, '.van-notice-bar__content'),
-        getRect.call(this, '.van-notice-bar__wrap'),
+        getRect(this, '.van-notice-bar__content'),
+        getRect(this, '.van-notice-bar__wrap'),
       ]).then((rects) => {
         const [contentRect, wrapRect] = rects;
         if (
diff --git a/dist/notify/index.js b/dist/notify/index.js
index ce63bfa2..544146ac 100644
--- a/dist/notify/index.js
+++ b/dist/notify/index.js
@@ -1,5 +1,6 @@
 import { VantComponent } from '../common/component';
 import { WHITE } from '../common/color';
+import { getSystemInfoSync } from '../common/utils';
 VantComponent({
   props: {
     message: String,
@@ -30,7 +31,7 @@ VantComponent({
     show: false,
   },
   created() {
-    const { statusBarHeight } = wx.getSystemInfoSync();
+    const { statusBarHeight } = getSystemInfoSync();
     this.setData({ statusBarHeight });
   },
   methods: {
diff --git a/dist/picker-column/index.js b/dist/picker-column/index.js
index 5ea335fc..d55d2744 100644
--- a/dist/picker-column/index.js
+++ b/dist/picker-column/index.js
@@ -1,5 +1,6 @@
 import { VantComponent } from '../common/component';
-import { isObj, range } from '../common/utils';
+import { range } from '../common/utils';
+import { isObj } from '../common/validator';
 const DEFAULT_DURATION = 200;
 VantComponent({
   classes: ['active-class'],
diff --git a/dist/progress/index.js b/dist/progress/index.js
index d49fcfc5..ee6a0c15 100644
--- a/dist/progress/index.js
+++ b/dist/progress/index.js
@@ -37,8 +37,8 @@ VantComponent({
   methods: {
     setLeft() {
       Promise.all([
-        getRect.call(this, '.van-progress'),
-        getRect.call(this, '.van-progress__pivot'),
+        getRect(this, '.van-progress'),
+        getRect(this, '.van-progress__pivot'),
       ]).then(([portion, pivot]) => {
         if (portion && pivot) {
           this.setData({
diff --git a/dist/rate/index.js b/dist/rate/index.js
index d72960a8..0263da14 100644
--- a/dist/rate/index.js
+++ b/dist/rate/index.js
@@ -73,7 +73,7 @@ VantComponent({
       const { touchable } = this.data;
       if (!touchable) return;
       const { clientX } = event.touches[0];
-      getAllRect.call(this, '.van-rate__icon').then((list) => {
+      getAllRect(this, '.van-rate__icon').then((list) => {
         const target = list
           .sort((item) => item.right - item.left)
           .find((item) => clientX >= item.left && clientX <= item.right);
diff --git a/dist/slider/index.js b/dist/slider/index.js
index ad8640b8..36291e71 100644
--- a/dist/slider/index.js
+++ b/dist/slider/index.js
@@ -52,8 +52,8 @@ VantComponent({
       }
       this.touchMove(event);
       this.dragStatus = 'draging';
-      getRect.call(this, '.van-slider').then((rect) => {
-        const diff = (this.deltaX / rect.width) * 100;
+      getRect(this, '.van-slider').then((rect) => {
+        const diff = (this.deltaX / rect.width) * this.getRange();
         this.newValue = this.startValue + diff;
         this.updateValue(this.newValue, false, true);
       });
@@ -68,7 +68,7 @@ VantComponent({
     onClick(event) {
       if (this.data.disabled) return;
       const { min } = this.data;
-      getRect.call(this, '.van-slider').then((rect) => {
+      getRect(this, '.van-slider').then((rect) => {
         const value =
           ((event.detail.x - rect.left) / rect.width) * this.getRange() + min;
         this.updateValue(value, true);
diff --git a/dist/slider/index.wxs b/dist/slider/index.wxs
index d6404d62..7c43e6e5 100644
--- a/dist/slider/index.wxs
+++ b/dist/slider/index.wxs
@@ -1,18 +1,12 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function barStyle(barHeight, activeColor) {
-  var styles = [['height', utils.addUnit(barHeight)]];
-
-  if (activeColor) {
-    styles.push(['background', activeColor]);
-  }
-
-  return styles
-    .map(function (item) {
-      return item.join(':');
-    })
-    .join(';');
+  return style({
+    height: addUnit(barHeight),
+    background: activeColor,
+  });
 }
 
 module.exports = {
diff --git a/dist/stepper/index.js b/dist/stepper/index.js
index dd41e342..4beed5ab 100644
--- a/dist/stepper/index.js
+++ b/dist/stepper/index.js
@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { isDef } from '../common/utils';
+import { isDef } from '../common/validator';
 const LONG_PRESS_START_TIME = 600;
 const LONG_PRESS_INTERVAL = 200;
 // add num and avoid float number
diff --git a/dist/sticky/index.js b/dist/sticky/index.js
index 71261663..b0bd8dce 100644
--- a/dist/sticky/index.js
+++ b/dist/sticky/index.js
@@ -57,7 +57,7 @@ VantComponent({
       this.scrollTop = scrollTop || this.scrollTop;
       if (typeof container === 'function') {
         Promise.all([
-          getRect.call(this, ROOT_ELEMENT),
+          getRect(this, ROOT_ELEMENT),
           this.getContainerRect(),
         ]).then(([root, container]) => {
           if (offsetTop + root.height > container.height + container.top) {
@@ -77,7 +77,7 @@ VantComponent({
         });
         return;
       }
-      getRect.call(this, ROOT_ELEMENT).then((root) => {
+      getRect(this, ROOT_ELEMENT).then((root) => {
         if (offsetTop >= root.top) {
           this.setDataAfterDiff({ fixed: true, height: root.height });
           this.transform = 0;
diff --git a/dist/tabbar/index.js b/dist/tabbar/index.js
index 31f85ac8..3092c58d 100644
--- a/dist/tabbar/index.js
+++ b/dist/tabbar/index.js
@@ -64,7 +64,7 @@ VantComponent({
         return;
       }
       wx.nextTick(() => {
-        getRect.call(this, '.van-tabbar').then((res) => {
+        getRect(this, '.van-tabbar').then((res) => {
           this.setData({ height: res.height });
         });
       });
diff --git a/dist/tabs/index.js b/dist/tabs/index.js
index c517cec4..642c9883 100644
--- a/dist/tabs/index.js
+++ b/dist/tabs/index.js
@@ -1,6 +1,13 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
-import { getAllRect, getRect, isDef } from '../common/utils';
+import {
+  getAllRect,
+  getRect,
+  groupSetData,
+  nextTick,
+  requestAnimationFrame,
+} from '../common/utils';
+import { isDef } from '../common/validator';
 VantComponent({
   mixins: [touch],
   classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
@@ -89,27 +96,23 @@ VantComponent({
   },
   data: {
     tabs: [],
-    lineStyle: '',
     scrollLeft: 0,
     scrollable: false,
-    trackStyle: '',
     currentIndex: 0,
     container: null,
     skipTransition: true,
     lineOffsetLeft: 0,
   },
   mounted() {
-    wx.nextTick(() => {
+    requestAnimationFrame(() => {
+      this.setData({
+        container: () => this.createSelectorQuery().select('.van-tabs'),
+      });
       this.resize(true);
       this.scrollIntoView();
     });
   },
   methods: {
-    updateContainer() {
-      this.setData({
-        container: () => this.createSelectorQuery().select('.van-tabs'),
-      });
-    },
     updateTabs() {
       const { children = [], data } = this;
       this.setData({
@@ -117,7 +120,7 @@ VantComponent({
         scrollable:
           this.children.length > data.swipeThreshold || !data.ellipsis,
       });
-      this.setCurrentIndexByName(this.getCurrentName() || data.active);
+      this.setCurrentIndexByName(data.active || this.getCurrentName());
     },
     trigger(eventName, child) {
       const { currentIndex } = this.data;
@@ -138,7 +141,7 @@ VantComponent({
         this.trigger('disabled', child);
       } else {
         this.setCurrentIndex(index);
-        wx.nextTick(() => {
+        nextTick(() => {
           this.trigger('click');
         });
       }
@@ -162,21 +165,22 @@ VantComponent({
       ) {
         return;
       }
-      children.forEach((item, index) => {
-        const active = index === currentIndex;
-        if (active !== item.data.active || !item.inited) {
-          item.updateRender(active, this);
-        }
+      groupSetData(this, () => {
+        children.forEach((item, index) => {
+          const active = index === currentIndex;
+          if (active !== item.data.active || !item.inited) {
+            item.updateRender(active, this);
+          }
+        });
       });
       if (currentIndex === data.currentIndex) {
         return;
       }
       const shouldEmitChange = data.currentIndex !== null;
       this.setData({ currentIndex });
-      wx.nextTick(() => {
+      nextTick(() => {
         this.resize();
         this.scrollIntoView();
-        this.updateContainer();
         this.trigger('input');
         if (shouldEmitChange) {
           this.trigger('change');
@@ -195,8 +199,8 @@ VantComponent({
       }
       const { currentIndex, ellipsis } = this.data;
       Promise.all([
-        getAllRect.call(this, '.van-tab'),
-        getRect.call(this, '.van-tabs__line'),
+        getAllRect(this, '.van-tab'),
+        getRect(this, '.van-tabs__line'),
       ]).then(([rects = [], lineRect]) => {
         const rect = rects[currentIndex];
         if (rect == null) {
@@ -220,8 +224,8 @@ VantComponent({
         return;
       }
       Promise.all([
-        getAllRect.call(this, '.van-tab'),
-        getRect.call(this, '.van-tabs__nav'),
+        getAllRect(this, '.van-tab'),
+        getRect(this, '.van-tabs__nav'),
       ]).then(([tabRects, navRect]) => {
         const tabRect = tabRects[currentIndex];
         const offsetLeft = tabRects
diff --git a/dist/toast/toast.js b/dist/toast/toast.js
index f2724ce2..4a1b63aa 100644
--- a/dist/toast/toast.js
+++ b/dist/toast/toast.js
@@ -1,4 +1,4 @@
-import { isObj } from '../common/utils';
+import { isObj } from '../common/validator';
 const defaultOptions = {
   type: 'text',
   mask: false,
diff --git a/lib/button/index.js b/lib/button/index.js
index d38d35db..cbf57f0b 100644
--- a/lib/button/index.js
+++ b/lib/button/index.js
@@ -47,28 +47,7 @@ component_1.VantComponent({
       type: String,
       value: '20px',
     },
-    color: {
-      type: String,
-      observer: function (color) {
-        var style = '';
-        if (color) {
-          style += 'color: ' + (this.data.plain ? color : 'white') + ';';
-          if (!this.data.plain) {
-            // Use background instead of backgroundColor to make linear-gradient work
-            style += 'background: ' + color + ';';
-          }
-          // hide border when color is linear-gradient
-          if (color.indexOf('gradient') !== -1) {
-            style += 'border: 0;';
-          } else {
-            style += 'border-color: ' + color + ';';
-          }
-        }
-        if (style !== this.data.baseStyle) {
-          this.setData({ baseStyle: style });
-        }
-      },
-    },
+    color: String,
   },
   methods: {
     onClick: function () {
diff --git a/lib/button/index.wxml b/lib/button/index.wxml
index ab393e8f..1d7db84c 100644
--- a/lib/button/index.wxml
+++ b/lib/button/index.wxml
@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <button
   id="{{ id }}"
@@ -7,7 +8,7 @@
   hover-class="van-button--active hover-class"
   lang="{{ lang }}"
   form-type="{{ formType }}"
-  style="{{ baseStyle }} {{ customStyle }}"
+  style="{{ computed.rootStyle({ plain, color }) }} {{ customStyle }}"
   open-type="{{ disabled ? '' : openType }}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"
@@ -30,7 +31,7 @@
       custom-class="loading-class"
       size="{{ loadingSize }}"
       type="{{ loadingType }}"
-      color="{{ loadingColor(type,color,plain) }}"
+      color="{{ computed.loadingColor({ type, color, plain }) }}"
     />
     <view wx:if="{{ loadingText }}" class="van-button__loading-text">
       {{ loadingText }}
@@ -50,19 +51,3 @@
     </view>
   </block>
 </button>
-
-
-<wxs module="loadingColor">
-function get(type, color,plain) {
-  if(plain) {
-    return color ? color: '#c9c9c9';
-  }
-
-  if(type === 'default') {
-    return '#c9c9c9';
-  }
-  return 'white';
-}
-
-module.exports = get;
-</wxs>
diff --git a/lib/button/index.wxs b/lib/button/index.wxs
new file mode 100644
index 00000000..7bb506a9
--- /dev/null
+++ b/lib/button/index.wxs
@@ -0,0 +1,39 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  if (!data.color) {
+    return '';
+  }
+
+  var properties = {
+    color: data.plain ? data.color : '#fff',
+    background: data.plain ? null : data.color,
+  };
+
+  // hide border when color is linear-gradient
+  if (data.color.indexOf('gradient') !== -1) {
+    properties.border = 0;
+  } else {
+    properties['border-color'] = data.color;
+  }
+
+  return style(properties);
+}
+
+function loadingColor(data) {
+  if (data.plain) {
+    return data.color ? data.color : '#c9c9c9';
+  }
+
+  if (data.type === 'default') {
+    return '#c9c9c9';
+  }
+
+  return '#fff';
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  loadingColor: loadingColor,
+};
diff --git a/lib/checkbox/index.wxs b/lib/checkbox/index.wxs
index 927eb55d..eb9c7726 100644
--- a/lib/checkbox/index.wxs
+++ b/lib/checkbox/index.wxs
@@ -1,20 +1,20 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
-  var styles = [['font-size', utils.addUnit(iconSize)]];
+  var styles = {
+    'font-size': addUnit(iconSize),
+  };
+
   if (checkedColor && value && !disabled && !parentDisabled) {
-    styles.push(['border-color', checkedColor]);
-    styles.push(['background-color', checkedColor]);
+    styles['border-color'] = checkedColor;
+    styles['background-color'] = checkedColor;
   }
 
-  return styles
-    .map(function(item) {
-      return item.join(':');
-    })
-    .join(';');
+  return style(styles);
 }
 
 module.exports = {
-  iconStyle: iconStyle
+  iconStyle: iconStyle,
 };
diff --git a/lib/circle/index.js b/lib/circle/index.js
index 5c34f803..a237dae0 100644
--- a/lib/circle/index.js
+++ b/lib/circle/index.js
@@ -1,9 +1,10 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
-var utils_1 = require('../common/utils');
 var color_1 = require('../common/color');
 var canvas_1 = require('./canvas');
+var validator_1 = require('../common/validator');
+var utils_1 = require('../common/utils');
 function format(rate) {
   return Math.min(Math.max(rate, 0), 100);
 }
@@ -74,7 +75,7 @@ component_1.VantComponent({
         var ctx = wx.createCanvasContext('van-circle', this);
         return Promise.resolve(ctx);
       }
-      var dpr = wx.getSystemInfoSync().pixelRatio;
+      var dpr = utils_1.getSystemInfoSync().pixelRatio;
       return new Promise(function (resolve) {
         wx.createSelectorQuery()
           .in(_this)
@@ -98,7 +99,7 @@ component_1.VantComponent({
       var _a = this.data,
         color = _a.color,
         size = _a.size;
-      if (utils_1.isObj(color)) {
+      if (validator_1.isObj(color)) {
         return this.getContext().then(function (context) {
           var LinearColor = context.createLinearGradient(size, 0, 0, 0);
           Object.keys(color)
diff --git a/lib/collapse-item/animate.js b/lib/collapse-item/animate.js
index 9d89813f..43173837 100644
--- a/lib/collapse-item/animate.js
+++ b/lib/collapse-item/animate.js
@@ -63,8 +63,8 @@ function useAnimation(context, expanded, mounted, height) {
   });
 }
 function setContentAnimate(context, expanded, mounted) {
-  utils_1.getRect
-    .call(context, '.van-collapse-item__content')
+  utils_1
+    .getRect(context, '.van-collapse-item__content')
     .then(function (rect) {
       return rect.height;
     })
diff --git a/lib/common/utils.js b/lib/common/utils.js
index 344013f9..2c0e1d30 100644
--- a/lib/common/utils.js
+++ b/lib/common/utils.js
@@ -1,24 +1,20 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-exports.toPromise = exports.getAllRect = exports.getRect = exports.pickExclude = exports.requestAnimationFrame = exports.addUnit = exports.getSystemInfoSync = exports.nextTick = exports.range = exports.isObj = exports.isDef = void 0;
+exports.toPromise = exports.groupSetData = exports.getAllRect = exports.getRect = exports.pickExclude = exports.requestAnimationFrame = exports.addUnit = exports.getSystemInfoSync = exports.nextTick = exports.range = void 0;
 var validator_1 = require('./validator');
-function isDef(value) {
-  return value !== undefined && value !== null;
-}
-exports.isDef = isDef;
-function isObj(x) {
-  var type = typeof x;
-  return x !== null && (type === 'object' || type === 'function');
-}
-exports.isObj = isObj;
+var version_1 = require('./version');
 function range(num, min, max) {
   return Math.min(Math.max(num, min), max);
 }
 exports.range = range;
-function nextTick(fn) {
-  setTimeout(function () {
-    fn();
-  }, 1000 / 30);
+function nextTick(cb) {
+  if (version_1.canIUseNextTick()) {
+    wx.nextTick(cb);
+  } else {
+    setTimeout(function () {
+      cb();
+    }, 1000 / 30);
+  }
 }
 exports.nextTick = nextTick;
 var systemInfo;
@@ -30,7 +26,7 @@ function getSystemInfoSync() {
 }
 exports.getSystemInfoSync = getSystemInfoSync;
 function addUnit(value) {
-  if (!isDef(value)) {
+  if (!validator_1.isDef(value)) {
     return undefined;
   }
   value = String(value);
@@ -40,7 +36,9 @@ exports.addUnit = addUnit;
 function requestAnimationFrame(cb) {
   var systemInfo = getSystemInfoSync();
   if (systemInfo.platform === 'devtools') {
-    return nextTick(cb);
+    return setTimeout(function () {
+      cb();
+    }, 1000 / 30);
   }
   return wx
     .createSelectorQuery()
@@ -63,11 +61,10 @@ function pickExclude(obj, keys) {
   }, {});
 }
 exports.pickExclude = pickExclude;
-function getRect(selector) {
-  var _this = this;
+function getRect(context, selector) {
   return new Promise(function (resolve) {
     wx.createSelectorQuery()
-      .in(_this)
+      .in(context)
       .select(selector)
       .boundingClientRect()
       .exec(function (rect) {
@@ -79,11 +76,10 @@ function getRect(selector) {
   });
 }
 exports.getRect = getRect;
-function getAllRect(selector) {
-  var _this = this;
+function getAllRect(context, selector) {
   return new Promise(function (resolve) {
     wx.createSelectorQuery()
-      .in(_this)
+      .in(context)
       .selectAll(selector)
       .boundingClientRect()
       .exec(function (rect) {
@@ -95,6 +91,14 @@ function getAllRect(selector) {
   });
 }
 exports.getAllRect = getAllRect;
+function groupSetData(context, cb) {
+  if (version_1.canIUseGroupSetData()) {
+    context.groupSetData(cb);
+  } else {
+    cb();
+  }
+}
+exports.groupSetData = groupSetData;
 function toPromise(promiseLike) {
   if (validator_1.isPromise(promiseLike)) {
     return promiseLike;
diff --git a/lib/common/version.js b/lib/common/version.js
index d5e38d82..ce0fd0df 100644
--- a/lib/common/version.js
+++ b/lib/common/version.js
@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-exports.canIUseAnimate = exports.canIUseFormFieldButton = exports.canIUseModel = void 0;
+exports.canIUseNextTick = exports.canIUseGroupSetData = exports.canIUseAnimate = exports.canIUseFormFieldButton = exports.canIUseModel = void 0;
 var utils_1 = require('./utils');
 function compareVersion(v1, v2) {
   v1 = v1.split('.');
@@ -39,3 +39,12 @@ function canIUseAnimate() {
   return compareVersion(system.SDKVersion, '2.9.0') >= 0;
 }
 exports.canIUseAnimate = canIUseAnimate;
+function canIUseGroupSetData() {
+  var system = utils_1.getSystemInfoSync();
+  return compareVersion(system.SDKVersion, '2.4.0') >= 0;
+}
+exports.canIUseGroupSetData = canIUseGroupSetData;
+function canIUseNextTick() {
+  return wx.canIUse('nextTick');
+}
+exports.canIUseNextTick = canIUseNextTick;
diff --git a/lib/datetime-picker/index.js b/lib/datetime-picker/index.js
index 2690f368..6e119f2a 100644
--- a/lib/datetime-picker/index.js
+++ b/lib/datetime-picker/index.js
@@ -26,11 +26,11 @@ var __spreadArrays =
   };
 Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
-var utils_1 = require('../common/utils');
+var validator_1 = require('../common/validator');
 var shared_1 = require('../picker/shared');
 var currentYear = new Date().getFullYear();
 function isValidDate(date) {
-  return utils_1.isDef(date) && !isNaN(new Date(date).getTime());
+  return validator_1.isDef(date) && !isNaN(new Date(date).getTime());
 }
 function range(num, min, max) {
   return Math.min(Math.max(num, min), max);
diff --git a/lib/dropdown-menu/index.js b/lib/dropdown-menu/index.js
index c0fc623a..d535503c 100644
--- a/lib/dropdown-menu/index.js
+++ b/lib/dropdown-menu/index.js
@@ -54,7 +54,7 @@ component_1.VantComponent({
     itemListData: [],
   },
   beforeCreate: function () {
-    var windowHeight = wx.getSystemInfoSync().windowHeight;
+    var windowHeight = utils_1.getSystemInfoSync().windowHeight;
     this.windowHeight = windowHeight;
     ARRAY.push(this);
   },
@@ -97,22 +97,20 @@ component_1.VantComponent({
       var _a = this.data,
         zIndex = _a.zIndex,
         direction = _a.direction;
-      return utils_1.getRect
-        .call(this, '.van-dropdown-menu')
-        .then(function (rect) {
-          var _a = rect.top,
-            top = _a === void 0 ? 0 : _a,
-            _b = rect.bottom,
-            bottom = _b === void 0 ? 0 : _b;
-          var offset = direction === 'down' ? bottom : _this.windowHeight - top;
-          var wrapperStyle = 'z-index: ' + zIndex + ';';
-          if (direction === 'down') {
-            wrapperStyle += 'top: ' + utils_1.addUnit(offset) + ';';
-          } else {
-            wrapperStyle += 'bottom: ' + utils_1.addUnit(offset) + ';';
-          }
-          return wrapperStyle;
-        });
+      return utils_1.getRect(this, '.van-dropdown-menu').then(function (rect) {
+        var _a = rect.top,
+          top = _a === void 0 ? 0 : _a,
+          _b = rect.bottom,
+          bottom = _b === void 0 ? 0 : _b;
+        var offset = direction === 'down' ? bottom : _this.windowHeight - top;
+        var wrapperStyle = 'z-index: ' + zIndex + ';';
+        if (direction === 'down') {
+          wrapperStyle += 'top: ' + utils_1.addUnit(offset) + ';';
+        } else {
+          wrapperStyle += 'bottom: ' + utils_1.addUnit(offset) + ';';
+        }
+        return wrapperStyle;
+      });
     },
     onTitleTap: function (event) {
       var _this = this;
diff --git a/lib/goods-action/index.wxss b/lib/goods-action/index.wxss
index f03c6e79..d0def95e 100644
--- a/lib/goods-action/index.wxss
+++ b/lib/goods-action/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-goods-action{position:fixed;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:50px;height:var(--goods-action-height,50px);background-color:#fff;background-color:var(--goods-action-background-color,#fff)}.van-goods-action--safe{padding-bottom:env(safe-area-inset-bottom)}
\ No newline at end of file
+@import '../common/index.wxss';.van-goods-action{position:fixed;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;box-sizing:initial;height:50px;height:var(--goods-action-height,50px);background-color:#fff;background-color:var(--goods-action-background-color,#fff)}.van-goods-action--safe{padding-bottom:env(safe-area-inset-bottom)}
\ No newline at end of file
diff --git a/lib/grid-item/index.js b/lib/grid-item/index.js
index 4695aa38..5b768da6 100644
--- a/lib/grid-item/index.js
+++ b/lib/grid-item/index.js
@@ -2,7 +2,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var link_1 = require('../mixins/link');
 var component_1 = require('../common/component');
-var utils_1 = require('../common/utils');
 component_1.VantComponent({
   relation: {
     name: 'grid',
@@ -42,33 +41,7 @@ component_1.VantComponent({
         center = data.center,
         direction = data.direction,
         iconSize = data.iconSize;
-      var width = 100 / columnNum + '%';
-      var styleWrapper = [];
-      styleWrapper.push('width: ' + width);
-      if (square) {
-        styleWrapper.push('padding-top: ' + width);
-      }
-      if (gutter) {
-        var gutterValue = utils_1.addUnit(gutter);
-        styleWrapper.push('padding-right: ' + gutterValue);
-        var index = children.indexOf(this);
-        if (index >= columnNum && !square) {
-          styleWrapper.push('margin-top: ' + gutterValue);
-        }
-      }
-      var contentStyle = '';
-      if (square && gutter) {
-        var gutterValue = utils_1.addUnit(gutter);
-        contentStyle =
-          '\n          right: ' +
-          gutterValue +
-          ';\n          bottom: ' +
-          gutterValue +
-          ';\n          height: auto;\n        ';
-      }
       this.setData({
-        viewStyle: styleWrapper.join('; '),
-        contentStyle: contentStyle,
         center: center,
         border: border,
         square: square,
@@ -76,6 +49,8 @@ component_1.VantComponent({
         clickable: clickable,
         direction: direction,
         iconSize: iconSize,
+        index: children.indexOf(this),
+        columnNum: columnNum,
       });
     },
     onClick: function () {
diff --git a/lib/grid-item/index.wxml b/lib/grid-item/index.wxml
index ede970ca..0070a2bb 100644
--- a/lib/grid-item/index.wxml
+++ b/lib/grid-item/index.wxml
@@ -1,9 +1,14 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
-<view class="custom-class {{ utils.bem('grid-item', { square }) }}" style="{{ viewStyle }}" bindtap="onClick">
+<view
+  class="custom-class {{ utils.bem('grid-item', { square }) }}"
+  style="{{ computed.wrapperStyle({ square, gutter, columnNum, index }) }}"
+  bindtap="onClick"
+>
   <view
     class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
-    style="{{ contentStyle }}"
+    style="{{ computed.contentStyle({ square, gutter }) }}"
   >
     <block wx:if="{{ useSlot }}">
       <slot />
diff --git a/lib/grid-item/index.wxs b/lib/grid-item/index.wxs
new file mode 100644
index 00000000..2cfe37d0
--- /dev/null
+++ b/lib/grid-item/index.wxs
@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function wrapperStyle(data) {
+  var width = 100 / data.columnNum + '%';
+
+  return style({
+    width: width,
+    'padding-top': data.square ? width : null,
+    'padding-right': addUnit(data.gutter),
+    'margin-top':
+      data.index >= data.columnNum && !data.square
+        ? addUnit(data.gutter)
+        : null,
+  });
+}
+
+function contentStyle(data) {
+  return data.square
+    ? style({
+        right: addUnit(data.gutter),
+        bottom: addUnit(data.gutter),
+        height: 'auto',
+      })
+    : '';
+}
+
+module.exports = {
+  wrapperStyle: wrapperStyle,
+  contentStyle: contentStyle,
+};
diff --git a/lib/grid/index.js b/lib/grid/index.js
index cb5c067a..8509af3f 100644
--- a/lib/grid/index.js
+++ b/lib/grid/index.js
@@ -1,7 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
-var utils_1 = require('../common/utils');
 component_1.VantComponent({
   relation: {
     name: 'grid-item',
@@ -46,17 +45,6 @@ component_1.VantComponent({
       observer: 'updateChildren',
     },
   },
-  data: {
-    viewStyle: '',
-  },
-  created: function () {
-    var gutter = this.data.gutter;
-    if (gutter) {
-      this.setData({
-        viewStyle: 'padding-left: ' + utils_1.addUnit(gutter),
-      });
-    }
-  },
   methods: {
     updateChildren: function () {
       this.children.forEach(function (child) {
diff --git a/lib/grid/index.wxml b/lib/grid/index.wxml
index c5a545f5..2e4118f3 100644
--- a/lib/grid/index.wxml
+++ b/lib/grid/index.wxml
@@ -1,3 +1,8 @@
-<view class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}" style="{{ viewStyle }}">
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
+>
   <slot />
 </view>
diff --git a/lib/grid/index.wxs b/lib/grid/index.wxs
new file mode 100644
index 00000000..cd3b1bd5
--- /dev/null
+++ b/lib/grid/index.wxs
@@ -0,0 +1,13 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    'padding-left': addUnit(data.gutter),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};
diff --git a/lib/icon/index.wxml b/lib/icon/index.wxml
index 62eff360..3c701745 100644
--- a/lib/icon/index.wxml
+++ b/lib/icon/index.wxml
@@ -1,10 +1,9 @@
-<wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./computed.wxs" module="computed" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="{{ computed.rootClass({ classPrefix, name }) }}"
   style="{{ computed.rootStyle({ customStyle, color, size }) }}"
-  bind:tap="onClick"
+  bindtap="onClick"
 >
   <van-info
     wx:if="{{ info !== null || dot }}"
diff --git a/lib/icon/computed.wxs b/lib/icon/index.wxs
similarity index 59%
rename from lib/icon/computed.wxs
rename to lib/icon/index.wxs
index 4fde5f08..45e3aa0a 100644
--- a/lib/icon/computed.wxs
+++ b/lib/icon/index.wxs
@@ -1,5 +1,6 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function isImage(name) {
   return name.indexOf('/') !== -1;
@@ -22,25 +23,13 @@ function rootClass(data) {
 }
 
 function rootStyle(data) {
-  var styles = [];
-
-  if (data.color) {
-    styles.push(['color', data.color]);
-  }
-
-  if (data.size) {
-    styles.push(['font-size', utils.addUnit(data.size)]);
-  }
-
-  if (data.customStyle) {
-    styles.push([data.customStyle]);
-  }
-
-  return styles
-    .map(function (pair) {
-      return pair.join(':');
-    })
-    .join(';');
+  return style([
+    {
+      color: data.color,
+      'font-size': addUnit(data.size),
+    },
+    data.customStyle,
+  ]);
 }
 
 module.exports = {
diff --git a/lib/image/index.js b/lib/image/index.js
index e3348d93..cad3c714 100644
--- a/lib/image/index.js
+++ b/lib/image/index.js
@@ -1,17 +1,8 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-var utils_1 = require('../common/utils');
 var component_1 = require('../common/component');
 var button_1 = require('../mixins/button');
 var open_type_1 = require('../mixins/open-type');
-var FIT_MODE_MAP = {
-  none: 'center',
-  fill: 'scaleToFill',
-  cover: 'aspectFill',
-  contain: 'aspectFit',
-  widthFix: 'widthFix',
-  heightFix: 'heightFix',
-};
 component_1.VantComponent({
   mixins: [button_1.button, open_type_1.openType],
   classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
@@ -26,14 +17,8 @@ component_1.VantComponent({
       },
     },
     round: Boolean,
-    width: {
-      type: null,
-      observer: 'setStyle',
-    },
-    height: {
-      type: null,
-      observer: 'setStyle',
-    },
+    width: null,
+    height: null,
     radius: null,
     lazyLoad: Boolean,
     useErrorSlot: Boolean,
@@ -42,7 +27,6 @@ component_1.VantComponent({
     fit: {
       type: String,
       value: 'fill',
-      observer: 'setMode',
     },
     showError: {
       type: Boolean,
@@ -58,34 +42,7 @@ component_1.VantComponent({
     loading: true,
     viewStyle: '',
   },
-  mounted: function () {
-    this.setMode();
-    this.setStyle();
-  },
   methods: {
-    setMode: function () {
-      this.setData({
-        mode: FIT_MODE_MAP[this.data.fit],
-      });
-    },
-    setStyle: function () {
-      var _a = this.data,
-        width = _a.width,
-        height = _a.height,
-        radius = _a.radius;
-      var style = '';
-      if (utils_1.isDef(width)) {
-        style += 'width: ' + utils_1.addUnit(width) + ';';
-      }
-      if (utils_1.isDef(height)) {
-        style += 'height: ' + utils_1.addUnit(height) + ';';
-      }
-      if (utils_1.isDef(radius)) {
-        style += 'overflow: hidden;';
-        style += 'border-radius: ' + utils_1.addUnit(radius) + ';';
-      }
-      this.setData({ viewStyle: style });
-    },
     onLoad: function (event) {
       this.setData({
         loading: false,
diff --git a/lib/image/index.wxml b/lib/image/index.wxml
index 2cccaff0..d3092bd9 100644
--- a/lib/image/index.wxml
+++ b/lib/image/index.wxml
@@ -1,14 +1,15 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
-  style="{{ viewStyle }}"
+  style="{{ computed.rootStyle({ width, height, radius }) }}"
   class="custom-class {{ utils.bem('image', { round })}}"
   bind:tap="onClick"
 >
   <image
     wx:if="{{ !error }}"
     src="{{ src }}"
-    mode="{{ mode }}"
+    mode="{{ computed.mode(fit) }}"
     lazy-load="{{ lazyLoad }}"
     class="image-class van-image__img"
     show-menu-by-longpress="{{ showMenuByLongpress }}"
diff --git a/lib/image/index.wxs b/lib/image/index.wxs
new file mode 100644
index 00000000..cec14b8b
--- /dev/null
+++ b/lib/image/index.wxs
@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      width: addUnit(data.width),
+      height: addUnit(data.height),
+      'border-radius': addUnit(data.radius),
+    },
+    data.radius ? 'overflow: hidden' : null,
+  ]);
+}
+
+var FIT_MODE_MAP = {
+  none: 'center',
+  fill: 'scaleToFill',
+  cover: 'aspectFill',
+  contain: 'aspectFit',
+  widthFix: 'widthFix',
+  heightFix: 'heightFix',
+};
+
+function mode(fit) {
+  return FIT_MODE_MAP[fit];
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  mode: mode,
+};
diff --git a/lib/index-anchor/index.js b/lib/index-anchor/index.js
index 89ab9749..67e921a9 100644
--- a/lib/index-anchor/index.js
+++ b/lib/index-anchor/index.js
@@ -20,14 +20,12 @@ component_1.VantComponent({
   methods: {
     scrollIntoView: function (scrollTop) {
       var _this = this;
-      utils_1.getRect
-        .call(this, '.van-index-anchor-wrapper')
-        .then(function (rect) {
-          wx.pageScrollTo({
-            duration: 0,
-            scrollTop: scrollTop + rect.top - _this.parent.data.stickyOffsetTop,
-          });
+      utils_1.getRect(this, '.van-index-anchor-wrapper').then(function (rect) {
+        wx.pageScrollTo({
+          duration: 0,
+          scrollTop: scrollTop + rect.top - _this.parent.data.stickyOffsetTop,
         });
+      });
     },
   },
 });
diff --git a/lib/index-bar/index.js b/lib/index-bar/index.js
index 2dd42d0a..aa5ca06e 100644
--- a/lib/index-bar/index.js
+++ b/lib/index-bar/index.js
@@ -88,8 +88,8 @@ component_1.VantComponent({
       var _this = this;
       return Promise.all(
         this.children.map(function (anchor) {
-          return utils_1.getRect
-            .call(anchor, '.van-index-anchor-wrapper')
+          return utils_1
+            .getRect(anchor, '.van-index-anchor-wrapper')
             .then(function (rect) {
               Object.assign(anchor, {
                 height: rect.height,
@@ -101,7 +101,7 @@ component_1.VantComponent({
     },
     setListRect: function () {
       var _this = this;
-      return utils_1.getRect.call(this, '.van-index-bar').then(function (rect) {
+      return utils_1.getRect(this, '.van-index-bar').then(function (rect) {
         Object.assign(_this, {
           height: rect.height,
           top: rect.top + _this.scrollTop,
@@ -110,8 +110,8 @@ component_1.VantComponent({
     },
     setSiderbarRect: function () {
       var _this = this;
-      return utils_1.getRect
-        .call(this, '.van-index-bar__sidebar')
+      return utils_1
+        .getRect(this, '.van-index-bar__sidebar')
         .then(function (res) {
           _this.sidebar = {
             height: res.height,
@@ -133,8 +133,8 @@ component_1.VantComponent({
       }
     },
     getAnchorRect: function (anchor) {
-      return utils_1.getRect
-        .call(anchor, '.van-index-anchor-wrapper')
+      return utils_1
+        .getRect(anchor, '.van-index-anchor-wrapper')
         .then(function (rect) {
           return {
             height: rect.height,
diff --git a/lib/mixins/transition.js b/lib/mixins/transition.js
index 403799ce..df3b4bb7 100644
--- a/lib/mixins/transition.js
+++ b/lib/mixins/transition.js
@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 exports.transition = void 0;
 // @ts-nocheck
 var utils_1 = require('../common/utils');
+var validator_1 = require('../common/validator');
 var getClassNames = function (name) {
   return {
     enter:
@@ -70,7 +71,7 @@ function transition(showDefaultValue) {
           duration = _a.duration,
           name = _a.name;
         var classNames = getClassNames(name);
-        var currentDuration = utils_1.isObj(duration)
+        var currentDuration = validator_1.isObj(duration)
           ? duration.enter
           : duration;
         this.status = 'enter';
@@ -100,7 +101,7 @@ function transition(showDefaultValue) {
           duration = _a.duration,
           name = _a.name;
         var classNames = getClassNames(name);
-        var currentDuration = utils_1.isObj(duration)
+        var currentDuration = validator_1.isObj(duration)
           ? duration.leave
           : duration;
         this.status = 'leave';
diff --git a/lib/nav-bar/index.js b/lib/nav-bar/index.js
index 7fdae230..d207bd03 100644
--- a/lib/nav-bar/index.js
+++ b/lib/nav-bar/index.js
@@ -57,7 +57,7 @@ component_1.VantComponent({
         return;
       }
       wx.nextTick(function () {
-        utils_1.getRect.call(_this, '.van-nav-bar').then(function (res) {
+        utils_1.getRect(_this, '.van-nav-bar').then(function (res) {
           if (res && 'height' in res) {
             _this.setData({ height: res.height });
           }
diff --git a/lib/notice-bar/index.js b/lib/notice-bar/index.js
index 3766245b..12efdec6 100644
--- a/lib/notice-bar/index.js
+++ b/lib/notice-bar/index.js
@@ -69,8 +69,8 @@ component_1.VantComponent({
     init: function () {
       var _this = this;
       Promise.all([
-        utils_1.getRect.call(this, '.van-notice-bar__content'),
-        utils_1.getRect.call(this, '.van-notice-bar__wrap'),
+        utils_1.getRect(this, '.van-notice-bar__content'),
+        utils_1.getRect(this, '.van-notice-bar__wrap'),
       ]).then(function (rects) {
         var contentRect = rects[0],
           wrapRect = rects[1];
diff --git a/lib/notify/index.js b/lib/notify/index.js
index 69f9d2cc..67e080b3 100644
--- a/lib/notify/index.js
+++ b/lib/notify/index.js
@@ -2,6 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
 var color_1 = require('../common/color');
+var utils_1 = require('../common/utils');
 component_1.VantComponent({
   props: {
     message: String,
@@ -32,7 +33,7 @@ component_1.VantComponent({
     show: false,
   },
   created: function () {
-    var statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
+    var statusBarHeight = utils_1.getSystemInfoSync().statusBarHeight;
     this.setData({ statusBarHeight: statusBarHeight });
   },
   methods: {
diff --git a/lib/picker-column/index.js b/lib/picker-column/index.js
index f7f5b932..b2f0632c 100644
--- a/lib/picker-column/index.js
+++ b/lib/picker-column/index.js
@@ -2,6 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
 var utils_1 = require('../common/utils');
+var validator_1 = require('../common/validator');
 var DEFAULT_DURATION = 200;
 component_1.VantComponent({
   classes: ['active-class'],
@@ -92,11 +93,11 @@ component_1.VantComponent({
       }
     },
     isDisabled: function (option) {
-      return utils_1.isObj(option) && option.disabled;
+      return validator_1.isObj(option) && option.disabled;
     },
     getOptionText: function (option) {
       var data = this.data;
-      return utils_1.isObj(option) && data.valueKey in option
+      return validator_1.isObj(option) && data.valueKey in option
         ? option[data.valueKey]
         : option;
     },
diff --git a/lib/progress/index.js b/lib/progress/index.js
index c6d5aa6e..f41cf4ff 100644
--- a/lib/progress/index.js
+++ b/lib/progress/index.js
@@ -40,8 +40,8 @@ component_1.VantComponent({
     setLeft: function () {
       var _this = this;
       Promise.all([
-        utils_1.getRect.call(this, '.van-progress'),
-        utils_1.getRect.call(this, '.van-progress__pivot'),
+        utils_1.getRect(this, '.van-progress'),
+        utils_1.getRect(this, '.van-progress__pivot'),
       ]).then(function (_a) {
         var portion = _a[0],
           pivot = _a[1];
diff --git a/lib/rate/index.js b/lib/rate/index.js
index 788e070e..c8477d4f 100644
--- a/lib/rate/index.js
+++ b/lib/rate/index.js
@@ -92,7 +92,7 @@ component_1.VantComponent({
       var touchable = this.data.touchable;
       if (!touchable) return;
       var clientX = event.touches[0].clientX;
-      utils_1.getAllRect.call(this, '.van-rate__icon').then(function (list) {
+      utils_1.getAllRect(this, '.van-rate__icon').then(function (list) {
         var target = list
           .sort(function (item) {
             return item.right - item.left;
diff --git a/lib/slider/index.js b/lib/slider/index.js
index 812e8d82..82fb5f4c 100644
--- a/lib/slider/index.js
+++ b/lib/slider/index.js
@@ -55,12 +55,8 @@ component_1.VantComponent({
       }
       this.touchMove(event);
       this.dragStatus = 'draging';
-      utils_1.getRect.call(this, '.van-slider').then(function (rect) {
-        var diff = (_this.deltaX / rect.width) * 100;
-        // 当设置最大值时(及自定义等分)，滑动触发步进需按照等分后的滑动距离触发
-        if (this.data.max) {
-          diff = diff * this.data.max / 100
-        }
+      utils_1.getRect(this, '.van-slider').then(function (rect) {
+        var diff = (_this.deltaX / rect.width) * _this.getRange();
         _this.newValue = _this.startValue + diff;
         _this.updateValue(_this.newValue, false, true);
       });
@@ -76,7 +72,7 @@ component_1.VantComponent({
       var _this = this;
       if (this.data.disabled) return;
       var min = this.data.min;
-      utils_1.getRect.call(this, '.van-slider').then(function (rect) {
+      utils_1.getRect(this, '.van-slider').then(function (rect) {
         var value =
           ((event.detail.x - rect.left) / rect.width) * _this.getRange() + min;
         _this.updateValue(value, true);
diff --git a/lib/slider/index.wxs b/lib/slider/index.wxs
index d6404d62..7c43e6e5 100644
--- a/lib/slider/index.wxs
+++ b/lib/slider/index.wxs
@@ -1,18 +1,12 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function barStyle(barHeight, activeColor) {
-  var styles = [['height', utils.addUnit(barHeight)]];
-
-  if (activeColor) {
-    styles.push(['background', activeColor]);
-  }
-
-  return styles
-    .map(function (item) {
-      return item.join(':');
-    })
-    .join(';');
+  return style({
+    height: addUnit(barHeight),
+    background: activeColor,
+  });
 }
 
 module.exports = {
diff --git a/lib/stepper/index.js b/lib/stepper/index.js
index 41c24860..5209cbd9 100644
--- a/lib/stepper/index.js
+++ b/lib/stepper/index.js
@@ -16,7 +16,7 @@ var __assign =
   };
 Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
-var utils_1 = require('../common/utils');
+var validator_1 = require('../common/validator');
 var LONG_PRESS_START_TIME = 600;
 var LONG_PRESS_INTERVAL = 200;
 // add num and avoid float number
@@ -137,7 +137,7 @@ component_1.VantComponent({
       value = value === '' ? 0 : +value;
       value = Math.max(Math.min(this.data.max, value), this.data.min);
       // format decimal
-      if (utils_1.isDef(this.data.decimalLength)) {
+      if (validator_1.isDef(this.data.decimalLength)) {
         value = value.toFixed(this.data.decimalLength);
       }
       return value;
@@ -152,7 +152,7 @@ component_1.VantComponent({
       var formatted = this.filter(value);
       // limit max decimal length
       if (
-        utils_1.isDef(this.data.decimalLength) &&
+        validator_1.isDef(this.data.decimalLength) &&
         formatted.indexOf('.') !== -1
       ) {
         var pair = formatted.split('.');
diff --git a/lib/sticky/index.js b/lib/sticky/index.js
index 960a8f3f..feabb962 100644
--- a/lib/sticky/index.js
+++ b/lib/sticky/index.js
@@ -64,7 +64,7 @@ component_1.VantComponent({
       this.scrollTop = scrollTop || this.scrollTop;
       if (typeof container === 'function') {
         Promise.all([
-          utils_1.getRect.call(this, ROOT_ELEMENT),
+          utils_1.getRect(this, ROOT_ELEMENT),
           this.getContainerRect(),
         ]).then(function (_a) {
           var root = _a[0],
@@ -86,7 +86,7 @@ component_1.VantComponent({
         });
         return;
       }
-      utils_1.getRect.call(this, ROOT_ELEMENT).then(function (root) {
+      utils_1.getRect(this, ROOT_ELEMENT).then(function (root) {
         if (offsetTop >= root.top) {
           _this.setDataAfterDiff({ fixed: true, height: root.height });
           _this.transform = 0;
diff --git a/lib/tabbar/index.js b/lib/tabbar/index.js
index c2cfed6f..154b832f 100644
--- a/lib/tabbar/index.js
+++ b/lib/tabbar/index.js
@@ -69,7 +69,7 @@ component_1.VantComponent({
         return;
       }
       wx.nextTick(function () {
-        utils_1.getRect.call(_this, '.van-tabbar').then(function (res) {
+        utils_1.getRect(_this, '.van-tabbar').then(function (res) {
           _this.setData({ height: res.height });
         });
       });
diff --git a/lib/tabs/index.js b/lib/tabs/index.js
index 994fb502..f9ad906b 100644
--- a/lib/tabs/index.js
+++ b/lib/tabs/index.js
@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
 var touch_1 = require('../mixins/touch');
 var utils_1 = require('../common/utils');
+var validator_1 = require('../common/validator');
 component_1.VantComponent({
   mixins: [touch_1.touch],
   classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
@@ -92,10 +93,8 @@ component_1.VantComponent({
   },
   data: {
     tabs: [],
-    lineStyle: '',
     scrollLeft: 0,
     scrollable: false,
-    trackStyle: '',
     currentIndex: 0,
     container: null,
     skipTransition: true,
@@ -103,20 +102,17 @@ component_1.VantComponent({
   },
   mounted: function () {
     var _this = this;
-    wx.nextTick(function () {
+    utils_1.requestAnimationFrame(function () {
+      _this.setData({
+        container: function () {
+          return _this.createSelectorQuery().select('.van-tabs');
+        },
+      });
       _this.resize(true);
       _this.scrollIntoView();
     });
   },
   methods: {
-    updateContainer: function () {
-      var _this = this;
-      this.setData({
-        container: function () {
-          return _this.createSelectorQuery().select('.van-tabs');
-        },
-      });
-    },
     updateTabs: function () {
       var _a = this,
         _b = _a.children,
@@ -129,12 +125,12 @@ component_1.VantComponent({
         scrollable:
           this.children.length > data.swipeThreshold || !data.ellipsis,
       });
-      this.setCurrentIndexByName(this.getCurrentName() || data.active);
+      this.setCurrentIndexByName(data.active || this.getCurrentName());
     },
     trigger: function (eventName, child) {
       var currentIndex = this.data.currentIndex;
       var currentChild = child || this.children[currentIndex];
-      if (!utils_1.isDef(currentChild)) {
+      if (!validator_1.isDef(currentChild)) {
         return;
       }
       this.$emit(eventName, {
@@ -151,7 +147,7 @@ component_1.VantComponent({
         this.trigger('disabled', child);
       } else {
         this.setCurrentIndex(index);
-        wx.nextTick(function () {
+        utils_1.nextTick(function () {
           _this.trigger('click');
         });
       }
@@ -174,27 +170,28 @@ component_1.VantComponent({
         _b = _a.children,
         children = _b === void 0 ? [] : _b;
       if (
-        !utils_1.isDef(currentIndex) ||
+        !validator_1.isDef(currentIndex) ||
         currentIndex >= children.length ||
         currentIndex < 0
       ) {
         return;
       }
-      children.forEach(function (item, index) {
-        var active = index === currentIndex;
-        if (active !== item.data.active || !item.inited) {
-          item.updateRender(active, _this);
-        }
+      utils_1.groupSetData(this, function () {
+        children.forEach(function (item, index) {
+          var active = index === currentIndex;
+          if (active !== item.data.active || !item.inited) {
+            item.updateRender(active, _this);
+          }
+        });
       });
       if (currentIndex === data.currentIndex) {
         return;
       }
       var shouldEmitChange = data.currentIndex !== null;
       this.setData({ currentIndex: currentIndex });
-      wx.nextTick(function () {
+      utils_1.nextTick(function () {
         _this.resize();
         _this.scrollIntoView();
-        _this.updateContainer();
         _this.trigger('input');
         if (shouldEmitChange) {
           _this.trigger('change');
@@ -219,8 +216,8 @@ component_1.VantComponent({
         currentIndex = _a.currentIndex,
         ellipsis = _a.ellipsis;
       Promise.all([
-        utils_1.getAllRect.call(this, '.van-tab'),
-        utils_1.getRect.call(this, '.van-tabs__line'),
+        utils_1.getAllRect(this, '.van-tab'),
+        utils_1.getRect(this, '.van-tabs__line'),
       ]).then(function (_a) {
         var _b = _a[0],
           rects = _b === void 0 ? [] : _b,
@@ -252,8 +249,8 @@ component_1.VantComponent({
         return;
       }
       Promise.all([
-        utils_1.getAllRect.call(this, '.van-tab'),
-        utils_1.getRect.call(this, '.van-tabs__nav'),
+        utils_1.getAllRect(this, '.van-tab'),
+        utils_1.getRect(this, '.van-tabs__nav'),
       ]).then(function (_a) {
         var tabRects = _a[0],
           navRect = _a[1];
diff --git a/lib/toast/toast.js b/lib/toast/toast.js
index 302059b2..20f00f7e 100644
--- a/lib/toast/toast.js
+++ b/lib/toast/toast.js
@@ -15,7 +15,7 @@ var __assign =
     return __assign.apply(this, arguments);
   };
 Object.defineProperty(exports, '__esModule', { value: true });
-var utils_1 = require('../common/utils');
+var validator_1 = require('../common/validator');
 var defaultOptions = {
   type: 'text',
   mask: false,
@@ -31,7 +31,7 @@ var defaultOptions = {
 var queue = [];
 var currentOptions = __assign({}, defaultOptions);
 function parseOptions(message) {
-  return utils_1.isObj(message) ? message : { message: message };
+  return validator_1.isObj(message) ? message : { message: message };
 }
 function getContext() {
   var pages = getCurrentPages();