Cnkrru

生命周期

概念

Vue 组件实例在创建时要经历一系列的初始化步骤，在此过程中 Vue 会在合适的时机调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子。

规律

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

Vue2 的生命周期

阶段	钩子
创建阶段	`beforeCreate`、`created`
挂载阶段	`beforeMount`、`mounted`
更新阶段	`beforeUpdate`、`updated`
销毁阶段	`beforeDestroy`、`destroyed`

Vue3 的生命周期

阶段	钩子
创建阶段	`setup`
挂载阶段	`onBeforeMount`、`onMounted`
更新阶段	`onBeforeUpdate`、`onUpdated`
卸载阶段	`onBeforeUnmount`、`onUnmounted`

常用钩子

钩子	说明
`onMounted`	挂载完毕
`onUpdated`	更新完毕
`onBeforeUnmount`	卸载之前

示例代码：

<template>
<div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
</div>
</template>

<!-- vue3写法 -->
<script lang="ts" setup name="Person">
import { 
    ref, 
    onBeforeMount, 
    onMounted, 
    onBeforeUpdate, 
    onUpdated, 
    onBeforeUnmount, 
    onUnmounted 
} from 'vue'

// 数据
let sum = ref(0)
// 方法
function changeSum() {
    sum.value += 1
}
console.log('setup')
// 生命周期钩子
onBeforeMount(()=>{
    console.log('挂载之前')
})
onMounted(()=>{
    console.log('挂载完毕')
})
onBeforeUpdate(()=>{
    console.log('更新之前')
})
onUpdated(()=>{
    console.log('更新完毕')
})
onBeforeUnmount(()=>{
    console.log('卸载之前')
})
onUnmounted(()=>{
    console.log('卸载完毕')
})
</script>