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

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

在 Vue 中，组件的生命周期是指组件从创建到销毁之间的一系列事件。这些事件可以帮助我们理解组件的状态变化，并且可以在合适的时机进行一些操作。

###1.父组件首先，我们来看一下父组件的生命周期：

javascript// 父组件<template>
 <div>
 <!-- 子组件 -->
 <child-component></child-component>
 </div>
</template>

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

export default {
 name: 'ParentComponent',
 components: { ChildComponent },
 mounted() {
 console.log('父组件mounted')
 },
 updated() {
 console.log('父组件updated')
 }
}
</script>

在上面的代码中，我们可以看到父组件有两个生命周期函数：`mounted()` 和 `updated()`。

###2.子组件接下来，我们来看一下子组件的生命周期：

javascript// 子组件<template>
 <div>
 <!-- 父组件传递过来的数据 -->
 {{ data }}
 </div>
</template>

<script>
export default {
 name: 'ChildComponent',
 props: ['data'],
 mounted() {
 console.log('子组件mounted')
 },
 updated() {
 console.log('子组件updated')
 }
}
</script>

在上面的代码中，我们可以看到子组件也有两个生命周期函数：`mounted()` 和 `updated()`。

###3.父子组件生命周期执行顺序现在，我们来看一下父子组件的生命周期执行顺序：

1. 父组件创建时，会先执行 `mounted()` 函数。
2. 子组件创建时，会先执行 `mounted()` 函数。
3. 当父组件更新时，会先执行 `updated()` 函数，然后再执行子组件的 `updated()` 函数。

###4.示例代码下面是一个完整的示例代码：

javascript// 父组件<template>
 <div>
 <!-- 子组件 -->
 <child-component :data="data"></child-component>
 </div>
</template>

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

export default {
 name: 'ParentComponent',
 components: { ChildComponent },
 data() {
 return {
 data: 'Hello, World!'
 }
 },
 mounted() {
 console.log('父组件mounted')
 },
 updated() {
 console.log('父组件updated')
 }
}
</script>

javascript// 子组件<template>
 <div>
 <!-- 父组件传递过来的数据 -->
 {{ data }}
 </div>
</template>

<script>
export default {
 name: 'ChildComponent',
 props: ['data'],
 mounted() {
 console.log('子组件mounted')
 },
 updated() {
 console.log('子组件updated')
 }
}
</script>

在上面的示例代码中，我们可以看到父组件和子组件的生命周期函数都是按照预期执行的。

###5.总结通过以上的分析，我们可以看出 Vue 的父子组件生命周期执行顺序是非常有规律的。父组件创建时会先执行 `mounted()` 函数，然后再执行子组件的 `mounted()` 函数。当父组件更新时，会先执行 `updated()` 函数，然后再执行子组件的 `updated()` 函数。

这种生命周期执行顺序可以帮助我们更好地理解 Vue 的组件状态变化，并且可以在合适的时机进行一些操作。