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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【hadoop】windows上hadoop环境的搭建步骤

文章目录 前言基础环境下载hadoop安装包下载hadoop在windows中的依赖配置环境变量 Hadoop hdfs搭建创建hadfs数据目录修改JAVA依赖修改配置文件初始化hdfs namenode启动hdfs 前言 在大数据开发领域中,不得不说说传统经典的hadoop基础计算框架。一般我们都会将hadoo…

B. The Walkway - 思维

分析: 补题, 首先大体思路就是先算一遍没改变任何点时能够买到的物品,这一步可以通过看两点之间距离,之间能够包含几个d就说明会需要买几次物品,对于两侧边界,可以将左侧设置为1 - d, 因为此时可…

JVS开源基础框架:平台基本信息介绍

JVS是面向软件开发团队可以快速实现应用的基础开发脚手架,主要定位于企业信息化通用底座,采用微服务分布式框架,提供丰富的基础功能,集成众多业务引擎,它灵活性强,界面化配置对开发者友好,底层容…

没学C++,如何从C语言丝滑过度到python【python基础万字详解】

大家好,我是纪宁。 文章将从C语言出发,深入介绍python的基础知识,也包括很多python的新增知识点详解。 文章目录 1.python的输入输出,重新认识 hello world,重回那个激情燃烧的岁月1.1 输出函数print的规则1.2 输入函…

【Go】Go 文本匹配 - 正则表达式

正则表达式(Regular Expression, 缩写常用regex, regexp表示)是计算机科学中的一个概念,很多高级语言都支持正则表达式。 目录 何为正则表达式 语法规则 普通字符 字符转义 何为正则表达式 正则表达式是根据一定规则构建而出的规则&…

ClickHouse AST is too big 报错问题处理记录

ClickHouse AST is too big 报错问题处理记录 问题描述问题分析解决方案1、修改系统配置2、修改业务逻辑 问题描述 项目中统计报表的查询出现 AST is too big 问题,报错信息如下: 问题分析 报错信息显示 AST is too big。 AST 表示查询语法树中的最大…

C++线程库

C线程库是C11新增的重要的技术之一,接下来来简单学习一下吧! thread类常用接口 函数名功能thread()构造一个线程对象,没有关联任何线程函数,即没有启动任何线程。thread(fn, args1, args2, ...)构造一个线程对象,并…

04 mysql innodb record

前言 最近看到了 何登成 大佬的 "深入MySQL源码 -- Step By Step" 的 pdf 呵呵 似乎是找到了一些 方向 之前对于 mysql 方面的东西, 更多的仅仅是简单的使用[业务中的各种增删改查], 以及一些面试题的背诵 这里会参照 MySQL Internals Manual 来大致的看一下 i…

Opencv特征检测之ORB算法原理及应用详解

Opencv特征检测之ORB算法原理及应用详解 特征是图像信息的另一种数字表达形式。一组好的特征对于在指定 任务上的最终表现至关重要。视觉里程 (VO) 的主要问题是如何根据图像特征来估计相机运动。但是,整幅图像用来计算分析通常比较耗时,故而转换为分析图像中的特征点的运动…

深入解析 Axios Blob 的使用方法及技巧

在 Web 开发中,处理文件传输是一个常见的需求。Blob(二进制对象)是一种表示二进制数据的方式,常用于处理文件和多媒体数据。本文将介绍如何使用 Axios 和 Blob 来处理文件传输。 Axios Blob 概念 在开始之前,让我们先…

计算机视觉目标检测性能指标

目录 精确率(Precision)和召回率(Recall) F1分数(F1 Score) IoU(Intersection over Union) P-R曲线(Precision-Recall Curve)和 AP mAP(mean…

Spring Boot单元测试与Mybatis单表增删改查

目录 1. Spring Boot单元测试 1.1 什么是单元测试? 1.2 单元测试有哪些好处? 1.3 Spring Boot 单元测试使用 单元测试的实现步骤 1. 生成单元测试类 2. 添加单元测试代码 简单的断言说明 2. Mybatis 单表增删改查 2.1 单表查询 2.2 参数占位符 ${} 和 #{} ${} 和 …

VGG分类实战:猫狗分类

关于数据集 数据集选择的是Kaggle上的Cat and Dog,猫狗图片数量上达到了上万张。你可以通过这里进入Kaggle下载数据集Cat and Dog | Kaggle。 在我的Github仓库当中也放了猫狗图片各666张。 VGG网络 VGG的主要特点是使用了一系列具有相同尺寸 3x3 大小的卷积核进…

数据结构之动态内存管理机制

目录 数据结构之动态内存管理机制 占用块和空闲块 系统的内存管理 可利用空间表 分配存储空间的方式 空间分配与回收过程产生的问题 边界标识法管理动态内存 分配算法 回收算法 伙伴系统管理动态内存 可利用空间表中结点构成 分配算法 回收算法 总结 无用单元收…

PyTorch翻译官网教程-LANGUAGE MODELING WITH NN.TRANSFORMER AND TORCHTEXT

官网链接 Language Modeling with nn.Transformer and torchtext — PyTorch Tutorials 2.0.1cu117 documentation 使用 NN.TRANSFORMER 和 TORCHTEXT进行语言建模 这是一个关于训练模型使用nn.Transformer来预测序列中的下一个单词的教程。 PyTorch 1.2版本包含了一个基于论…

判断推理

六哥爱学习呀 产品经理 不是说我努力学习我就一定可以通过考试,所以是推不出,类似数学中充分必要性 8 回复 发布于 2019-08-07 16:28 官方解析: 当丙的范围足够大时,可能与甲相交或完全包含甲,在此情况下,有…

Python方式实现射后不管导弹的简易制导系统

1 问题 对QN-506上的S570智能反坦克制导导弹的射后不管产生了浓厚的兴趣,想用Python简易还原一下。 2 方法 之前查阅资料时了解到使用pygame库制作的贪吃蛇,是否有一种方法能让“贪吃蛇”一直跟着鼠标走呢?鼠标模拟行进中的坦克,“…

Linux 常见问题解决思路

Linux 常见问题解决思路 CPU 高系统平均负载高(load average) CPU 高 1,步骤:查找进程-》查找线程-》分析threadDump日志-》找出问题代码 a、查看 cpu 高的 java 进程 topb、生成进程下所有线程的栈日志 jstack 1721 > 1712.…

设计模式之单例设计模式

单例设计模式 2.1 孤独的太阳盘古开天,造日月星辰。2.2 饿汉造日2.3 懒汉的队伍2.4 大道至简 读《秒懂设计模式总结》 单例模式(Singleton)是一种非常简单且容易理解的设计模式。顾名思义,单例即单一的实例,确切地讲就是指在某个系统中只存在…

centos 7.9 部署django项目

1、部署框架 主要组件:nginx、uwsgi、django项目 访问页面流程:nginx---》uwsgi---》django---》uwsgi---》nginx 2、部署过程 操作系统:centos 7.9 配置信息:4核4G 50G 内网 eip :10.241.103.216 部署过程&…