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()？如果沒有，是否有其他方法可以保證它們按照正確的順序添加到我的數組中？

來源

2017-08-14 abagshaw

視組件的複雜程度而定，不能保證。你爲什麼要運行'$ parent.addElement'？你的組件已經是這個組件的一個子組件。你想要做的是將元素順序與特定的執行或函數進行匹配，對吧？我建議使用不同的真相來源，例如您要迭代的數組來創建子組件，而不是渲染順序。 –

不幸的是，從數組創建''組件是不可行的，因爲它們將在我的實際用例中定義，其中包含大量的HTML（通過''呈現）並將所有HTML放入數組中的字符串將是一個真正的混亂。 – abagshaw

你能提供一個更接近你的實際用例的代碼示例嗎？ –

根據我對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 
     } 
    } 
    }

來源

2017-10-01 07:30:47 Ardhi

VueJS是否保證以正確的順序調用mounted（）？

回答

相關問題