vue3生命周期及setup介绍

最新推荐文章于 2025-03-17 18:28:00 发布

super_wanan

最新推荐文章于 2025-03-17 18:28:00 发布

阅读量1w

点赞数 4

分类专栏： vue3 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_43867717/article/details/127009632

版权

本文介绍了Vue3的生命周期变化，如destoryed更名为unmounted，新增setup函数，并详细阐述了setup函数的特性：无this，仅在组件初始化时执行一次，以及在beforeCreate之前执行。还探讨了在Vue3中如何使用生命周期函数，访问Props，setup上下文，特别是expose函数用于限制组件暴露给父组件的方法。同时，展示了setup与渲染函数的配合使用及其注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🌷 生命周期

下图对比了vue3（左）和vue2（右）的生命周期：vue3将destoryed该名成了unmounted，相应的beforeDestory改成了beforeUnmounted。除此之外在组合式API中新增了个钩子函数：setup。它发生在beforeCreate之前。
在这里插入图片描述
先简单介绍下setup函数：

setup() 钩子是在组件中使用组合式 API 的入口
setup中没有this
setup函数只会在组件初始化的时候执行一次
setup函数在beforeCreate生命周期钩子执行之前执行

生命周期函数

与vue2不同，vue3中使用生命周期函数需要先导入生命周期钩子函数，并且生命周期函数可以调用多次。

<script lang="ts">
import {
    onMounted } from 'vue'
export default {
   
   setup() {
   
     onMounted(() => {
   
    	console.log('mounted')
	})
	onMounted(() => {
   
	    console.log('mounted two')
	})
  }
}
</script>