❌

阅读视图

发现新文章，点击刷新页面。

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

✇掘金 前端
什么时候吃饭

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
代码示例：见销毁父组件的代码
❌