vue基础知识五:请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?


一、生命周期是什么

生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为"从摇篮到坟墓"(Cradle-to-Grave)的整个过程在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作PS:在Vue生命周期钩子会自动绑定 this 上下文到实例中,因此你可以访问数据,对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())

二、生命周期有哪些

Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后,以及一些特殊场景的生命周期

三、生命周期整体流程

Vue生命周期流程图


具体分析

beforeCreate -> created

初始化vue实例,进行数据观测

created

完成数据观测,属性与方法的运算,watch、event事件回调的配置

可调用methods中的方法,访问和修改data数据触发响应式渲染dom,可通过computed和watch完成数据计算

此时vm.$el 并没有被创建

created -> beforeMount

判断是否存在el选项,若不存在则停止编译,直到调用vm.$mount(el)才会继续编译

优先级:render > template > outerHTML

vm.el获取到的是挂载DOM的

beforeMount

在此阶段可获取到vm.el

此阶段vm.el虽已完成DOM初始化,但并未挂载在el选项上

beforeMount -> mounted

此阶段vm.el完成挂载,vm.$el生成的DOM替换了el选项所对应的DOM

mounted

vm.el已完成DOM的挂载与渲染,此刻打印vm.$el,发现之前的挂载点及内容已被替换成新的DOM

beforeUpdate

更新的数据必须是被渲染在模板上的(el、template、render之一)

此时view层还未更新

若在beforeUpdate中再次修改数据,不会再次触发更新方法

updated

完成view层的更新

若在updated中再次修改数据,会再次触发更新方法(beforeUpdate、updated)

beforeDestroy

实例被销毁前调用,此时实例属性与方法仍可访问

destroyed

完全销毁一个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器

并不能清除DOM,仅仅销毁实例

使用场景分析


四、题外话:数据请求在created和mouted的区别

created是在组件实例一旦创建完成的时候立刻调用,这时候页面dom节点并未生成;mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的,两者的相同点:都能拿到实例对象的属性和方法。 讨论这个问题本质就是触发的时机,放在mounted中的请求有可能导致页面闪动(因为此时页面dom结构已经生成),但如果在页面加载前完成请求,则不会出现此情况。建议对页面内容的改动放在created生命周期当中。

相关推荐
崔庆才丨静觅2 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60613 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了3 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅3 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅4 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅4 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment4 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅4 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊4 小时前
jwt介绍
前端
爱敲代码的小鱼4 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax