谈谈对Vue生命周期的理解

1,388 阅读1分钟

Offer 驾到,掘友接招!我正在参与2022春招打卡活动,点击查看活动详情

生命周期是什么

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

各个生命周期的作用

生命周期描述
beforeCreate组件实例被创建之初,组件的属性生效之前
created组件实例已经完全创建,属性也绑定,但真实dom还没有生成, $el 还不可用
beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用
mountedel被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
beforeUpdate组件数据更新之前调用,发生在虚拟 DOM 打补丁之前
update组件数据更新之后
activitedkeep-alive专属,组件被激活时调用
deadctivatedkeep-alive专属,组件被销毁时调用
beforeDestory组件销毁前调用
destoryed组件销毁后调用

生命周期示意图

微信截图_20220326180436.png

第一次加载页面会触发哪几个钩子函数?(必问)

当页面第一次页面加载时会触发 beforeCreate,created,beforeMount,mounted 这几个钩子函数

异步请求适合在哪个生命周期调用?

官方实例的异步请求是在 mounted 生命周期中调用的,而实际上也可以在 created 生命周期中调用

DOM渲染在那个生命周期阶段内完成

DOM渲染在 mounted 周期中就已经完成只。执行一次,运行阶段可以执行多次

一个前端小白,若文章有错误内容,欢迎大佬指点讨论!