一、什么是生命周期?
- Vue中,生命周期是组件的一个属性,是指一组件在以下这些阶段而调用的特定的函数,因而又叫生命周期函数或生命周期钩子:
- 创建(创建前,创建完毕)
- 挂载(挂载前,挂载完毕)
- 更新(更新前,更新完毕)
- 销毁(销毁前,销毁完毕)
- vue2和vue3中的生命周期存在不同点和相同点,下面分别进行介绍,并说明vue3中生命周期的用法
vue2中的生命周期:
- 创建是一个组件的第一步,包括两个函数:
beforeCreate()
created()
- 挂载是将创建的组件元素发送至页面,使其显示,包含两个函数:
beforeMount()
mounted()
- 更新函数调用发生在当前页面中有元素变化(即更新)时,包含两个函数:
beforeUpdate()
updeted()
- 销毁函数调用发生在当前组件被销毁(关闭)时,包含两个函数:
beforeDestory()
destoryed()
vue3中的生命周期:
vue3
中的生命周期函数功能和和使用场景和vue2
相同vue3
中的创建部分被setup
函数取代vue3
中的挂载、更新、销毁函数有他们不同的名字:
- 挂载:
onBeforeMount()
、onMounted()
- 更新:
onBeforeUpdate()
、onUpdated()
- 卸载:
onBeforeUnmount()
、onUnmounted()
二、怎么使用vue3的生命周期?
<script lang="ts" setup name="sample">
import { onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onUnmounted,onBeforeUnmount } from 'vue';
onBeforeUpdate(()=>{
console.log("更新前")
})
</script>