From eaf513bf2fae0aef16e6fe072601b73e3e7c2006 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Fri, 18 Dec 2020 15:04:31 +0800
Subject: [PATCH] perf(tab): set container once after mounted (#3875)

---
 packages/common/utils.ts   | 14 +++++++++-----
 packages/common/version.ts |  4 ++++
 packages/tabs/index.ts     | 27 ++++++++++++++-------------
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/common/utils.ts b/packages/common/utils.ts
index d211da5e..b68764cc 100644
--- a/packages/common/utils.ts
+++ b/packages/common/utils.ts
@@ -1,14 +1,18 @@
 import { isDef, isNumber, isPlainObject, isPromise } from './validator';
-import { canIUseGroupSetData } from './version';
+import { canIUseGroupSetData, canIUseNextTick } from './version';
 
 export function range(num: number, min: number, max: number) {
   return Math.min(Math.max(num, min), max);
 }
 
-export function nextTick(fn: Function) {
-  setTimeout(() => {
-    fn();
-  }, 1000 / 30);
+export function nextTick(cb: (...args: any[]) => void) {
+  if (canIUseNextTick()) {
+    wx.nextTick(cb);
+  } else {
+    setTimeout(() => {
+      cb();
+    }, 1000 / 30);
+  }
 }
 
 let systemInfo: WechatMiniprogram.GetSystemInfoSyncResult;
diff --git a/packages/common/version.ts b/packages/common/version.ts
index 01f2454c..df64cc32 100644
--- a/packages/common/version.ts
+++ b/packages/common/version.ts
@@ -46,3 +46,7 @@ export function canIUseGroupSetData() {
   const system = getSystemInfoSync();
   return compareVersion(system.SDKVersion, '2.4.0') >= 0;
 }
+
+export function canIUseNextTick() {
+  return wx.canIUse('nextTick');
+}
diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts
index 3824e2fb..c7e3f1ad 100644
--- a/packages/tabs/index.ts
+++ b/packages/tabs/index.ts
@@ -1,6 +1,12 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
-import { getAllRect, getRect, groupSetData } from '../common/utils';
+import {
+  getAllRect,
+  getRect,
+  groupSetData,
+  nextTick,
+  requestAnimationFrame,
+} from '../common/utils';
 import { isDef } from '../common/validator';
 
 type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
@@ -99,10 +105,8 @@ VantComponent({
 
   data: {
     tabs: [] as Record<string, unknown>[],
-    lineStyle: '',
     scrollLeft: 0,
     scrollable: false,
-    trackStyle: '',
     currentIndex: 0,
     container: null,
     skipTransition: true,
@@ -110,19 +114,17 @@ VantComponent({
   },
 
   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({
@@ -158,7 +160,7 @@ VantComponent({
         this.trigger('disabled', child);
       } else {
         this.setCurrentIndex(index);
-        wx.nextTick(() => {
+        nextTick(() => {
           this.trigger('click');
         });
       }
@@ -203,10 +205,9 @@ VantComponent({
       const shouldEmitChange = data.currentIndex !== null;
       this.setData({ currentIndex });
 
-      wx.nextTick(() => {
+      nextTick(() => {
         this.resize();
         this.scrollIntoView();
-        this.updateContainer();
 
         this.trigger('input');
         if (shouldEmitChange) {