为什么 mint-ui 的 swipe 组件中依赖了 $children 遍历子组件的顺序？

Question

在学习 mint-ui 的 swipe 组件的代码，看到如下的代码片段：

代码链接

之前有看到 vue.js 文档中提到过，通过 $children 访问子组件，并不能保证顺序。但是 swipe 组件此处的代码好像就是直接依赖了 $children 遍历子组件的顺序。这里感到有些疑惑。

希望有熟悉 vue.js 或者 mint-ui 的同学可以帮忙解释一下，不胜感激！

Answer 1

关于 $children 并不保证顺序

vue 实例的 $children 属性始终按照创建时的先后顺序来保存子组件实例，而不是子组件实例在整个组件树中的顺序。

如果子组件实例在创建完成后，没有因为数据的变化而改变在组件树中的位置，那么它在 $children 中的顺序可以反应它在组件树中的顺序。

如果子组件实例因为数据变化而改变了在组件树中的顺序，那么这种改变是不会反应在 $children 中的，因为 $children 始终按照创建的先后顺序保存子组件实例。

关于 mint-ui 的 swipe 组件

swipe 组件实现的是轮播图效果，如果用来生成轮播项的数据的顺序不会发生改变，新增的轮播项数据是从尾部追加的，那么在这种情况下，$children 完全可以正确的反应子组件实例在组件树中的真实顺序。