perf(tab): set container once after mounted (#3875)

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) {
+export function nextTick(cb: (...args: any[]) => void) {
-  setTimeout(() => {
+  if (canIUseNextTick()) {
-    fn();
+    wx.nextTick(cb);
-  }, 1000 / 30);
+  } else {
+    setTimeout(() => {
+      cb();
+    }, 1000 / 30);
+  }
 }
 
 let systemInfo: WechatMiniprogram.GetSystemInfoSyncResult;

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');
+}

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) {