VueJSは、正しい順序でmounted（）を呼び出すことが保証されていますか？

Question

のは、次のように私はVueJSとの基本的なページを持っているとしましょう：出力の

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は常に、コンポーネントに表示される順序でmounted()を実行しますか？そうでない場合は、正しい順序で配列に追加されることを保証する別の方法がありますか？

Answer 1

私の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 
     } 
    } 
    }