Vue全家桶之 生命周期

Vue实例的生命周期

1、什么是vue的生命周期?

【1】、定义: 指的就是vue实例在页面中创建到销毁的整个过程

【2】、vue生命周期钩子(vue生命周期函数)

特点: 伴随着vue实例生命周期过程中自动触发的,不需要人为手动触发

2、vue 生命周期大致分为三个阶段:

1、初始化阶段(4):

【1】beforeCreate --------------------------------------Vue初始化阶段触发的第一个生命周期函数

(在这个函数执行时Vue对象仅仅完成自身内部事件和生命周期函数的注入)

【2】created --------------------------------------------- Vue初始化阶段触发的第二个生命周期函数

(在这个函数执行时Vue对象已经存在自身内部事件和生命周期函数,还包括自定义的data、methods、computed...)

【3】beforeMount ------------------------------------Vue初始化阶段触发的第三个生命周期函数

(这个函数执行的时候, el执行html还是一个原始模板,还没有完成数据渲染工作)

【4】mounted ---------------------------------------- Vue初始化阶段触发的第四个生命周期函数

(这个函数在执行的时候,此时vue会根据模板创建虚拟dom 并进行数据渲染 ,最后将虚拟dom 替换 el)

------------------------------------------全部Vue初始化完成了 ------------------------------------------

2、运行阶段:

【5】beforeUpdate --------------------------------- Vue实例中的数据发生变化,会先触发这个函数 ( 当有数据变化的时候才能触发 )

(在这个函数触发时 ,vue实例中data的数据已经变化 , 但是页面数据还没有替换 )

【6】update ------------------------------------------ data 数据与页面数据保持一致

( 此时 vue 实例中 data 的数据和 页面 的数据完全一致)

3、销毁阶段:

【7】beforeDestroy ------------------------------ 销毁时第一个生命周期函数

(这个函数执行时候,vue实例还没有销毁,此时vue的所有特性都是存在的)

【8】destroyed -------------------------------------销毁时第二个生命周期函数,这个函数执行时Vue实例已经彻底销毁

调用 app. $ destroy ( ),销毁后,双向绑定机制就没有了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

冰镇奶茶

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

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

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

打赏作者

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

抵扣说明:

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

余额充值