vue父子组件生命周期执行顺序

在Vue中，每个组件都有自己的生命周期，包括创建、更新和销毁等。当组件嵌套时，父子组件的生命周期会有一定的执行顺序。

父子组件的生命周期关系

在Vue中，父组件和子组件之间的生命周期是有联系的。父组件和子组件的生命周期钩子函数执行顺序如下：

1. 父组件beforeCreate
2. 父组件created
3. 父组件beforeMount
4. 子组件beforeCreate
5. 子组件created
6. 子组件beforeMount
7. 子组件mounted
8. 父组件mounted

这就意味着，在渲染子组件之前，父组件的生命周期钩子函数将被全部执行完毕。接着，子组件的生命周期钩子函数将被依次执行，最后才会执行父组件的mounted钩子函数。

父子组件生命周期代码示例

下面是一个简单的代码示例，以说明父子组件生命周期的执行顺序。

html复制代码
<template>
  <div>
    <h2>父组件</h2>
    <p>父组件数据: {{parentData}}</p>
    <hr>
    <child :child-data="parentData"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  data() {
    return {
      parentData: '父组件数据'
    }
  },
  components: {
    Child
  },
  beforeCreate() {
    console.log('父组件beforeCreate')
  },
  created() {
    console.log('父组件created')
  },
  beforeMount() {
    console.log('父组件beforeMount')
  },
  mounted() {
    console.log('父组件mounted')
  },
}
</script>

html复制代码
<template>
  <div>
    <h3>子组件</h3>
    <p>子组件数据: {{childData}}</p>
    <hr>
  </div>
</template>

<script>
export default {
  props: ['childData'],
  beforeCreate() {
    console.log('子组件beforeCreate')
  },
  created() {
    console.log('子组件created')
  },
  beforeMount() {
    console.log('子组件beforeMount')
  },
  mounted() {
    console.log('子组件mounted')
  },
}
</script>

在浏览器控制台中打印出的生命周期钩子函数执行顺序为：

复制代码
父组件beforeCreate
父组件created
父组件beforeMount
子组件beforeCreate
子组件created
子组件beforeMount
子组件mounted
父组件mounted

总结

了解Vue父子组件生命周期执行顺序，有助于我们更好地管理组件之间的关系，确保应用程序的正确性和稳定性。在实际开发中，我们需要根据实际情况合理地使用生命周期钩子函数，以达到最佳的性能和开发效率。