vue3组合式api生命周期

生命周期钩子函数

Vue3：https://cn.vuejs.org/api/composition-api-lifecycle.html

Vue2：https://v2.cn.vuejs.org/v2/api/#选项-生命周期钩子

Vue2（选项式）	Vue3（选项式）	Vue3（组合式Api）
beforeCreate()	beforeCreate()
created()	created()
		setup()
beforeMount()	beforeMount()	onBeforeMount()
mounted()	mounted()	onMounted()
beforeUpdate()	beforeUpdate()	onBeforeUpdate()
updated()	updated()	onUpdated()
beforeDestory()		onBeforeUnmount()
destoryed()		onUnmounted()
activated	activated	onActivated()
deactivated	deactivated	onDeactivated()

总结：

• 之前在vue2中在created和beforeCreate写的初始化代码，现在写到setup中。
• vue3的组合式api和选项式对比，名字上只是多了个On。
• Vue3组合式api的钩子函数可以使用多次。详见下面的例子：

<script setup>
// 功能A.....
import {onMounted} from "vue";

onMounted(() => {
  console.log('功能A，onMounted')
})

// 功能B
onMounted(() => {
  console.log('功能B，onMounted')
})
</script>

<style lang="less" scoped>
</style>

![](https://secure2.wostatic.cn/static/smiR4rFTZGMqT84FyaGDEE/image.png?auth_key=1691824567-chhCZxfXuhLSiijTereufj-0-2046d1a02606547cc5bc89b3b1148fe0)

Vue2和Vue3生命周期对比图：