vue生命周期钩子函数（详解及使用场景）

最新推荐文章于 2025-06-10 18:35:04 发布
最新推荐文章于 2025-06-10 18:35:04 发布
阅读量9.5k 收藏 55
点赞数 7
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43734490/article/details/88190741
本文深入解析Vue.js的生命周期，包括beforeCreate、created、beforeMount、mounted等关键阶段的作用及调用时机，阐述各阶段数据访问与DOM操作的特点，指导开发者合理安排逻辑与请求，避免常见错误。

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

![1、beforeCreate （使用频率低）
* 在实例创建以前调用
* 没有实例化，数据访问不到

2、 created （使用频率高）
* 实例被创建完成后调用
* 能拿到数据
* 能修改数据，
* 且修改数据不会触发updated beforeUpdate钩子函数
* 可以在这个钩子函数里发请求，访问后端接口拿数据
* 判断是否存在el，是否存在template，如果二者都有，以template为主优先， 如果 没有template,会选择el模板。
如果二者都没有，有$mount 也可以调用模板
3、beforeMount

  • 真实的dom节点挂载到页面之前
  • 编译模板已经结束，虚拟dom已经存在，
  • 可以访问数据，也可以更改数据
  • 且修改数据不会触发updated beforeUpdate钩子函数
  • 在beforeMount和mounted之间隐藏了一个render函数，千万不能写，会覆盖系统函数
    4、mounted（挂载）
    • 真实的dom节点挂载到页面以后
    • this.$refs找到ref表示的节点
      在这里插入图片描述
      在这里插入图片描述
    • 可以访问和更改数据
    • 且修改数据会触发updated beforeUpdate钩子函数

5、beforeUpdate
* 修改之前调用

6、updated
* 修改之后调用
* beforeUpdate 、updated 可以监控data里的所有数据变化
* 不要在update beforeUpdate修改不定数据，否则会引起死循环
* 监听data里的所有的数据，非updated莫属
7、beforeDestroy
* 实例卸载以前调用，可以清理非vue资源,防止内存泄露

8、destroyed

9、activated （使用频率较低） keep-alive 缓存组件时候调用

10、deactivated 缓存组件卸载的时候调用

11、watch: 监听特定值的变化，监听路由参数的变化，用函数的形式不能监听对象的变化（与updated对立）
在这里插入图片描述
](https://img-blog.csdnimg.cn/20190305170946803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDQ5MA==,size_16,color_FFFFFF,t_70)

Vue3生命周期钩子函数详解，包含与Vue2的对比
繁若华尘的博客
02-21 605
通过合理使用生命周期钩子，可以更精准地控制组件行为，提升代码可维护性
深入解析 Vue2 的生命周期钩子函数
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
12-28 952
Vue2 是一款非常易于上手的前端框架，它的组件化开发思想使得应用的构建更加高效和模块化。在 Vue 中，生命周期钩子函数是每个组件实例从创建到销毁过程中会调用的一系列函数。这些钩子函数为开发者提供了丰富的接口，以便在组件的不同阶段执行特定的操作。本文将深入解析 Vue2 中的生命周期钩子函数，并结合具体的应用场景，帮助开发者更好地理解和运用这些钩子函数，提高开发效率和代码的可维护性。创建阶段在该阶段，Vue 实例被初始化，但尚未渲染 DOM。此时，数据观测和事件配置已经完成，但组件实例还没有被挂载。
详解Vue路由钩子及应用场景（小结）
08-28
本篇文章主要介绍了详解Vue路由钩子及应用场景（小结），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue生命周期钩子理解
weixin_40630195的博客
02-13 484
Vue声明周期钩子
vue钩子函数之组件生命周期函数
最新发布
qq_41340330的博客
06-10 1015
钩子函数一般是指vue自带的描述组件的生命周期的函数，当然还有路由钩子、Vuex 插件钩子 等，此处只讲组件的生命周期函数，这些是在组件生命周期特定阶段自动钩子函数的使用在VUE中很常见，学会合适地在哪些阶段做哪些事情，可以使我们的代码逻辑清晰而规整。而如果用不好则也会出现对应的bug，如在updated 中修改数据可能导致无限循环更新。unmounted 中修改数据发现无效，因为组件已销毁等等，在了解了每个阶段的意义后再去使用则出现这种问题的概率将会大大减少。
Vue组件&实例的生命周期
Mine____的博客
03-24 258
每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载到，只是一个空壳，无法访问到数据和真实的dom，一般不做操作 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里...
Vue生命周期钩子函数理解与使用场景
Echo___Echo的博客
04-29 1605
Vue生命周期钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 那我们来演示一下在一个 Vue 实例从初始化到渲染以及最终销毁这一系列变化中,数据以及挂载的实例都经历了什么变化 <!DOCTYPE html> <html> <head> <meta
vue生命周期钩子函数详解
热门推荐
小熊的博客
07-26 9万+
先放一张官网生命周期图： vue有8种生命周期函数： 钩子函数 触发的行为 在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 加loading事件 created vue实例的数据对象data有了，$el还没有 结束loading、请求数据为mounted...
vue的生命周期钩子函数详解源代码
09-07
vue的生命周期钩子函数详解源代码
Vue.js生命周期钩子函数详解及应用场景
本章将介绍Vue.js生命周期的概述，包括什么是Vue.js生命周期钩子函数、Vue.js生命周期钩子函数的执行顺序以及生命周期钩子函数被分为哪几类。接下来我们将一一深入探讨。 ## 1.1 什么是Vue.js生命周期钩子函数 Vue...
Vue生命周期钩子函数的使用以及应用场景
她还会来吗的博客
09-09 2922
前言 昨天做项目时,由于自己对Vue的生命周期钩子函数了解的不是很到位,以至于出现了很多问题，所以便在闲暇之余写下这篇博客,加深一下对钩子函数的认知。 钩子函数介绍 话不多说，先上图！！ 初看这幅图,可能觉得这Tm是什么啊,能不能说的直白点！！！(淦),但习惯就好，这就是官方。但稍微学习一下之后,可以发现这是很简单的~ vue提供了多个生命周期函数供我们使用,分别为beforeCreate, created, beforeMount, mounted, beforeUpdate,
生命周期钩子函数的函数使用
qq_46649900的博客
10-25 210
    生命周期钩子函数不能使用箭头函数，箭头函数没有this
Vue生命周期钩子函数（详细整理）
xunfengZ的博客
11-14 275
图解版： 表格版 钩子函数 特征 应用场景 beforeCreadted （Vue刚出生）vue实例的挂载元素$el、数据对象data以及methods都没有初始化 加loading事件 created vue实例的数据对象data和methods初始化完成，但$el还没有 结束loading、请求数据为mounted渲染做准备 beforeMount vue实例的$el和data都初始化了（模板编译好了，但没有渲染），但还是虚拟的dom节点，具体的data.filter还未替换。
Vue生命周期钩子剖析（共12个钩子）
热爱前端的大三在校生
07-04 1万+
Vue生命周期钩子剖析，告别一知半解
Vue的生命周期及钩子函数详解
@不喝海之言@
12-20 405
Vue的生命周期及钩子函数详解 想要直观的了解Vue的生命周期及钩子函数，离不开一张图：Vue实例的“生命周期图”。 大家可以去官网查看或者保存下来这张生命周期图示。 官网地址：Vue官网生命周期图示 我们接下来的讲解，将依据这张图来进行。 生命周期图示解释： 图上绿色的框是一个一个的步骤。 红色的圆角框就是Vue的钩子函数。 黄色的菱形框就是判断。 Vue的生命周期指的是什么？  ​ ​V...
vue生命周期钩子,vue生命周期钩子,vue生命周期钩子
heshuaicsdn的博客
07-14 6060
说一下vue的声明周期： vue 的生命周期11个钩子函数是按照以下的顺序来的 ：（不可逆转哦,第11个除外） 一. 组件创建前后 1.beforeCreate 2.created 如，写一个子组件，然后挂在到父组件，在子组件中，console.log 子组件中的 data（）{ return { a:1 }, beforeCreate()...
vue生命周期钩子函数总结以及在项目中的应用实例讲解
m0_59157023的博客
01-12 718
vue生命周期钩子函数总结
Vue生命周期钩子
计算机小白学前端~
05-24 5036
自学前端
Vue父子组件生命周期与钩子函数详解
理解这些生命周期钩子可以帮助开发者在正确的时间点执行特定任务，例如数据预加载、DOM操作、订阅和取消订阅外部服务等。在父子组件交互中，父组件的生命周期通常先于子组件，例如在父组件的`created`或`mounted`中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值