VueJS是否保证以正确的顺序调用mounted（）？
问题描述：
比方说，我有一个VueJS基本页面如下：VueJS是否保证以正确的顺序调用mounted（）？
Vue.component('child', {
template: '<p>Placed at index {{index}}</p>',
data() {
return {
index: 0
}
},
mounted() {
this.index = this.$parent.addElement(this);
}
});
new Vue({
el: '#theParent',
data() {
return {
allElements: []
}
},
methods: {
addElement(elem) {
this.allElements.push(elem);
return this.allElements.length - 1;
}
}
});<script src="https://cdn.jsdelivr.net/vue/2.3.2/vue.min.js"></script>
<div id="theParent">
<child></child>
<child></child>
<child></child>
</div>输出的目的，仅仅是在什么指数的元素已被插入来说明。我的用例要求按照它们出现在HTML中的顺序添加元素。每次运行这个页面时，看起来确实发生了这种情况，因为输出是按顺序进行的。
我的问题是：这种行为保证总会发生 - VueJS会按照它们在HTML中出现的顺序始终执行mounted()？如果没有，是否有其他方法可以保证它们按照正确的顺序添加到我的数组中？
答
根据我对Vue和Ag-Grid扩展的经验，事实并非总是如此。
为了确保它按正确的顺序加载，我实现了watch函数让Vue知道DOM已准备就绪。
即使有beforeMount或created也无法帮助，如果DOM元素以某种方式延迟触发。
computed: {
elementWatcher() {
return this.whateverDOMElement // after this child is ready
}
}
watch: {
elementWatcher (val) {
if (val) {
this.mountAnother() // parent can be mounted
}
}
}
视组件的复杂程度而定，不能保证。 你为什么要运行'$ parent.addElement'？你的组件已经是这个组件的一个子组件。 你想要做的是将元素顺序与特定的执行或函数进行匹配，对吧？我建议使用不同的真相来源，例如您要迭代的数组来创建子组件，而不是渲染顺序。 –
不幸的是，从数组创建''组件是不可行的，因为它们将在我的实际用例中定义，其中包含大量的HTML（通过'
你能提供一个更接近你的实际用例的代码示例吗？ –