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()按照组件在 HTML 中出现的顺序执行？如果没有，是否有其他方法可以保证它们以正确的顺序添加到我的数组中？

Answer 1

根据我使用 Vue 和 Ag-Grid 扩展的经验，情况并非总是如此。

为了确保它以正确的顺序加载，我实现了watch让 Vue 知道 DOM 已准备就绪的函数。

如果 DOM 元素以某种方式延迟触发，即使使用beforeMount或 也无济于事。created

  computed: {
    elementWatcher () {
      return this.whateverDOMElement // after this child is ready
    }
  }

  watch: {
    elementWatcher (val) {
      if (val) {
        this.mountAnother() // parent can be mounted
      }
    }
  }