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函数内使用生命周期,以免造成混乱。