网站优化建设网站建设 深圳

如下是Vue3的生命周期函数图： 

一、Vue2生命周期和Vue3声明周期的区别

1.  Vue2 中，只要创建Vue实例对象而不需要挂载就可以实现beforeCreate 和 created 生命周期函数。

Vue3中必须要将Vue实例对象挂载完成，所有的准备工作做完，才可以开始实现beforeCreate 和 created 生命周期函数。

2.  Vue2 我们销毁组件，触发的是beforeDestroy 和 destroyed 函数。

在Vue3中，我们销毁组件变为了卸载组件，实现的功能是一致的，不过只是称呼变了，触发的生命周期函数为beforeUnmount 和 unmounted。

二、Vue3生命周期的使用

（一）以配置项的形式调用

和Vue2中调用生命周期函数的方法一致，注意是与setup函数平级。

如下生命周期函数有不懂的，可以参考这篇文章：

Vue生命周期-CSDN博客

export default {name: "MyItem",setup() {},beforeCreate() {console.log("beforeCreate生命周期函数");},created() {console.log("created生命周期函数");},beforeMount() {console.log("beforeMount生命周期函数");},mounted() {console.log("mounted生命周期函数");},beforeUpdate() {console.log("beforeUpdate生命周期函数");},updated() {console.log("update生命周期函数");},beforeUnmount() {console.log("beforeUnmount生命周期函数");},unmounted() {console.log("unmounted生命周期函数");},
};

（二）以composition API 形式调用

以上的生命周期函数和composition API 对应形式如下：

beforeCreate ----> setup()

created ----> setup()

beforeMount ----> onBeforeMount

mounted ----> onMounted

beforeUpdate ----> onBeforeUpdate

updated ----> onUpdated

beforeUnmount ----> onBeforeUnmount

unmounted ----> onUnmounted

使用以上composition API 之前需要先对要使用的API按需引入：

 import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";

语法格式如下：

API (() => {  // 内部执行内容  })

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";export default {name: "MyItem",setup() {onBeforeMount(() => {console.log("beforeMount生命周期函数");})onMounted(() => {console.log("mounted生命周期函数");})onBeforeUpdate(() => {console.log("beforeUpdate生命周期函数");})onUpdated(() => {console.log("update生命周期函数");})onBeforeUnmount(() => {console.log("beforeUnmount生命周期函数");})onMounted(() => {console.log("unmounted生命周期函数");})}
};