Vue钩子函数以及生命周期

生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;

在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这个初始化,又会不同阶段默认调用一些函数执行,这些函数就是生命周期的钩子函数;

通俗说就是Vue实例从创建到销毁的过程,就是生命周期

什么是生命周期钩子函数都有哪些?

  1. beforeCreate created[可以获取数据及方法]

  1. beforeMount mounted[可以获取到真实的DOM]

  1. beforeUpdate updated[数据更新执行]

  1. beforeDestroy destroyed[销毁vue实例,不再具有双向数据绑定的特点

钩子函数都有哪些作用

创建前/后: 在beforeCreated阶段,vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.

载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完,data.message成功渲染。

更新前/后:当data变化时,会触发beforeUpdate和updated方法。

销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue钩子函数是在Vue实例生命周期中的特定时间点执行的回调函数。Vue生命周期可以分为创建、挂载、更新和销毁四个阶段。 1. 创建阶段:在这个阶段Vue实例被创建,数据进行初始化,编译模板,并开始挂载DOM。 2. 挂载阶段:在这个阶段Vue将数据渲染到DOM上,即将data中的数据绑定到el上。 3. 更新阶段:在这个阶段Vue会监听data变化并更新DOM。 4. 销毁阶段:在这个阶段Vue解除data与el的绑定关系,销毁Vue实例Vue生命周期钩子函数在每个阶段执行不同的任务。例如,created钩子在创建阶段执行,可以用于初始化数据或进行异步操作;mounted钩子在挂载阶段执行,可以用于获取数据或操作DOM;destroyed钩子在销毁阶段执行,可以用于清理定时器或解除事件绑定等操作。 父子组件的执行顺序是先父后子。父组件会在自身的生命周期钩子函数执行完毕后,再执行子组件的生命周期钩子函数。 当执行销毁操作后,Vue不再对data的变化进行响应,但是原先生成的DOM元素仍然存在。可以理解为执行了destroy操作后,Vue不再控制该元素。 综上所述,Vue钩子函数生命周期是为了在特定的阶段执行相应的回调函数,用于控制Vue实例的初始化、更新和销毁过程。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue生命周期钩子函数详解](https://blog.csdn.net/qq_42696432/article/details/120925949)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue生命周期及其钩子函数](https://blog.csdn.net/ORANGEFISHs/article/details/125378442)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

bug丶小狼人

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值