Vue生命周期钩子函数

已于 2022-11-08 09:01:49 修改
阅读量677 收藏
点赞数
分类专栏： vue基础 文章标签： vue.js 前端 前端框架
于 2022-04-13 16:38:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45929829/article/details/124151591
版权

本文章的内容对vue.js官网的生命周期钩子函数做了详细的注释，这篇博客不仅让自己对vue组件的生命周期能有很好的理解，并且对于初学vue的小伙伴使用起来更加友好。

  • created : methods、data等配置项已经初始化完成，如果想要调用methods中的方法、操作data中的数据最早只能在created中操作

  • mounted : 只要执行完了mounted就表示整个Vue实例已经初始化完了，此时组件已经脱离了创建阶段，进入到了运行阶段

  • beforeDestroy : 实例身上所有的data和methods，以及过滤器、指令都处于可用状态，此时好没有正真执行销毁过程

  • Destroyed : 执行到Destroy时组件已经被完全销毁，此时组件中得到数据和方法等都已不可用

晚意延年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue生命周期钩子
计算机小白学前端~
05-24 4418
自学前端
Vue的生命周期钩子函数
DHLSP15的博客
03-08 185
Vue的生命周期钩子函数 beforeCreate 创建前状态 描述：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created 创建完毕状态 描述：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。 beforeMount 挂载前状态
Vue钩子
雷佳佳的博客
06-12 1227
Vue钩子 1、钩子函数 指令定义函数提供了几个钩子函数（可选）： bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略...
vue中钩子
A_bet_of_three_years的博客
09-11 1952
vue中的钩子实际就是hook,指的是一种事件劫持机制，也就是说它会比你的事件更早进行执行处理什么是 axiosaxios 是一个基于 Promise 的，为浏览器和 Node.js 设计的 HTTP 客户端。它尽可能简化封装了 HTTP 相关的各种操作，在 Web App 中使用非常方便。 vue中父组件与子组件的参数如何传递
vue组件级路由钩子函数介绍，及实际应用
weixin_34314962的博客
06-21 158
　　正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。 　　有多种方式可以在路由导航发生时执行钩子：全局的、单个路由独享的、或者组件级的。 一、全局钩子 　　你可以使用 router.beforeEach 注册一个全局的 before 钩子： const router = new VueRouter({ ... }) router.beforeEach((to,...
vue生命周期与钩子函数简单示例
12-29
本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net vue生命周期与钩子函数...
(1条消息) vue生命周期钩子函数的正确使用方式_JaydenSun的博客-CSDN博客_vue生命周期钩子.html
04-22
(1条消息) vue生命周期钩子函数的正确使用方式_JaydenSun的博客-CSDN博客_vue生命周期钩子.html
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
Vue生命周期钩子的理解
01-08
组件的生命周期钩子函数大致可以分为三个阶段：初始化 、进行中 、 销毁。 1、初始化：beforecreate – create – beforeMount – mounted // 一个组件或者实例的生命周期都是通过new开始的 // 实例化之后，内部...
Vue-钩子函数
weixin_53414334的博客
09-28 303
/ Vue 框架内置函数，随着组件的生命周期阶段，自动执行 作用: 特定的时间点，执行特定的操作 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 分类: 4大阶段8个方法 阶段 方法名 方法名 初始化 beforeCreate created 挂载 beforeMount mounted 更新 beforeUpdate updated 销毁 beforeDestroy
Vue的钩子函数
weixin_44082693的博客
06-17 84
生命周期图：
Vue中的钩子Hook
科技向善
01-05 3752
在Vue的源码中，很多地方用到了Hook(钩子)，这个Hook是回调的意思。
Vue：常用钩子
KaiSarH
11-21 3404
data、methods、computed、watch、directives、beforeCreate 、created 、beforeMount 、mounted 、beforeUpdate 、updated 、beforeDestroy 、destroyed
Vue生命周期钩子剖析（共12个钩子）
热爱前端的大三在校生
07-04 9335
Vue生命周期钩子剖析，告别一知半解
vue钩子【通俗易懂版】
dong_dong222的博客
04-24 5527
在vue中，钩子指的是“hook”，是一种事件劫持机制，可以比事件更早进行执行处理；钩子可以理解为vue的内置事件，但是这个内置事件需要主动去配置，可以用来处理被拦截的函数调用、事件和消息。 vue生命周期中8个钩子函数 beforeCreated() 在vue实例创建完成之前执行，此时所以无法访问data中的数据和methods中的方法 created( )在vue实例创建完毕之后执行，可以访问data中的数据和methods中的方 beforemount( ) 在模板渲染到...
Vue生命周期函数（钩子）
贤贤的博客
08-10 147
Vue生命周期函数什么是生命周期函数 什么是生命周期函数
【Vue】详细介绍下Vue的钩子函数及其应用举例
Jacker
09-11 1180
Vue的钩子函数是在生命周期中执行的特定函数，它们允许我们在组件的不同阶段执行自定义逻辑。总的来说，Vue的钩子函数提供了丰富的生命周期事件，在不同的阶段执行自定义的逻辑，让我们更好地理解和控制组件的生命周期。举例：在这个钩子中，我们可以对比之前的数据和当前的数据，以便做出决策是否需要执行一些额外的逻辑操作。举例：在这个钩子中，我们可以进行一些销毁后的工作，比如清理一些全局变量或者从其他组件中取消订阅事件。举例：在这个钩子中，我们可以更新一些插件或者将当前组件的数据同步到其他组件中。
Vue 生命周期钩子简单介绍
SillyBoy的博客
06-29 425
文章目录生命周期钩子1 beforeCreate2 create3 beforeMount4 mount5 beforeUpdate6 update7 activted8 deactivated9 beforeDestroy10 destroy11 errorCaptured 生命周期钩子 1 beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2 create 在实例创建完成后被立即调用。 数据观测 (data
vue生命周期 钩子函数
最新发布
10-26
Vue生命周期是指Vue实例从创建到销毁的整个过程，而钩子函数则是在这个过程中被调用的一些函数。Vue生命周期钩子函数可以让我们在Vue实例的不同阶段添加自定义的逻辑代码，以便更好地控制Vue实例的行为。Vue生命周期钩子函数可以分为8个阶段，分别是：创建前、创建后、挂载前、挂载后、更新前、更新后、销毁前和销毁后。具体的钩子函数包括： 1. beforeCreate：在Vue实例创建之前调用，此时Vue实例的data和methods等属性还未初始化。 2. created：在Vue实例创建之后调用，此时Vue实例的data和methods等属性已经初始化完成。 3. beforeMount：在Vue实例挂载到DOM之前调用，此时Vue实例的template模板已经编译完成，但还未渲染到页面上。 4. mounted：在Vue实例挂载到DOM之后调用，此时Vue实例已经渲染到页面上，可以进行DOM操作。 5. beforeUpdate：在Vue实例更新之前调用，此时Vue实例的data数据已经发生变化，但还未更新到DOM上。 6. updated：在Vue实例更新之后调用，此时Vue实例的data数据已经更新到DOM上。 7. beforeDestroy：在Vue实例销毁之前调用，此时Vue实例还未销毁，可以进行一些清理工作。 8. destroyed：在Vue实例销毁之后调用，此时Vue实例已经被销毁，无法再进行任何操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值