Vue3 - 生命周期钩子函数（组合式 API）

已于 2024-07-29 16:43:11 修改
阅读量4.2k 收藏 10
点赞数 4
分类专栏： + Vue3 + Vue3 开发问题汇总 文章标签： Vue3.0 vue3.js 生命周期 组合式API 钩子函数详细教程
于 2022-11-13 18:37:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/127821523
版权
本文对比Vue2和Vue3的生命周期钩子函数，详细介绍了Vue3中使用setup和组合式API的改变，强调了在Vue3中钩子函数的导入和同步使用规则，并分析了Vue3按需使用理念的优势。

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

前言

Vue 是组件化编程，从一个组件诞生到消亡会经历很多过程，这些过程就叫做生命周期。而伴随着生命周期，给用户使用的函数，就叫钩子函数，实际为操控生命周期。

本文主要对比 Vue2 生命周期，引出并展开 Vue3 生命周期的介绍，最后做一下整体的总结。

如果您仅需要速览，请查阅如下表格：

Vue2.X (选项式 API) Vue3.X (组合式 API)
beforeCreate setup()
created setup()
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorC
了解本专栏 订阅专栏 解锁全文
「Vue3系列」Vue3 组合式 API 生命周期钩子
日常笔记/总结/系列知识梳理
03-09 1432
Vue 3 引入了组合式 API（Composition API），它是一种新的 API，用于构建 Vue 组件的逻辑。在 Vue 3 的组合式 API 中，生命周期钩子可以通过导入相应的函数来使用。组合式 API 的核心思想是将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。这有助于将组件的逻辑划分为更小的、更易于管理的部分，并提高了代码的可读性和可维护性。这些钩子函数接收与选项式 API 中的生命周期钩子相同的参数，并允许你以函数式的方式处理组件的生命周期事件。
Vue 89 ，Vue3生命周期钩子函数（Vue3生命周期）
weixin_65793170的博客
09-10 4186
⭐Vue 3 引入了一些变化，特别是针对生命周期钩子函数。Vue 3 支持两种API风格：传统的选项式API（Options API）和新的组合式API（Composition API）。我们都知道选项式 API 是 Vue 2 中熟悉的语法风格，它在 Vue 3 中仍然得到支持。这里来分享记录，两种API下的生命周期钩子函数。
【Vue3 生命周期与组合式API】
武帝为此的博客
05-02 1577
Vue3 的生命周期钩子函数可以帮助开发者在组件的不同阶段执行特定的逻辑，以便更好地管理和优化应用。Vue的组件实例从创建到销毁会经历一系列的生命周期阶段，每个阶段都有相应的钩子函数，开发者可以利用这些钩子函数在组件的生命周期中的关键时刻注入自己的代码。初始化阶段：在这个阶段，Vue会进行事件和生命周期的初始化。对于组合式 API，这个阶段主要与setup函数的调用相关。模板编译阶段：将模板编译成渲染函数的阶段。这个阶段在使用组合式 API 时通常不需要直接操作。挂载阶段：组件被挂载到 DOM 上。
Vue (三) 生命周期--钩子函数
一条到晚游泳的鱼
09-24 571
生命周期 Vue官网生命周期的描述 钩子函数 1. beforeCreate 创建Vue实例化之前所调用的函数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <
Vue3 生命周期与Hooks
最新发布
2301_82023822的博客
04-25 1019
1. 鼠标位置跟踪 Hook})})// 组件中使用</script><template>鼠标位置：{{ x }}, {{ y }}2. 异步数据请求 Hooktry {})})return {data,error,loading,fetchData// 组件中使用})</script>
Vue3生命周期钩子函数
2301_77456141的博客
10-10 1688
1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method。8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；2、onBeforeMount() : 组件挂载到节点上之前执行的函数；4、onBeforeUpdate(): 组件更新之前执行的函数；
vue3生命周期钩子函数
lzfengquan的博客
06-14 9165
vue2生命周期钩子函数视图 vue3生命周期钩子函数视图代码 // 通过配置项beforeCreate () { console.log(‘beforeCreate’); }, created () { console.log(‘created’); }, beforeMount () { console.log(‘beforeMount’); }, mounted () { console.log(‘mounted’); }, beforeUpdate () { console.log(‘befor
Vue3 生命周期钩子函数
热门推荐
xiamoziqian的博客
12-14 2万+
一、Vue3生命周期钩子 setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method onBeforeMount() : 组件挂载到节点上之前执行的函数； onMounted() : 组件挂载完成后执行的函数； onBeforeUpdate(): 组件更新之前执行的函数； onUpdated(): 组件更新完成之后执行的函数； onBeforeUnmount(): 组件卸载之前执行的函数； onUnmounted(): 组件卸载完
Vue3组合式 API：生命周期钩子
weixin_50368372的博客
03-21 816
组合式 API 中的生命周期钩子提供了在不同阶段执行代码的机会。使用这些钩子可以在组件的生命周期中执行初始化、清理和更新操作。
vue3 生命周期钩子
咸鱼滚滚
08-24 1152
在 Vue 3 中，可以在组件不同阶段的生命周期执行特定逻辑。 生命周期整体分为四个阶段：创建、挂载、更新、卸载。
Vue3 组合式 API：生命周期钩子（三）
qq_35876316的博客
06-07 680
onMounted() 会在组件挂载到 DOM 后立即调用，此时 DOM 已经渲染完毕，可以进行相关的 DOM 操作或发起网络请求。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。组件实例是 缓存树的一部分，当组件从 DOM 中被移除时调用。在组件因为响应式状态变更而更新其 DOM 树之后调用。当这个钩子被调用时，组件实例依然还保有全部的功能。当响应式依赖的变更触发了组件渲染时调用。
Vue 3 生命周期函数详解
licy__的博客
12-08 4789
Vue 实例从创建到销毁经历了一系列的阶段，这些阶段被称为生命周期。在每个阶段，Vue 提供了相应的钩子函数（Lifecycle Hooks），允许开发者在特定的时间点执行自定义逻辑。| |v v| |v v| |v vVue 3 引入了 Composition API 和setup函数，使得组件逻辑更加模块化和可复用。此外，部分生命周期钩子名称有所变化，以更清晰地表达其含义。
Vue3 生命周期钩子
2402_83140078的博客
07-15 1550
Vue.js 中的生命周期钩子函数是指在组件实例的创建、更新、销毁等过程中，Vue 自动调用的一系列方法。在这些步骤中，组件会触发一系列称为"生命周期钩子"的函数，允许开发者在特定时机执行自定义代码。
vue3之生命周期钩子
点点滴滴
10-13 1111
在 Vue 3 中，组合式 API 提供了一系列的生命周期钩子函数，这些函数可以在组件的不同生命周期阶段执行特定的逻辑。：在组件挂载到 DOM 之前调用。onMounted：在组件挂载到 DOM 之后调用。：在组件更新之前调用。onUpdated：在组件更新之后调用。：在组件卸载之前调用。：在组件卸载之后调用。
VUE3 生命周期及钩子函数
hsany330的专栏
09-06 4388
一：什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。 二：上图，对生命周期图的标注 特别值得注意的是created钩子函数和mounted钩子函数的区.
Vue 3——生命周期钩子函数
小白菜的博客
08-19 1万+
可以直接导入 onXXX 一族的函数来注册生命周期钩子： import { onMounted, onUpdated, onUnmounted } from 'vue' const MyComponent = { setup() { onMounted(() => { console.log('mounted!') }) onUpdated(() => { console.log('updated!') }) onUnmoun
Vue3 -- 生命周期函数（钩子）
Sun_blog
07-06 1282
文章目录Vue生命周期Vue生命周期的作用生命周期函数（钩子）Vue生命周期图示Vue各生命周期函数的描述代码演示页面效果总结 Vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载DOM、更新渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。 Vue生命周期的作用 Vue 所有功能实现都是围绕生命周期进行； 在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染； 生命周期函数（钩子） 生命周期函数是指在某一时刻自动执行的函数。 Vue生命周期图示 从图中可以看出，V
vue3 生命周期钩子函数
weixin_46146570的博客
03-27 1545
初始Vue3的生命周期
Vue3/ Vue3 生命周期 钩子函数 总结 、Vue3 内 主要 钩子函数 、Vue2 和 Vue3 生命周期钩子函数对比
m0_64494670的博客
01-08 4114
Vue3/ Vue3 生命周期 钩子函数 总结 、Vue3 内 主要 钩子函数 、Vue2 和 Vue3 生命周期钩子函数对比
vue有哪些生命周期钩子函数
04-11
Vue3 的生命周期钩子函数分为**选项式API**（Options API）和**组合式API**（Composition API）两种风格，部分钩子名称和用法有所调整。以下是详细列表： --- #### **选项式API（Options API）生命周期钩子** 1. *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值