子组件和父组件生命周期执行顺序是什么

在Vue.js中，父子组件的生命周期钩子函数的执行顺序如下：

父组件生命周期钩子：

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed

子组件生命周期钩子：

与父组件相同，只是它们会在父组件相应的生命周期钩子内部被调用。

执行顺序：

1. 父组件的beforeCreate

2. 父组件的created

3. 父组件的beforeMount

4. 子组件的beforeCreate

5. 子组件的created

6. 子组件的beforeMount

7. 子组件的mounted （子组件挂载完成）

8. 父组件的mounted （父组件挂载完成）

9. 如果数据更新，会触发更新钩子：

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

10. 当组件销毁时，会触发销毁钩子：

    • 父组件的beforeDestroy
    • 子组件的beforeDestroy
    • 子组件的destroyed
    • 父组件的destroyed

以下是Vue组件生命周期的一个简单示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  mounted() {
    console.log('Parent component is mounted');
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    Child Content
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  mounted() {
    console.log('Child component is mounted');
  }
}
</script>

在这个例子中，当你使用ParentComponent时，控制台首先会打印出"Child component is mounted"，然后是"Parent component is mounted"。

因此，子组件的mounted钩子函数会在父组件的mounted钩子函数之前执行。这是因为Vue.js在渲染组件时是先从父组件开始，然后递归地渲染子组件。一旦子组件渲染完成并挂载到DOM上，它的mounted钩子就会执行，随后才是父组件的mounted钩子执行。

总结来说，创建时，父组件先开始创建，然后是子组件；挂载时，子组件先挂载，然后是父组件；更新和销毁时，父组件先开始，然后是子组件。记住，子组件的生命周期钩子是在父组件的相应钩子内部被调用的。