vue3.0 生命周期_vue3.0生命周期

vue2.x

vue3.0

1、可以发现，vue3.x将最后一组生命周期名称从原来的“销毁”改为“卸载”，呼应了beforeMount与onmounted挂载。
2、区别于vue2.x，vue2.x中在new Vue（{…}）阶段，配置对象不传递el时，并且在created后，不调用$mount，这就意味整个生命周期在调用beforeCreate与created钩子后并结束了。
vue3.x则是，调用完createApp后，就需要挂载el，接着才调用beforeCreate，created。所以vue3.x生命周期中相应的少了一个判断环节

vue3.0

示例代码

来一段示例代码和打印看一看vue3.0生命周期。

// home.vue 父级
<template>
	// 每次切换意味着挂载和卸载组件
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <demo v-if="isShowDemo"></demo>
</template>

<script>
import demo from "@/components/demo.vue";
import { ref } from "vue";
export default {
  components: {
    demo,
  },
  setup() {
    let isShowDemo = ref(true);
    return {
      isShowDemo,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// components/demo.vue 子组件
<template>
  <h2>个人信息</h2>
  <p>年龄：{{ age }}</p>
  <button @click="age++">++</button>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const age = ref(0);
    return {
      age,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

代码效果如下

生命周期代码 options API

<template>
  <h2>个人信息</h2>
  <p>年龄：{{ age }}</p>
  <button @click="age++">++</button>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const age = ref(0);
    return { age };
  },
  // 通过配置项形式使用生命周期钩子
  beforeCreate() {
    console.log("---beforeCreate---");
  },
  created() {
    console.log("---created---");
  },
  beforeMount() {
    console.log("---beforeMount---");
  },
  mounted() {
    console.log("---mounted---");
  },
  beforeUpdate() {
    console.log("---beforeUpdate---");
  },
  updated() {
    console.log("---updated---");
  },
  beforeUnmount() {
    console.log("---beforeUnmount---");
  },
  unmounted() {
    console.log("---unmounted---");
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

打印效果

挂载

更新

点击++，更新流程

卸载

卸载流程

组合式API

<template>
  <h2>个人信息</h2>
  <p>年龄：{{ age }}</p>
  <button @click="age++">++</button>
</template>

<script>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default {
  setup() {
    const age = ref(0);
    console.log("---setup---");
    onBeforeMount(() => {
      console.log("---onBeforeMount---");
    });
    onMounted(() => {
      console.log("---onMounted---");
    });
    onBeforeUpdate(() => {
      console.log("---onBeforeUpdate---");
    });
    onUpdated(() => {
      console.log("---onUpdated---");
    });
    onBeforeUnmount(() => {
      console.log("---onBeforeUnmount---");
    });
    onUnmounted(() => {
      console.log("---onUnmounted---");
    });
    return { age };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

挂载

更新

卸载