_island Record

Appearance

父子组件顺序 ​

  • 父组件created
  • 父组件beforeMount
  • 子组件created
  • 子组件beforeMount
  • 子组件mounted
  • 父组件mounted

数据更新 ​

当父子组件共用一个数据（props）时，更新顺序是

  • 父组件beforeUpdate
  • 子组件beforeUpdate
  • 父组件updated
  • 子组件updated

兄弟组件挂载顺序 ​

vue
<template>
  <div id="app">
    <HelloWorld ref="helloWorldRef" :info="info" />
    <Foo />
  </div>
</template>

挂载顺序为

  • 父组件created
  • 父组件beforeMount
  • 子组件created
  • 子组件beforeMount
  • Foo组件created
  • Foo组件beforeMount
  • 子组件mounted
  • Foo组件mounted
  • 父组件mounted

在挂载父组件之前，会将所有子组件根据放置的顺序进行初始化，之后再一次性按顺序挂载子组件，最后父组件再挂载完成

另外，onMounted这个钩子很特殊，从打印顺序看是全部子组件初始化之后再批量挂载的

在实际上，每个子组件已经是挂载好了，只是mounted钩子执行时机的问题

onLine Demo