Vue的生命周期

Vue的生命周期插图

生命周期就是事物产生到消亡的整个过程。比如我们的人生中有很多关键节点,比如出生,成年,结婚,去世等等。每个关键节点前和节点后都会有明显的变化。

Vue的生命周期插图1

Vue3的生命周期

vue官网:



Vue生命周期的关键节点:有4关键节点分别是 create(创建)、 mount(挂载)、update(更新)、 unmount(卸载)。
在每个关键节点前后设置了相应的钩子函数,那么到这个节点前或节点后就会调用相应的钩子函数。所以一共就可以设置8个钩子函数。

Vue的生命周期插图2

挂载(初始化相关属性)
beforeCreate —- 出生前
注意点:在此时不能获取data中的数据,也就是说 this.info 得到的是null
created —- 出生了 (这里就可以获取data中的数据)

beforeMount —- 登记前
mounted —- 登记后【页面加载完毕的时候就是此时】
注意点:默认情况下,在组件的生命周期中只会触发一次

更新(元素或组件的变更操作)beforeUpdate —- 学习前
updated —- 学习会了
注意点:可以重复触发的

销毁(销毁相关属性)
beforeunMount —- 交代后事unmounted —- 寿终正寝

Vue的生命周期插图3

Vue2生命周期与Vue3的区别
vue2与vue3的区别是vue3的卸载变为销毁

Vue的生命周期插图4

unmount -> destroybefore
Unmount -> beforeDestroy // 销毁前unmounted -> destroyed // 已销毁

本人前端菜鸟会持续分析一些前端知识,这次比较简单,是最基础的东西,vue目前是前端主要框架,还有react框架[滑稽]

© 版权声明
THE END
感觉文章不错请大大点赞分享一下吧
点赞42 分享
评论 抢沙发

请登录后发表评论

图片-未央资源网