perf: update tabs

components/tabs/__tests__/__snapshots__/demo.test.js.snap

@@ -124,7 +124,8 @@ exports[`renders ./antdv-demo/docs/tabs/demo/card-top.md correctly 1`] = `
 exports[`renders ./antdv-demo/docs/tabs/demo/custom-add-trigger.md correctly 1`] = `
 <div>
   <div style="margin-bottom: 16px;"><button class="ant-btn" type="button">
-      <!----><span>ADD</span></button></div>
+      <!----><span>ADD</span>
+    </button></div>
   <div class="ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation ant-tabs ant-tabs-top">
     <div role="tablist" class="ant-tabs-bar ant-tabs-top-bar ant-tabs-card-bar" tabindex="0">
       <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><span role="img" aria-label="left" class="anticon anticon-left ant-tabs-tab-prev-icon-target"><svg class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-tabs-tab-next-icon-target"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span></span>
@@ -242,7 +243,8 @@ exports[`renders ./antdv-demo/docs/tabs/demo/editable-card.md correctly 1`] = `
 <div class="ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation ant-tabs ant-tabs-top">
   <div role="tablist" class="ant-tabs-bar ant-tabs-top-bar ant-tabs-card-bar" tabindex="0">
     <div class="ant-tabs-extra-content" style="float: right;"><span><span tabindex="-1" role="img" aria-label="plus" class="anticon anticon-plus ant-tabs-new-tab"><svg class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
-      <!----></span></div>
+      <!----></span>
+    </div>
     <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><span role="img" aria-label="left" class="anticon anticon-left ant-tabs-tab-prev-icon-target"><svg class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-tabs-tab-next-icon-target"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span></span>
       <div class="ant-tabs-nav-wrap">
         <div class="ant-tabs-nav-scroll">
@@ -290,7 +292,8 @@ exports[`renders ./antdv-demo/docs/tabs/demo/extra.md correctly 1`] = `
 <div class="ant-tabs-line ant-tabs ant-tabs-top">
   <div role="tablist" class="ant-tabs-bar ant-tabs-top-bar" tabindex="0">
     <div class="ant-tabs-extra-content" style="float: right;"><button class="ant-btn" type="button">
-        <!----><span>Extra Action</span></button></div>
+        <!----><span>Extra Action</span>
+      </button></div>
     <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><span role="img" aria-label="left" class="anticon anticon-left ant-tabs-tab-prev-icon-target"><svg class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><span role="img" aria-label="right" class="anticon anticon-right ant-tabs-tab-next-icon-target"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span></span>
       <div class="ant-tabs-nav-wrap">
         <div class="ant-tabs-nav-scroll">

components/tabs/tabs.jsx

@@ -172,6 +172,6 @@ export default {
       onChange: this.handleChange,
       class: cls,
     };
-    return <VcTabs {...tabsProps} __propsSymbol__={Symbol()} />;
+    return <VcTabs {...tabsProps} />;
   },
 };

components/vc-tabs/src/Tabs.jsx

@@ -1,9 +1,8 @@
-import { provide } from 'vue';
+import { provide, reactive, watchEffect } from 'vue';
 import BaseMixin from '../../_util/BaseMixin';
 import PropTypes from '../../_util/vue-types';
 import raf from 'raf';
 import KeyCode from './KeyCode';
-import { getOptionProps } from '../../_util/props-util';
 import { cloneElement } from '../../_util/vnode';
 import Sentinel from './Sentinel';
 import isValid from '../../_util/isValid';
@@ -40,43 +39,42 @@ export default {
     tabBarPosition: PropTypes.string.def('top'),
     activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    __propsSymbol__: PropTypes.any,
     direction: PropTypes.string.def('ltr'),
     tabBarGutter: PropTypes.number,
   },
-  data() {
-    provide('sentinelContext', this);
-    const props = getOptionProps(this);
+  setup(props) {
     let activeKey;
-    if ('activeKey' in props) {
+    if (props.activeKey !== undefined) {
       activeKey = props.activeKey;
-    } else if ('defaultActiveKey' in props) {
+    } else if (props.defaultActiveKey !== undefined) {
       activeKey = props.defaultActiveKey;
     } else {
       activeKey = getDefaultActiveKey(props);
     }
+    const state = reactive({
+      _activeKey: activeKey,
+    });
+    watchEffect(
+      () => {
+        if (props.activeKey !== undefined) {
+          state._activeKey = props.activeKey;
+        } else if (!activeKeyIsValid(props, state._activeKey)) {
+          // https://github.com/ant-design/ant-design/issues/7093
+          state._activeKey = getDefaultActiveKey(props);
+        }
+      },
+      {
+        flush: 'sync',
+      },
+    );
+    return { state };
+  },
+  created() {
     this.panelSentinelStart = undefined;
     this.panelSentinelEnd = undefined;
     this.sentinelStart = undefined;
     this.sentinelEnd = undefined;
-    return {
-      _activeKey: activeKey,
-    };
-  },
-  watch: {
-    __propsSymbol__() {
-      const nextProps = getOptionProps(this);
-      if ('activeKey' in nextProps) {
-        this.setState({
-          _activeKey: nextProps.activeKey,
-        });
-      } else if (!activeKeyIsValid(nextProps, this.$data._activeKey)) {
-        // https://github.com/ant-design/ant-design/issues/7093
-        this.setState({
-          _activeKey: getDefaultActiveKey(nextProps),
-        });
-      }
-    },
+    provide('sentinelContext', this);
   },
   beforeUnmount() {
     this.destroy = true;
@@ -133,12 +131,10 @@ export default {
     },
 
     setActiveKey(activeKey) {
-      if (this.$data._activeKey !== activeKey) {
-        const props = getOptionProps(this);
-        if (!('activeKey' in props)) {
-          this.setState({
-            _activeKey: activeKey,
-          });
+      if (this.state._activeKey !== activeKey) {
+        const props = this.$props;
+        if (props.activeKey === undefined) {
+          this.state._activeKey = activeKey;
         }
         this.__emit('update:activeKey', activeKey);
         this.__emit('change', activeKey);
@@ -146,7 +142,7 @@ export default {
     },
 
     getNextActiveKey(next) {
-      const activeKey = this.$data._activeKey;
+      const activeKey = this.state._activeKey;
       const children = [];
       this.$props.children.forEach(c => {
         if (c && !c.disabled && c.disabled !== '') {
@@ -206,7 +202,7 @@ export default {
       navWrapper,
       tabBarPosition,
       panels: props.children,
-      activeKey: this.$data._activeKey,
+      activeKey: this.state._activeKey,
       direction,
       tabBarGutter,
       onKeydown: this.onNavKeyDown,
@@ -216,7 +212,7 @@ export default {
     const tabContent = cloneElement(renderTabContent(), {
       prefixCls,
       tabBarPosition,
-      activeKey: this.$data._activeKey,
+      activeKey: this.state._activeKey,
       destroyInactiveTabPane,
       direction,
       onChange: this.setActiveKey,