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
​
代码示例：见销毁父组件的代码
相关推荐
2501_940943912 小时前
体系课\ Python Web全栈工程师
开发语言·前端·python
q***06472 小时前
SpringSecurity相关jar包的介绍
android·前端·后端
低保和光头哪个先来2 小时前
场景2：Vue Router 中 query 与 params 的区别
前端·javascript·vue.js·前端框架
q***95222 小时前
SpringMVC 请求参数接收
前端·javascript·算法
|晴 天|2 小时前
Vite 为何能取代 Webpack？新一代构建工具的崛起
前端·webpack·node.js
带只拖鞋去流浪2 小时前
迎接2026，重新认识Webpack5
前端·webpack
HIT_Weston2 小时前
43、【Ubuntu】【Gitlab】拉出内网 Web 服务：静态&动态服务
前端·ubuntu·gitlab
LucidX2 小时前
Web——反向代理、负载均衡与 Tomcat 实战部署
前端·tomcat·负载均衡
hhcccchh3 小时前
学习vue第七天 从单页面应用（SPA）进化为后台管理系统架构
vue.js·学习·系统架构
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南08Labelme从安装到标注：零基础完整指南09全球最强模型Grok4，国内已可免费使用！（附教程）10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）