vue2、vue3父子组件嵌套生命周期执行顺序

什么时候吃饭2025-11-27 13:47

vue2版本

生命周期：

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed activated deactivated

1. 组件挂载阶段（Mounting）

执行顺序：

arduino 复制代码 
​
// 创建和挂载过程
​
父组件 beforeCreate
​
父组件 created
​
父组件 beforeMount
​
  子组件 beforeCreate
​
  子组件 created
​
  子组件 beforeMount
​
  子组件 mounted
​
父组件 mounted

代码示例：

xml 复制代码 
<!-- 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中，只要子组件使用了，父组件传入的值，当该值更新时，子组件的更新生命周期就会执行，其他情况，子组件的更新生命周期都不会执行

更新父组件--子组件使用了，父组件传入的参数

执行顺序：
arduino 复制代码 
// 更新过程（数据变化时）
​
父组件 beforeUpdate
​
  子组件 beforeUpdate
​
  子组件 updated
​
父组件 updated
代码示例：
xml 复制代码 
<!-- 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>

更新父组件--子组件没有使用，父组件传入的参数（即使有传入值给子组件）

执行顺序：
arduino 复制代码 
// 更新过程（数据变化时）
​
父组件 beforeUpdate
​
父组件 updated
代码示例：
xml 复制代码 
<!-- 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>
​
​

更新子组件

执行顺序：
arduino 复制代码 
// 更新过程（数据变化时）
​
子组件 beforeUpdate
​
子组件 updated
代码示例：
xml 复制代码 
<!-- 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）

销毁父组件

执行顺序：
arduino 复制代码 
// 销毁过程
​
父组件 beforeDestroy
​
  子组件 beforeDestroy
​
  子组件 destroyed
​
父组件 destroyed
代码示例：
xml 复制代码 
<!-- 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>
​

销毁子组件

执行顺序：
arduino 复制代码 
// 销毁过程
​
 子组件 beforeDestroy
​
 子组件 destroyed
​
代码示例：见销毁父组件的代码

vue3版本

生命周期：

setup（）替代 beforeCreate setup（）替代 created onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted onActivated onDeactivated onRenderTracked（新增） onRenderTriggered（新增）

1. 组件挂载阶段（Mounting）

执行顺序：

markdown 复制代码 
1. 父组件 setup (相当于 beforeCreate + created)
2. 父组件 onBeforeMount
    3. 子组件 setup
    3.1 子组件 onBeforeMount
    4. 子组件 onMounted
5. 父组件 onMounted

代码示例：

xml 复制代码 
<!-- 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中，只要父组件往子组件传入了值，当该值更新时，子组件的更新生命周期就会执行，其他情况，子组件的更新生命周期都不会执行

更新父组件--子组件使用了，父组件传入的参数

执行顺序：
arduino 复制代码 
// 更新过程（数据变化时）
​
父组件 beforeUpdate
​
  子组件 beforeUpdate
​
  子组件 updated
​
父组件 updated
代码示例：
xml 复制代码 
<!-- 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

执行顺序：
arduino 复制代码 
// 更新过程（数据变化时）
​
父组件 beforeUpdate
​
  子组件 beforeUpdate
​
  子组件 updated
​
父组件 updated
代码示例：
xml 复制代码 
<!-- 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>
​

更新子组件

执行顺序：
arduino 复制代码 
// 更新过程（数据变化时）
​
子组件 beforeUpdate
​
子组件 updated
代码示例：
xml 复制代码 
<!-- 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）

销毁父组件

执行顺序：
arduino 复制代码 
// 销毁过程
​
父组件 beforeDestroy
​
  子组件 beforeDestroy
​
  子组件 destroyed
​
父组件 destroyed
代码示例：
xml 复制代码 
<!-- 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>
​

销毁子组件

执行顺序：
arduino 复制代码 
// 销毁过程
​
 子组件 beforeDestroy
​
 子组件 destroyed
​
代码示例：见销毁父组件的代码
相关推荐
kyriewen5 小时前
面试官让我用 AI 重构一个 8 年陈的 React 组件——他说他不看代码，只看我会不会拆
前端·javascript·面试
计算机魔术师5 小时前
700吉瓦「幽灵用电」：美国AI数据中心的抢电闹剧正在失控
前端
IT_陈寒5 小时前
JavaScript数组排序踩的坑，差点让我加班到凌晨
前端·人工智能·后端
风骏时光牛马5 小时前
提示词工程：大模型交互的核心构建艺术
前端
今日无bug6 小时前
大模型的回答是怎么一个字一个字蹦出来的？前端流式输出解析
前端·llm·agent
计算机魔术师6 小时前
Anthropic 复盘 Claude 模型越权访问真实系统事件并改进对齐与安全措施
前端
掘金者阿豪6 小时前
Seedance 2.0/2.5 虚拟素材能跨 Key 共用吗？一次讲清 Asset ID、账号隔离与 SaaS 素材架构
前端·后端
用户50093768390396 小时前
热敏小票 Web 打印：我在 58/80mm 上折腾的两周
前端·vue.js
XGM7 小时前
一个前端新手的"顿悟"时刻：DOM树、渲染原理和JS动态渲染
前端
东方小月7 小时前
一篇文章带你深入拆解Skill的本质与工程实现，让你不再滥用Skill
前端·人工智能·后端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05ZCode 周末送额度活动开启：3 亿 Token 免费领取06历年考研数学一、数学二、数学三真题试卷及答案PDF07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10VSCode+CodeX扩展，无法启动