fix(Tabs): incorrect insert position in some cases (#11462)

packages/vant-use/src/useRelation/useChildren.ts

@@ -37,6 +37,20 @@ export function flattenVNodes(children: VNodeNormalizedChildren) {
   return result;
 }
 
+const findVNodeIndex = (vnodes: VNode[], vnode: VNode) => {
+  const index = vnodes.indexOf(vnode);
+  if (index === -1) {
+    return vnodes.findIndex(
+      (item) =>
+        vnode.key !== undefined &&
+        vnode.key !== null &&
+        item.type === vnode.type &&
+        item.key === vnode.key
+    );
+  }
+  return index;
+};
+
 // sort children instances by vnodes order
 export function sortChildren(
   parent: ComponentInternalInstance,
@@ -46,7 +60,7 @@ export function sortChildren(
   const vnodes = flattenVNodes(parent.subTree.children);
 
   internalChildren.sort(
-    (a, b) => vnodes.indexOf(a.vnode) - vnodes.indexOf(b.vnode)
+    (a, b) => findVNodeIndex(vnodes, a.vnode) - findVNodeIndex(vnodes, b.vnode)
   );
 
   const orderedPublicChildren = internalChildren.map((item) => item.proxy!);

packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap

@@ -154,6 +154,54 @@ exports[`should render correctly after inserting a tab 1`] = `
 </div>
 `;
 
+exports[`should render correctly after inserting a tab from an array 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap">
+    <div role="tablist"
+         class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
+    >
+      <div id="van-tabs-0"
+           role="tab"
+           class="van-tab van-tab--line"
+           tabindex="-1"
+           aria-selected="false"
+      >
+        <span class="van-tab__text van-tab__text--ellipsis">
+          1
+        </span>
+      </div>
+      <div id="van-tabs-1"
+           role="tab"
+           class="van-tab van-tab--line van-tab--active"
+           tabindex="0"
+           aria-selected="true"
+      >
+        <span class="van-tab__text van-tab__text--ellipsis">
+          2
+        </span>
+      </div>
+      <div id="van-tabs-2"
+           role="tab"
+           class="van-tab van-tab--line"
+           tabindex="-1"
+           aria-selected="false"
+      >
+        <span class="van-tab__text van-tab__text--ellipsis">
+          3
+        </span>
+      </div>
+      <div class="van-tabs__line"
+           style="transform: translateX(50px) translateX(-50%);"
+      >
+      </div>
+    </div>
+  </div>
+  <div class="van-tabs__content">
+  </div>
+</div>
+`;
+
 exports[`should render correctly after inserting a tab with name 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap">

packages/vant/src/tab/test/insert.spec.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
 import { mount, later } from '../../../test';
 import { Tab } from '..';
 import { Tabs } from '../../tabs';
@@ -32,6 +32,45 @@ test('should render correctly after inserting a tab', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
+test('should render correctly after inserting a tab from an array', async () => {
+  const tabs = reactive([
+    {
+      text: 1,
+      show: true,
+    },
+    {
+      text: 2,
+      show: false,
+    },
+    {
+      text: 3,
+      show: true,
+    },
+  ]);
+
+  const wrapper = mount({
+    render() {
+      return (
+        <Tabs v-model:active={this.active}>
+          {tabs.map((tab, index) => (
+            <Tab title={String(tab.text)} v-show={tab.show} key={index} />
+          ))}
+        </Tabs>
+      );
+    },
+    data() {
+      return {
+        active: 1,
+      };
+    },
+  });
+
+  await later();
+  tabs[1].show = true;
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
 test('should render correctly after inserting a tab with name', async () => {
   const onChange = jest.fn();
   const wrapper = mount({