Vue3-生命周期

Vue3-生命周期

• vue2与vue3生命周期对比
• 在setup组合式api中使用生命周期
• 同时在配置项和setup中使用生命周期的调用顺序

vue2与vue3生命周期对比

左边是vue3右边是vue2，对比两图我们发现

• vue创建方式由new Vue()， 更改为 Vue.createApp(oprions).mount(el)。在vue3中先将配置项传入，一切准备就绪后再开始创建实例。
• 生命周期 beforeDestroy改为 beforeUnmount
• 生命周期 destroyed改为 unmounted

还有一个小细节，vue3生命周期的图片从png改成了svg格式，存储占用从48kb下降到了8kb

在setup组合式api中使用生命周期

• 在setup中没有beforeCreate和 created生命周期
• 所有生命周期前需要加on

<template>
<div></div>
</template><script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted
} from "vue";export default {name: "Demo",setup() {console.log("setup");// 通过组合式api方式使用生命周期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 {sum};}
};
</script>

同时在配置项和setup中使用生命周期的调用顺序

可以看到

首先调用setup内容
通过配置项使用生命周期在setup内使用生命周期之前调用

尽量不要同时在配置项和setup函数内使用生命周期，以免造成混乱。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！