vue生命周期钩子

Vue实例在创建和销毁过程中会经历多个生命周期钩子,包括beforeCreate、created、beforeMount、mounted等,这些钩子提供了在特定阶段插入自定义代码的机会。在钩子函数中,应注意使用常规函数而非箭头函数来确保正确的`this`上下文。Vue的生命周期图有助于理解各个钩子的执行顺序,如在组件挂载、更新和销毁时的行为。
摘要由CSDN通过智能技术生成
何为生命周期钩子

官网解释:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

实际上,之所以叫生命周期钩子,就是在vue实例创建和执行的过程中,在每一步设置一个钩子函数,钩子函数可以理解成一个提前执行的回调函数。(ajax中 readystate也是异曲同工)

Vue的生命周期钩子

首先要注意vue的生命周期钩子是在new Vue()时,以传入对象的属性的形式进行申明。申明格式为:
生命周期钩子名:function(){}
另外需要注意的是:不能使用es6中的箭头函数申明,因为需要使用到this
vue的生命周期钩子包括:

  1. beforeCreate:在实例化之后(data observer),数据观测和事件配置之前(watcher event)
  2. created:实例创建完成后立即调用,此时已经完成数据观测,属性和方法的运算以及watch event事件回调,但是挂载还没开始,也就是说 $el不可见。
  3. beforeMount:挂在开始之前调用
  4. mounted:挂载成功之后调用,也就是被新创建的$el替换时。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值