🌈 Vue2的生命周期__Vue.js
发布于 4 年前 作者 banyungong 1363 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

1. 生命周期是什么?

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

2. 各个生命周期的作用

生命周期 描述
beforeCreate 组件实例被创建之初,data 和 methods 中的数据还没有初始化
created 组件实例已经完全创建,data 和 methods 都已经初始化好了
beforeMount 模板渲染,相关的 render 函数首次被调用,模板已经在内存中编译好了,但是尚未挂载到页面中去
mounted el 被新创建的 vm.$el 替换,真实 dom 已经生成,$el 可用,组件脱离创建阶段,进入运行阶段
beforeUpdate 组件数据更新之前调用, 此时页面中显示的数据还是旧的,但 data 是最新的,页面尚未和最新的数据保持同步
update 组件数据更新之后,页面和 data 数据已经保持同步,都是最新的
beforeDestory 组件销毁前调用,vue 实例从运行阶段进入到销毁阶段,这时 vue 实例身上所有都可用,还没有真正执行销毁
destoryed 组件销毁后调用,vue 实例上的所有都不可以用了
activited keep-alive 专属,组件被激活时调用,
deactivated keep-alive 专属,组件被销毁时调用,

3. 生命周期示意图

总结

Vue 的生命周期面试的时候大多人都可以说出来,但如果一问到每个生命周期具体发生了什么,大部分人都回答不出来,所以真正理解生命周期才能在实际的工作中发挥每个生命周期的最大作用,这里还要注意一个问题:

如果只是单纯的数据展示,在哪个生命周期请求最好,答案:created,能早当然早,何必非得等到 mounted 的时候再请求呢,那什么情况下需要在 mounted 中请求呢,就是你需要操作 dom 的时候,这一块也是面试过程中经常会被问到的一个问题,需要仔细理解。

更多技术分享请关注我的个人博客 www.chengxiaohui.cn。欢迎骚扰━(`∀´)ノ亻!

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Cheers丶 原文链接:https://juejin.im/post/6868543314204262414

回到顶部