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（）？

回答

相关问题