Vue.js请注意，mount不保证所有子组件也已安装？

Question

有人可以从VUE doc https://vuejs.org/v2/api/#mounted解释下面的通知吗？

请注意，已安装并不保证所有子组件也已安装。

我已经测试了挂载子节点和子节点，但它们总是在root / app组件之前安装，所以使用“mount”安全无需$ nextTick来访问DOM。子项和子项组件可以从root / app模板访问DOM元素，尽管它是在子项之后安装的。另一方面，root / app也可以访问子模板中的DOM元素。考虑这个例子......

<div id="app">
  {{ message }}
  <child></child>
  <span id="root"></span>
</div>

<script type="text/javascript">
  var subchild = {
    template: `<div>SUBCHILD<span id="subchild"></span></div>`,
    mounted() {
      console.log("Mounted SUBCHILD", document.getElementById('root'));
    }
  };

  var child = {
    template: `<div>CHILD<span id="child"></span><subchild></subchild></div>`,
    components : { subchild },
    mounted() {
      console.log("Mounted CHILD", document.getElementById('root'));
    }
  };

  var app = new Vue({
    el: '#app',
    components : { child },
    data() {
      return { message: 'APP' };
    },
    mounted() {
      console.log("Mounted APP", document.getElementById('root'), document.getElementById('child'), document.getElementById('subchild'));
    }

  })
</script>

https://jsfiddle.net/ecobyxrn/

控制台输出......

已安装的SUBCHILD [对象HTMLSpan ...] [对象HTMLSpan ...] [对象HTMLSpan ...]

已安装的CHILD [对象HTMLSpan ...] [对象HTMLSpan ...] [对象HTMLSpan ...]

已安装APP [对象HTMLSpan ...] [对象HTMLSpan ...] [对象HTMLSpan ...]

所以在我的情况下，我不明白VUE的注意事项。有人可以显示以后安装子项的用例，然后是root / app吗？我认为VUE doc非常差，并没有很好地解释它。我也尝试通过注释el: '#app' +添加setTimeout(function() { app.$mount('#app'); }, 2000);延迟挂载root / app但结果是一样的。

另外看到这张图片...

图像来源：https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f

在源页面，有人发表评论警告图像作者关于提到的VUE通知但不解释它。似乎每个人都知道这个通知，但没有人解释它。

Answer 1

正如@RandyCasburn所提到的，组件可以异步加载。 components对象的每个属性都可以给定一个组件定义对象，或者最终用组件定义对象解析的Promise。因此，在这些情况下，可能是在异步加载的子项完成加载之前调用父组件的mounted钩子。

作为对此的简单测试，您可以在延迟后更改基本组件的component对象以加载child组件：

components: {
  child: () => new Promise((resolve) => {
    setTimeout(() => {
      resolve(child)
    }, 2000)
  }) 
}

你会看到mounted钩子中对子组件的引用在它发射时是null。

Vue文档没有提到这是他们警告的情景的潜在原因似乎没有用。而且，除了使用异步组件之外，我还想不到另一种情况，即当父级的mounted挂钩被触发时，不会挂载子组件。

---

这是使用您的代码的完整示例：

Vue.config.productionTip = false

var subchild = {
  template: `<div>SUBCHILD<span id="subchild"></span></div>`,
  mounted() {
    console.log("Mounted SUBCHILD", document.getElementById('root'), document.getElementById('child'), document.getElementById('subchild'));
  }
};

var child = {
  template: `<div>CHILD<span id="child"></span><subchild></subchild></div>`,
  components : { subchild: () => new Promise((resolve) => {
    setTimeout(() => {
      resolve(subchild)
    }, 2000)
  }) },
  mounted() {
    console.log("Mounted CHILD", document.getElementById('root'), document.getElementById('child'), document.getElementById('subchild'));
  }
};

var app = new Vue({
  el: '#app',
  components : { child: () => new Promise((resolve) => {
    setTimeout(() => {
      resolve(child)
    }, 2000)
  }) },
  data() {
    return { message: 'APP' };
  },
  mounted() {
    console.log("Mounted APP", document.getElementById('root'), document.getElementById('child'), document.getElementById('subchild'));
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ message }}
  <child ref="child"></child>
  <span id="root"></span>
</div>