fix: incorrect vnode order in some cases (#6140)

src/image-preview/ImagePreview.js

@@ -162,7 +162,6 @@ export default createComponent({
       const deltaTime = new Date() - this.touchStartTime;
       const { offsetX = 0, offsetY = 0 } = this.$refs.swipe || {};
 
-      console.log('deltaTime', deltaTime);
       // prevent long tap to close component
       if (deltaTime < DOUBLE_CLICK_INTERVAL && offsetX < 10 && offsetY < 10) {
         if (!this.doubleClickTimer) {

src/tab/test/__snapshots__/insert.spec.js.snap

@@ -21,3 +21,25 @@ exports[`insert tab dynamically 1`] = `
   </div>
 </div>
 `;
+
+exports[`insert tab with child component 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">1<!----></span></div>
+      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">2<!----></span></div>
+      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">3<!----></span></div>
+      <div class="van-tabs__line"></div>
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <div role="tabpanel" class="van-tab__pane">1</div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;

src/tab/test/insert.spec.js

@@ -25,3 +25,25 @@ test('insert tab dynamically', async () => {
   wrapper.setData({ insert: true });
   expect(wrapper).toMatchSnapshot();
 });
+
+// this case will throw wierd error in index.spec.js
+// so separate it
+test('insert tab with child component', async () => {
+  const wrapper = mount({
+    template: `
+      <van-tabs v-model="active">
+        <van-tab title="1">1</van-tab>
+        <my-tab />
+        <van-tab title="3">3</van-tab>
+      </van-tabs>
+    `,
+    components: {
+      'my-tab': {
+        template: `<van-tab title="2">2</van-tab>`,
+      },
+    },
+  });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});

src/utils/vnodes.ts

@@ -7,6 +7,10 @@ function flattenVNodes(vnodes: VNode[]) {
     vnodes.forEach((vnode) => {
       result.push(vnode);
 
+      if (vnode.componentInstance) {
+        traverse(vnode.componentInstance.$children.map((item) => item.$vnode));
+      }
+
       if (vnode.children) {
         traverse(vnode.children);
       }
@@ -17,12 +21,8 @@ function flattenVNodes(vnodes: VNode[]) {
   return result;
 }
 
-type VueInstance = {
-  $vnode: VNode;
-};
-
 // sort children instances by vnodes order
-export function sortChildren(children: VueInstance[], parent: VueInstance) {
+export function sortChildren(children: Vue[], parent: Vue) {
   const { componentOptions } = parent.$vnode;
   if (!componentOptions || !componentOptions.children) {
     return;