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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pg 简单查询语句

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

清风数学建模——拟合算法

拟合算法 文章目录 拟合算法概念 确定拟合曲线最小二乘法的几何解释求解最小二乘法matlab求解最小二乘法如何评价拟合的好坏计算拟合优度的代码 概念 在前面的篇幅中提到可以使用插值算法,通过给定的样本点推算出一定的曲线从而推算出一些想要的值。但存在一些问题…

基于OFDM+64QAM系统的载波同步matlab仿真,输出误码率,星座图,鉴相器,锁相环频率响应以及NCO等

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 2.1 OFDM原理 2.2 64QAM调制 2.3 载波同步 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ............................................…

AI Chat 设计模式:15. 桥接模式

本文是该系列的第十五篇,采用问答式的方式展开,问题由我提出,答案由 Chat AI 作出,灰色背景的文字则主要是我的一些思考和补充。 问题列表 Q.1 如果你是第一次接触桥接模式,那么你会有哪些疑问呢?A.1Q.2 什…

TCP服务器—实现数据通信

目录 前言 1.接口介绍 2.编写服务器 3.编写客户端 4.编译链接 5.测试 6.总结 前言 今天我们要介绍的是使用TCP协议实现数据通信,相比于之前写的UDP服务器实现数据信,在主体逻辑上并没有差别。客户端向服务器发送信息,服务器接受信息并回…

【项目设计】从零实现一个高并发内存池

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

【C++学习手札】一文带你初识运算符重载

食用指南:本文在有C基础的情况下食用更佳 🍀本文前置知识: C类 ♈️今日夜电波:クリームソーダとシャンデリア—Edo_Ame江户糖 1:20 ━━━━━━️💟──────── 3:40 …

Python中的字符串与字符编码

Hello,这里是Token_w的博客,欢迎您的到来 今天文章讲解的是Python中的字符串与字符编码,其中有基础的理论知识讲解,也有实战中的应用讲解,希望对你有所帮助 整理不易,如对你有所帮助,希望能得到…

分类预测 | MATLAB实现EVO-CNN多输入分类预测

分类预测 | MATLAB实现EVO-CNN多输入分类预测 目录 分类预测 | MATLAB实现EVO-CNN多输入分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现EVO-CNN多输入分类预测 2.代码说明:量谷优化卷积神经网络的数据分类预测:要求于Matlab …

Element Plus报错:ResizeObserver loop completed with undelivered notifications.

el-selected踩坑&#xff1a;el-selected 显示下拉框 mouseover 时报错&#xff01;&#xff01;&#xff01; 原来是属性 popper-append-to-body 被废除&#xff0c;改为 teleported。 element ui <el-select:popper-append-to-body"false"value-key"id&q…

【数据库】Sql Server可视化工具SSMS条件和SQL窗格以及版本信息

2023年&#xff0c;第34周&#xff0c;第1篇文章。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; SQL SERVER 官方本身就有数据库可视化管理工具SSMS&#xff0c;所以大部分都会使用SSMS。以前版本是直接捆绑&#xff0c; 安装完成就自带有…

从零开始学习 Java:简单易懂的入门指南之MAth、System(十二)

常见API&#xff0c;MAth、System 1 Math类1.1 概述1.2 常见方法1.3 算法小题(质数)1.4 算法小题(自幂数) 2 System类2.1 概述2.2 常见方法 1 Math类 1.1 概述 tips&#xff1a;了解内容 查看API文档&#xff0c;我们可以看到API文档中关于Math类的定义如下&#xff1a; Math类…

VR时代真的到来了?

业界对苹果的期待是&#xff0c;打造一台真正颠覆性的&#xff0c;给头显设备奠定发展逻辑底座的产品&#xff0c;而实际上&#xff0c;苹果只是发布了一台更强大的头显。 大众希望苹果回答的问题是“我为什么需要一台AR或者VR产品&#xff1f;”&#xff0c;但苹果回答的是“…

R语言 列表中嵌套列名一致的多个数据框如何整合为一个数据框

在批量建模后容易得到list&#xff0c;list中的每个元素都是单个的tibble 或者 dataframe&#xff0c;如何将这些数据整合为一张表呢&#xff1f; 载入R包 library(broom) library(tidyverse) 模拟数据 models <- txhousing %>% group_by(city) %>% do(modlm(lo…

leetcode 917.仅仅反转字母

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;仅仅反转字母 ps&#xff1a; 这道题思路很简单&#xff0c;只需要一个下标在前一个下标在后&#xff0c;分别找是字母的字符&#xff0c;找到之后交换即可。 代码&#xff1a; class Solution { public:bool isAlpha …

四、Controller 配置总结、RestFul 风格

文章目录 一、Controller 配置总结二、RestFul 风格2.1 使用 RequestMapping 的 method 属性指定请求类型 三、扩展&#xff1a;小黄鸭调试法 一、Controller 配置总结 实现 Controller 控制器的方式 实现 Controller 接口&#xff0c;重写 handleRequest 方法实现 控制器实现 …

小程序开发中事件绑定的执行方法

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为&#xff0c;反馈到逻辑层进行业务的处理。小程序中常用属性和绑定方式如下&#xff1a; 当事件回调触发的时候&#xff0c;会收到一个事件对象 event&#xff0c;它的详细属性如下表所示&#xff1a; …

Unity游戏源码分享-中国象棋Unity5.6版本

Unity游戏源码分享-中国象棋Unity5.6版本 项目地址&#xff1a; https://download.csdn.net/download/Highning0007/88215699

HTML5的介绍和基本框架

目录 HTML5 HTML5介绍 HTML5的DOCTYPE声明 HTML5基本骨架 html标签 head标签 body标签 title标签 meta标签 在vscode中写出第一个小框架 HTML5 HTML5介绍 HTML5是用来描述网页的一种语言&#xff0c;被称为超文本标记语言。用HTML5编写的文件&#xff0c;后缀以.ht…

jenkins自动化构建保姆级教程(持续更新中)

1.安装 1.1版本说明 访问jenkins官网 https://www.jenkins.io/&#xff0c;进入到首页 点击【Download】按钮进入到jenkins下载界面 左侧显示的是最新的长期支持版本&#xff0c;右侧显示的是最新的可测试版本&#xff08;可能不稳定&#xff09;&#xff0c;建议使用最新的…