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
​
代码示例：见销毁父组件的代码
相关推荐
天若有情6731 天前
XiangJsonCraft v1.2.0重大更新解读：本地配置优先+全量容错，JSON解耦开发体验再升级
前端·javascript·npm·json·xiangjsoncraft
2501_944525541 天前
Flutter for OpenHarmony 个人理财管理App实战 - 预算详情页面
android·开发语言·前端·javascript·flutter·ecmascript
打小就很皮...1 天前
《在 React/Vue 项目中引入 Supademo 实现交互式新手指引》
前端·supademo·新手指引
C澒1 天前
系统初始化成功率下降排查实践
前端·安全·运维开发
C澒1 天前
面单打印服务的监控检查事项
前端·后端·安全·运维开发·交通物流
pas1361 天前
39-mini-vue 实现解析 text 功能
前端·javascript·vue.js
qq_532453531 天前
使用 GaussianSplats3D 在 Vue 3 中构建交互式 3D 高斯点云查看器
前端·vue.js·3d
Swift社区1 天前
Flutter 路由系统，对比 RN / Web / iOS 有什么本质不同？
前端·flutter·ios
雾眠气泡水@1 天前
前端：解决同一张图片由于页面大小不统一导致图片模糊
前端
开发者小天1 天前
python中计算平均值
开发语言·前端·python
热门推荐
01GitHub 镜像站点02Clawdbot 中文汉化版 接入微信、飞书03OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)042026美赛A题智能手机电池续航时间预测的连续时间数学模型052025 年大语言模型发展回顾：关键突破、意外转折与 2026 年展望06【Milvus】向量数据库pymilvus使用教程072026数学建模美赛题目特点与选题建议，常用四大模型汇总08Claude Code Skills 实用使用手册09一种新的LCA算法10Linux下V2Ray安装配置指南