生命周期

概念

Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中 Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子

规律

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

Vue2	Vue3
beforeCreate	setup	创建前
created	setup	创建完毕
beforeMount	onBeforeMount	挂载前
mounted	onMounted	挂载完毕
beforeUpdate	onBeforeUpdate	更新前
updated	onUpdated	更新完毕
beforeDestroy	onBeforeUnmount	Vue2销毁前 / Vue3卸载前
destroyed	onUnmounted	Vue2销毁完毕 / Vue3卸载完毕

在 onMounted 获取DOM元素，或通过nextTick

Vue2

Vue2的生命周期

创建阶段：beforeCreate、created

挂载阶段：beforeMount、mounted

更新阶段：beforeUpdate、updated

销毁阶段：beforeDestroy、destroyed

1<template>
2  <div>
3    <Child v-if="isShow" />
4    <button @click="changeChild">销毁子组件</button>
5  </div>
6</template>
7
8<script>
9import Child from "./components/Child.vue";
10export default {
11  name: "ParentComp",
12  components: {
13    Child,
14  },
15  data() {
16    return {
17      isShow: true
18    }
19  },
20  methods: {
21    changeChild() {
22      this.isShow = !this.isShow
23    }
24  },
25  beforeCreate() {
26    console.log("父组件-创建前");
27  },
28  created() {
29    console.log("父组件-创建完毕");
30  },
31  beforeMount() {
32    console.log("父组件-挂载前");
33  },
34  mounted() {
35    console.log("父组件-挂载完毕");
36  },
37  beforeUpdate() {
38    console.log("父组件-更新前");
39  },
40  updated() {
41    console.log("父组件-更新完毕");
42  },
43  beforeDestroy() {
44    console.log("父组件-销毁前");
45  },
46  destroyed() {
47    console.log("父组件-销毁完毕");
48  }
49};
50</script>

1<template>
2    <div>{{ name }}</div>
3</template>
4<script>
5export default {
6    name: 'ChildComp',
7    data() {
8        return {
9            name: 'MyChild'
10        }
11    },
12    beforeCreate() {
13        console.log("子组件-创建前");
14    },
15    created() {
16        console.log("子组件-创建完毕");
17    },
18    beforeMount() {
19        console.log("子组件-挂载前");
20    },
21    mounted() {
22        console.log("子组件-挂载完毕");
23    },
24    beforeUpdate() {
25        console.log("子组件-更新前");
26    },
27    updated() {
28        console.log("子组件-更新完毕");
29    },
30    beforeDestroy() {
31        console.log("子组件-销毁前");
32    },
33    destroyed() {
34        console.log("子组件-销毁完毕");
35    }
36}
37</script>

:::

Vue3

Vue3的生命周期

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

1<template>
2  <h2>父组件</h2>
3  <hr/>
4  <child-comp v-if="isShow"/>
5  <button @click="changeChild">销毁子组件</button>
6</template>
7
8<script lang="ts" name="ParentComp" setup>
9import ChildComp from "@/components/ChildComp.vue";
10import {ref, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated} from "vue";
11
12let isShow = ref(true)
13
14function changeChild() {
15  isShow.value = !isShow.value
16}
17
18console.log('父组件-setup')
19onBeforeMount(() => {
20  console.log('父组件-挂载前')
21})
22onMounted(() => {
23  console.log('父组件-挂载完毕')
24})
25onBeforeUpdate(() => {
26  console.log('父组件-更新前')
27})
28onUpdated(() => {
29  console.log('父组件-更新完毕')
30})
31onBeforeUnmount(() => {
32  console.log('父组件-卸载前')
33})
34onUnmounted(() => {
35  console.log('父组件-卸载完毕')
36})
37</script>

1<template>
2  <h2>子组件</h2>
3</template>
4
5<script lang="ts" name="ChildComp" setup>
6import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated} from "vue";
7
8console.log('子组件-setup')
9onBeforeMount(() => {
10  console.log('子组件-挂载前')
11})
12onMounted(() => {
13  console.log('子组件-挂载完毕')
14})
15onBeforeUpdate(() => {
16  console.log('子组件-更新前')
17})
18onUpdated(() => {
19  console.log('子组件-更新完毕')
20})
21onBeforeUnmount(() => {
22  console.log('子组件-卸载前')
23})
24onUnmounted(() => {
25  console.log('子组件-卸载完毕')
26})
27</script>

:::

生命周期#

概念#

规律#

Vue2#

Vue3#

生命周期

概念

规律

Vue2

Vue3