Vue3：生命周期

一、什么是生命周期？

• Vue中，生命周期是组件的一个属性，是指一组件在以下这些阶段而调用的特定的函数，因而又叫生命周期函数或生命周期钩子：
  1. 创建（创建前，创建完毕）
  2. 挂载（挂载前，挂载完毕）
  3. 更新（更新前，更新完毕）
  4. 销毁（销毁前，销毁完毕）
• vue2和vue3中的生命周期存在不同点和相同点，下面分别进行介绍，并说明vue3中生命周期的用法

vue2中的生命周期：

• 创建是一个组件的第一步，包括两个函数：
  beforeCreate()
created()
• 挂载是将创建的组件元素发送至页面，使其显示，包含两个函数：
  beforeMount()
mounted()
• 更新函数调用发生在当前页面中有元素变化（即更新）时，包含两个函数：
  beforeUpdate()
updeted()
• 销毁函数调用发生在当前组件被销毁（关闭）时，包含两个函数：
  beforeDestory()
destoryed()

vue3中的生命周期：

• vue3中的生命周期函数功能和和使用场景和vue2相同
• vue3中的创建部分被setup函数取代
• vue3中的挂载、更新、销毁函数有他们不同的名字：
  1. 挂载：onBeforeMount() 、onMounted()
  2. 更新：onBeforeUpdate() 、onUpdated()
  3. 卸载：onBeforeUnmount() 、onUnmounted()

二、怎么使用vue3的生命周期?

<script lang="ts" setup name="sample">
    import { onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onUnmounted,onBeforeUnmount } from 'vue'; //引入
    //例：使用更新
    onBeforeUpdate(()=>{
	    console.log("更新前")
    })
    //其余函数使用方法相同 
</script>