vue3生命周期

1.生命周期定义

每个 Vue 实例在被创建时都要经过一系列的初始化过程。
例如：从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。
我们称 这一系列的过程 就是Vue的生命周期。
通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。

钩子函数

钩子：钩子函数可以简单理解为是一种系统在不同的阶断自动执行、用户无须干预的函数。

2.vue3中的生命周期

1.普通写法

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

• beforeDestroy改名为 beforeUnmount
• destroyed改名为 unmounted
  vue3:
  

  

<template >
  <div>
    <h3>生命周期</h3>
    <button @click="count++">修改count的值---{{count}}</button>
    <p><button @click="del">点击销毁</button> </p>
  </div>
</template>
<script>
import {ref,getCurrentInstance} from "vue";

export default {
  data(){
    return {
        count:0
    }
  },
 setup(props) {
     console.log("setup")
     const instance=getCurrentInstance()
    return {
      instance,
    }
   },
  methods: {
  //销毁
     del(){
      this.instance.root.appContext.app.unmount()
   },
  },
  beforeCreate() {
    console.log("beforeCreate")
  },
  created() {
    //访问setup中的数据
    console.log("count",this.count) 
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount")
  },
  mounted() {
    console.log("mounted")
  },
  beforeUpdate() {
    console.log("beforeUpdate")
  },
  updated() {
    console.log("updated")
  },
  beforeUnmount() {
    console.log("beforeUnmount");
  },
  unmounted() {
    console.log("unmounted");
  },
}
</script>

2.setup中写生命周期

• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
  • beforeCreate===>setup()
  • created=======>setup()
  • beforeMount ===>onBeforeMount
  • mounted=======>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated =======>onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted =====>onUnmounted

选项式 API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

区别

vue2	vue3	差异比较
beforeCreate	setup	setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
created	setup
beforeMount	onBeforeMount	组件挂载到节点上之前执行的函数
mounted	onMounted	组件挂载完成后执行的函数
beforeUpdate	onBeforeUpdate	组件更新之前执行的函数
updated	onUpdated	组件更新完成之后执行的函数
beforeDestroy	onBeforeUnmount	卸载之前执行的函数，相比改名了
destroyed	onUnmounted	卸载之后执行的函数
activated	onActivated	被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行
deactivated	onDeactivated	比如从 A 组件，切换到 B 组件，A 组件消失时执行
errorCaptured	onErrorCaptured	当捕获一个来自子孙组件的异常时激活钩子函数
	onRenderTracked	vue3新增的周期用于开发调试使用的
	onRenderTriggered	vue3新增的周期用于开发调试使用的

• vue2的beforeCreate和create变成了setup

• 除了setup外大部分还是vue2的名字，只是在前面加了个on

• vue2的destroyed和beforDestroy变成了on

<template>
  <div>
    <button @click="count++">修改count的值---{{count}}</button>
    <p><button @click="del">点击销毁</button> </p>

  </div>
</template>
<script setup>
 import {ref,reactive,getCurrentInstance,onMounted,onBeforeMount,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue"
const count=ref(0);
const instance=getCurrentInstance();
const del=()=>{
    instance.root.appContext.app.unmount();
}
onBeforeMount(()=>{
  console.log("onBeforeMount");
})
onMounted(()=>{
console.log("onMounted")
})
onBeforeUpdate(()=>{
console.log("onBeforeUpdate")
})
onUpdated(()=>{
console.log("onUpdated")
})
onBeforeUnmount(()=>{
console.log("onBeforeUnmount")
})
onUnmounted(()=>{
console.log("onUnmounted")
})

</script>