vue3-生命周期

生命周期

生命周期

• vue 组件实例都有自己的一个生命周期

• 从创建->初始化数据->编译模版->挂载实例到 DOM->数据变更后更新 DOM ->卸载组件

• 生命周期简单说就是 vue 实例从创建到销毁的过程

生命周期钩子

在各个周期运行时，会执行钩子函数，让开发者有机会在特定阶段运行自己的代码。这就是生命周期钩子

官方示意图：

生命周期钩子函数

<script?lang="ts"?setup>
import?{
??ref,
??reactive,
??onBeforeMount,?//?在组件挂载之前执行的函数
??onMounted,
??onBeforeUpdate,?//?在组件修改之前执行的函数
??onUpdated,
??onBeforeUnmount,?//?在组件卸载之前执行的函数
??onUnmounted
}?from?'vue'

//?setup?替代了?beforeCreate???setup

//?reactive?创建响应式对象
let?data?=?reactive({
??//?定义响应式数据
??count:?0
})

const?clickMe?=?()?=>?{
??data.count++
??alert('hi')
}

console.log('1-开始创建组件-----setup()')

onBeforeMount(()?=>?{
??console.log('2-组件挂载到页面之前执行-----onBeforeMount()')
})

onMounted(()?=>?{
??console.log('3-组件挂载到页面之后执行-----onMounted()')
})
onBeforeUpdate(()?=>?{
??console.log('4-组件更新之前-----onBeforeUpdate()')
})

onUpdated(()?=>?{
??console.log('5-组件更新之后-----onUpdated()')
})

onBeforeUnmount(()?=>?{
??console.log('6-组件卸载之前-----onBeforeUnmount()')
})
onUnmounted(()?=>?{
??console.log('7-组件卸载之后-----onUnmounted()')
})
</script>

<template>
??<div?class="container">
????<p>数字为{{?data.count?}}</p>
????<button?@click="clickMe">修改数据</button>
??</div>
</template>

<style?lang="scss"?scoped>
.container?{
}
</style>

VUE3 与 VUE2 生命周期的对比

setup 方式

??vue2????????????vue3
??
beforeCreate??->?setup()
created???????->?setup()
beforeMount???->?onBeforeMount
mounted???????->?onMounted
beforeUpdate??->?onBeforeUpdate
updated???????->?onUpdated
beforeDestroy?->?onBeforeUnmount
destroyed?????->?onUnmounted
activated?????->?onActivated
deactivated???->?onDeactivated
errorCaptured?->?onErrorCaptured

通过这样对比，

1. 可以很容易的看出 vue3 的钩子函数基本是再 vue2 的基础上加了一个 on,但也有两个钩子函数发生了变化。

2. BeforeDestroy 变成了 onBeforeUnmount

3. destroyed 变成了 onUnmounted

尤大的介绍是 mount 比 Destroy 更形象，也和 beforeMount 相对应。

onServerPrefetch() (ssr) 在组件实例在服务器上被渲染之前调用