登录
vue2、vue3父子组件嵌套生命周期执行顺序
2025年11月27日 12:39
vue2版本
生命周期：
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed activated deactivated
1. 组件挂载阶段（Mounting）
执行顺序：
// 创建和挂载过程
父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted
父组件 mounted
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent />
</div>
</template>
<script>
import ChildComponent from './Child.vue'
export default {
name: 'Parent',
components: { ChildComponent },
beforeCreate() {
console.log('1. 父组件 beforeCreate')
},
created() {
console.log('2. 父组件 created')
},
beforeMount() {
console.log('3. 父组件 beforeMount')
},
mounted() {
console.log('6. 父组件 mounted')
}
}
</script>
<!-- Child.vue -->
<template>
<div>
<h3>子组件</h3>
</div>
</template>
<script>
export default {
name: 'Child',
beforeCreate() {
console.log('4. 子组件 beforeCreate')
},
created() {
console.log('4.1 子组件 created')
},
beforeMount() {
console.log('4.2 子组件 beforeMount')
},
mounted() {
console.log('5. 子组件 mounted')
}
}
</script>
2. 组件更新阶段（Updating）
总结：
vue2中，只要子组件使用了，父组件传入的值，当该值更新时，子组件的更新生命周期就会执行，其他情况，子组件的更新生命周期都不会执行
更新父组件--子组件使用了，父组件传入的参数
执行顺序：
// 更新过程（数据变化时）
父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件 - {{ parentData }}</h2>
<button @click="changeData">改变数据</button>
<ChildComponent :childData="parentData" />
</div>
</template>
<script>
import ChildComponent from './Child.vue'
export default {
components: { ChildComponent },
data() {
return {
parentData: '初始值'
}
},
methods: {
changeData() {
this.parentData = '新值'
}
},
beforeUpdate() {
console.log('1. 父组件 beforeUpdate')
},
updated() {
console.log('4. 父组件 updated')
}
}
</script>
<!-- Child.vue -->
<template>
<div>
<h3>子组件 - {{ childData }}</h3>
</div>
</template>
<script>
export default {
props: ['childData'],
beforeUpdate() {
console.log('2. 子组件 beforeUpdate')
},
updated() {
console.log('3. 子组件 updated')
}
}
</script>
更新父组件--子组件没有使用，父组件传入的参数（即使有传入值给子组件）
执行顺序：
// 更新过程（数据变化时）
父组件 beforeUpdate
父组件 updated
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件 - {{ parentData }}</h2>
<button @click="changeData">改变数据</button>
<ChildComponent :childData="parentData" />
<!-- <ChildComponent :childData="parentData" /> -->
</div>
</template>
<script>
import ChildComponent from '@/components/two/Child.vue'
export default {
components: { ChildComponent },
data() {
return {
parentData: '初始值'
}
},
methods: {
changeData() {
this.parentData = '新值'
}
},
beforeUpdate() {
console.log('1. 父组件 beforeUpdate')
},
updated() {
console.log('4. 父组件 updated')
}
}
</script>
<!-- Child.vue -->
<template>
<div>
<!-- <h3>子组件 - {{ childData }}</h3> -->
<h3>子组件</h3>
</div>
</template>
<script>
export default {
props: ['childData'],
beforeUpdate() {
console.log('2. 子组件 beforeUpdate')
},
updated() {
console.log('3. 子组件 updated')
}
}
</script>
更新子组件
执行顺序：
// 更新过程（数据变化时）
子组件 beforeUpdate
子组件 updated
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件 - {{ parentData }}</h2>
<button @click="changeData">改变数据</button>
<ChildComponent/>
</div>
</template>
<script>
import ChildComponent from '@/components/two/Child.vue'
export default {
components: { ChildComponent },
data() {
return {
parentData: '初始值'
}
},
methods: {
changeData() {
this.parentData = '新值'
}
},
beforeUpdate() {
console.log('1. 父组件 beforeUpdate')
},
updated() {
console.log('4. 父组件 updated')
}
}
</script>
<!-- Child.vue -->
<template>
<div style="border: 1px solid #ccc; padding: 10px; margin: 10px;">
<h2>Child Component - {{ childMessage }}</h2>
<button @click="changeChildData">改变子组件数据</button>
<p>计数: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
childMessage: '子组件初始数据',
count: 0
}
},
methods: {
changeChildData() {
this.childMessage = '子组件数据已更新'
this.count++
console.log('=== 子组件数据变化触发 ===')
}
},
beforeUpdate() { console.log('Child beforeUpdate') },
updated() { console.log('Child updated') },
}
</script>
3. 组件销毁阶段（Destroying）
销毁父组件
执行顺序：
// 销毁过程
父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destroyed
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent v-if="showChild" />
<button @click="showChild = false">销毁子组件</button>
</div>
</template>
<script>
import ChildComponent from '@/components/two/Child.vue'
export default {
components: { ChildComponent },
data() {
return {
showChild: true
}
},
beforeDestroy() {
console.log('父组件 beforeDestroy')
},
destroyed() {
console.log('父组件 destroyed')
}
}
</script>
销毁子组件
执行顺序：
// 销毁过程
子组件 beforeDestroy
子组件 destroyed
代码示例：见销毁父组件的代码
vue3版本
生命周期：
setup（）替代 beforeCreate setup（）替代 created onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted onActivated onDeactivated onRenderTracked（新增） onRenderTriggered（新增）
1. 组件挂载阶段（Mounting）
执行顺序：
1. 父组件 setup (相当于 beforeCreate + created)
2. 父组件 onBeforeMount
3. 子组件 setup
3.1 子组件 onBeforeMount
4. 子组件 onMounted
5. 父组件 onMounted
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent />
</div>
</template>
<script setup>
import { onBeforeMount, onMounted } from 'vue'
import ChildComponent from '../Son/s1.vue'
console.log('1. 父组件 setup (相当于 beforeCreate + created)')
onBeforeMount(() => {
console.log('2. 父组件 onBeforeMount')
})
onMounted(() => {
console.log('5. 父组件 onMounted')
})
</script>
<!-- Child.vue -->
<template>
<div>
<h3>子组件</h3>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted } from 'vue'
console.log('3. 子组件 setup')
onBeforeMount(() => {
console.log('3.1 子组件 onBeforeMount')
})
onMounted(() => {
console.log('4. 子组件 onMounted')
})
</script>
2. 组件更新阶段（Updating）
总结：
vue3中，只要父组件往子组件传入了值，当该值更新时，子组件的更新生命周期就会执行，其他情况，子组件的更新生命周期都不会执行
更新父组件--子组件使用了，父组件传入的参数
执行顺序：
// 更新过程（数据变化时）
父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件 - {{ parentData }}</h2>
<button @click="changeData">改变数据</button>
<ChildComponent :childData="parentData" />
</div>
</template>
<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
import ChildComponent from '../Son/s1.vue'
const parentData = ref('初始值')
const changeData = () => {
parentData.value = '新值'
}
onBeforeUpdate(() => {
console.log('1. 父组件 onBeforeUpdate')
})
onUpdated(() => {
console.log('4. 父组件 onUpdated')
})
</script>
<!-- Child.vue -->
<template>
<div>
<h3>子组件 - {{ props.childData }}</h3>
</div>
</template>
<script setup>
import { onBeforeUpdate, onUpdated, defineProps } from 'vue'
const props = defineProps(['childData'])
onBeforeUpdate(() => {
console.log('2. 子组件 onBeforeUpdate')
})
onUpdated(() => {
console.log('3. 子组件 onUpdated')
})
</script>
更新父组件--父组件传值给子组件，即使子组件没有使用 和 定义对应的属性
如果父组件没有传值给子组件，即使子组件定义 和 使用了值，当父组件更新时，子组件也不会更新，即：生命周期是：
父组件 beforeUpdate->父组件 updated
执行顺序：
// 更新过程（数据变化时）
父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件 - {{ parentData }}</h2>
<button @click="changeData">改变数据</button>
<ChildComponent :childData="parentData" />
<!-- <ChildComponent /> -->
</div>
</template>
<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
import ChildComponent from '../Son/s1.vue'
const parentData = ref('初始值')
const changeData = () => {
parentData.value = '新值'
}
onBeforeUpdate(() => {
console.log('1. 父组件 onBeforeUpdate')
})
onUpdated(() => {
console.log('4. 父组件 onUpdated')
})
</script>
<!-- Child.vue -->
<template>
<div>
<h3>子组件</h3>
<!-- <h3>子组件 - {{ props.childData }}</h3> -->
</div>
</template>
<script setup>
import { onBeforeUpdate, onUpdated, defineProps } from 'vue'
// const props = defineProps(['childData'])
onBeforeUpdate(() => {
console.log('2. 子组件 onBeforeUpdate')
})
onUpdated(() => {
console.log('3. 子组件 onUpdated')
})
</script>
更新子组件
执行顺序：
// 更新过程（数据变化时）
子组件 beforeUpdate
子组件 updated
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件</h2>
<!-- <h2>父组件 - {{ parentData }}</h2> -->
<!-- <button @click="changeData">改变数据</button> -->
<ChildComponent :childData="parentData" />
<!-- <ChildComponent /> -->
</div>
</template>
<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
import ChildComponent from '../Son/s1.vue'
const parentData = ref('初始值')
const changeData = () => {
parentData.value = '新值'
}
onBeforeUpdate(() => {
console.log('1. 父组件 onBeforeUpdate')
})
onUpdated(() => {
console.log('4. 父组件 onUpdated')
})
</script>
<!-- Child.vue -->
<template>
<div>
<!-- <h3>子组件</h3> -->
<h2>子组件 - {{ sonData }}</h2>
<button @click="changeData">改变数据</button>
</div>
</template>
<script setup>
import { onBeforeUpdate, onUpdated,ref, defineProps } from 'vue'
// const props = defineProps(['childData'])
const sonData = ref('初始值')
const changeData = () => {
sonData.value = '新值'
}
onBeforeUpdate(() => {
console.log('2. 子组件 onBeforeUpdate')
})
onUpdated(() => {
console.log('3. 子组件 onUpdated')
})
</script>
3. 组件销毁阶段（Destroying）
销毁父组件
执行顺序：
// 销毁过程
父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destroyed
代码示例：
<!-- Parent.vue -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent v-if="showChild" />
<button @click="showChild = false">卸载子组件</button>
</div>
</template>
<script setup>
import { ref, onBeforeUnmount, onUnmounted } from 'vue'
import ChildComponent from '../Son/s1.vue'
const showChild = ref(true)
onBeforeUnmount(() => {
console.log('父组件 onBeforeUnmount')
})
onUnmounted(() => {
console.log('父组件 onUnmounted')
})
</script>
<!-- Child.vue -->
<template>
<div>
<!-- <h3>子组件</h3> -->
<h2>子组件</h2>
</div>
</template>
<script setup>
import { onBeforeUnmount, onUnmounted,ref, defineProps } from 'vue'
onBeforeUnmount(() => {
console.log('子组件 onBeforeUnmount')
})
onUnmounted(() => {
console.log('子父组件 onUnmounted')
})
</script>
销毁子组件
执行顺序：
// 销毁过程
子组件 beforeDestroy
子组件 destroyed
