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

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

VueJS是否保证以正确的顺序调用mounted（）？

1 个答案: