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

news2025/1/13 11:50:53

在这里插入图片描述
一、生命周期是什么

生命周期(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生命周期当中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/885686.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端性能优化——包体积压缩插件,打包速度提升插件,提升浏览器响应的速率模式

前端代码优化 –其他的优化可以具体在网上搜索 压缩项目打包后的体积大小、提升打包速度,是前端性能优化中非常重要的环节,结合工作中的实践总结,梳理出一些 常规且有效 的性能优化建议 ue 项目可以通过添加–report命令: "…

常见架构类型

目录 1.单机架构 2.应用数据分离架构 3.读写分离架构 4.冷热分离架构 5.垂直分库架构 6.微服务架构 7.容器编排架构 1.单机架构 单机架构是简单的将应用服务和数据库服务部署到同一台机器上。 缺点:存在很大的性能限制。 2.应用数据分离架构 引入负载均衡&a…

【Python】Web学习笔记_flask(6)——会话session对象

处理利用cookie来判断用户登录外,也可以使用session来判断用户是否登录 html代码和cookie对象的设置相同 from flask import Flask,request,render_template,make_response,session,url_for,redirectappFlask(__name__) app.secret_keyps1234567890 app.route(/) …

SpringBoot案例-员工管理-分页查询-实现

前言: 阅读本文前,请先浏览分页功能分析文章,文章传送门SpringBoot案例-员工管理-分页查询-分析_熵240的博客-CSDN博客 根据三层架构中各个层次的作用进行编码 功能接口的实现 控制层(Controller类) 具体关键代码如…

用好大模型,会写prompt才行,文心一言为例

实际上用文心一言已经有几个月了。一直没有写点什么。 对于用大模型,prompt的写法至关重要。今天水一个例子。 最开始,我想要让文心帮我提炼一个句子,顺带测试一下它的理解力 执行下面的步骤: 1 将下面由三个引号分隔的文本总结…

pg 简单查询语句

语法: 搜索语句: select (distinct(去重)) 内容(*代表所有) as 别名 from 表 注释: -- 快速查询:select 内容 AS 别名 没有表一般当做计算器来用

PLA: 语言驱动的开放词汇3D场景理解

论文:https://arxiv.org/abs/2211.16312 GitHub - CVMI-Lab/PLA: (CVPR 2023) PLA: Language-Driven Open-Vocabulary 3D Scene Understanding代码:GitHub - CVMI-Lab/PLA: (CVPR 2023) PLA: Language-Driven Open-Vocabulary 3D Scene Understanding 摘…

【RabbitMQ】消息队列-RabbitMQ篇章

文章目录 1、RabbitMQ是什么2、Dokcer安装RabbitMQ2.1安装Dokcer2.2安装rabbitmq 3、RabbitMQ入门案例 - Simple 简单模式4、RabbitMQ的核心组成部分4.1 RabbitMQ整体架构4.2RabbitMQ的运行流程 5、RabbitMQ的模式5.1 发布订阅模式--fanout 1、RabbitMQ是什么 RabbitMQ是一个开…

通用与垂直大模型之战:大模型驱动的商业智能变革之路

科技云报道原创。 是做通用大模型还是垂直大模型,这一个争论在“百模大战”的下讨论愈发热烈。 目前,以微软、谷歌、百度、阿里等为代表的发力于通用大模型的科技大厂,也都开始推动大模型在垂直领域的商业化落地。 比如说,微软…

【JAVA】变量的作用域与生存周期

个人主页:【😊个人主页】 系列专栏:【❤️初识JAVA】 文章目录 前言变量的作用域变量的生命周期局部变量全局变量 前言 变量,我们学习过程中逃不掉的知识,无论在哪种语言中我们都需要学会去合理的运用它,今…

电测知识分享——错过就要被淘汰掉?这个电子测试超重要项目你了解多少?

一、为什么准确性这么重要? 任何测试都会有误差的存在。假设我们现在有个项目:设计一个LNA,其噪声系数NF2dB.测试误差为0.5dB。这就意味着设计人员需将NF指标控制在1.5dB甚至更低,NF超1.5dB的产品在测试过程中就要被淘汰掉。如果…

ES6自用笔记

原型链 引用类型:__proto__(隐式原型)属性,属性值是对象函数:prototype(原型)属性,属性值是对象 ​​​​​​​ 相关方法 person.prototype.isPrototypeOf(stu) Object.getPrototypeOf(Object)替换已不推荐的Object._ _ pro…

【项目设计】负载均衡式在线OJ

🌠 作者:阿亮joy. 🎆专栏:《项目设计》 🎇 座右铭:每个优秀的人都有一段沉默的时光,那段时光是付出了很多努力却得不到结果的日子,我们把它叫做扎根 目录 👉项目地址&am…

自研的EtherCAT总线一拖四开环步进驱动器低成本方案

自研的EtherCAT总线一拖四开环步进驱动器,可以连接TwinCAT 欧姆龙 汇川PLC Codesys SOEM主站,IGH主站。 电机单轴驱动电流最大4A,可以带42/57/86电机。带12路数字输入,8路数字输出。 EtherCAT总线DC同步周期125us,支持…

“深入剖析Java多态:点燃编程世界火花“

White graces:个人主页 🙉专栏推荐:Java入门知识🙉 🙉 内容推荐:“继承与组合:代码复用的两种策略“🙉 🐹今日诗词:马踏祁连山河动,兵起玄黄奈何天🐹 快去学习 🌸思维导…

8月14日上课内容 LVS负载均衡的群集

知识点: 本章结构: 企业群集概述 集群的含义: 1、群集的含义 ①、Cluster、集群、群集 ②、由多台主机构成,但对外只表现为一个整体,只提供一个访问入口(域名与IP地址),相当于一台大型计算机。…

重要日期提醒软件是哪个?帮你记住重要日程的提醒软件

生活、工作、学习中有众多重要的日期,如生日、纪念日、会议、截止日期等,它们承载着我们珍贵的回忆和重要的任务,因此绝对不能忘记。然而在信息爆炸的时代,我们的生活和工作节奏都是非常快的,时常会忘记这些重要的日程…

关于git执行提交报错问题

1.在执行git中 执行git init 执行 git add . 执行git commit -m “first commit” 时会出现 git config --global user.email "youexample.com" git config --global user.name "username" 这个问题是由于在git中没有设置默认的user跟emali导致需要手…

Cesium加载Supermap的wmts服务

最近使用cesium 加载supermap的wmts 服务,多次遇到加载异常与白页面问题,纠结好久最后才搞定[特此记录] 1、首先找到方法加载wmts 的api 文档 官方提示使用WebMapTileServiceImageryProvider加载wmts 2、然后编辑加载代码 //1.新建ImageryProviderlet…

产品经理为什么是程序员转行的首选?答案在这里!

经常看到有程序员小哥工作几年因为压力大想转行,这种情况确实是存在的。整日泡在无穷无尽的代码中,确实是一件很枯燥的事情。这可能不仅仅是工作量方面的压力,更多的是做到一定程度后,对这个工作不够感兴趣,需要找到更…