vue2生命周期图

生命周期全过程如下👇详解

一:生命周期之创建阶段
1.创建一个Vue实例【new Vue()】
2.初始化Vue实例,第一次初始化,初始化Vue当中的事件和生命周期方法【Init Events Lifecycle】

☆☆☆调用生命周期方法当中的beforCreate,调用这个方法的时候有一个特点,就是在调用
☆☆☆beforCreate方法的时候,此时Vue实例刚刚才被创建出来,此时还没有初始化好data里面的数据以及methods属性
☆☆☆因此我们在beforCreate函数执行时期是无法访问data里面的数据以及methods属性内部的方法

★★★初始化Vue实例当中的数据,经过第二次的初始化后data内部的数据已经有了,并且methods属性也初始化成功了!Init injections&reactivity
★★★经过了第二次初始化后马上就执行Create这个生命周期函数
★★★在执行Create时期这个生命周期方法内部数据已经初始化完成,所以此时打印data内部的数据或者使用methods是可以使用的.

然后进入create函数后,beforeMount函数前的时期,这个时期开始编译模板,根据data中的数据和指令生成一个HTML模板,
注意此时编译的HTML模板还没有渲染到界面上,仅存在于内存中.
然后调用breforeMount函数,此时因为模板并没有渲染到真实的DOM上,所以我们获取DOM上某个标签包含data数据的innerHTML或者innerText是无法获取的打印的话会返回undefined

因为前面我们生成了HTML模板存储在内存当中,经过beforemount函数之后,它就会把HTML模板渲染到真实的DOM当中渲染完成后调用Mount函数,所以我们在Mount函数
当中获取/打印包含data数据的或者已经写好在挂载DOM上的模板HTML DOM的时候,因为在这个时期已经渲染在真实DOM上了,所以是可以打印或者输出的

二:生命周期之运行阶段
更新阶段说明:如果data内部的数据发生了变化才 会执行更新阶段,并且执行更新新阶段的函数,如果data数据不变化就不会执行更新阶段.
更新阶段执行完mount函数之后,会实时监听data内部的数据,如果数据发生变化就马上执行beforeUpdate函数,
beforeUpdate函数执行时,data里面的数据已经更新了,但是data的数据并没有渲染在真实的DOM上,
等beforeUpdate函数执行完全后,会根据data更新后的数据重新生成HTML内容,然后替换掉原先的老数据的HTML内容即更新到真实DOM上
当更新到真实DOM结束之后就会调用Updated函数。

三:生命周期之销毁阶段
如果我们使用v-if销毁/或者执行销毁组件的操作的时候才会执行销毁的函数
只要组件不被销毁就不会调beforeDestroy函数
beforeDestroy函数内部是最后一个能够访问到组件内部数据和方法的函数
注意:destroyed函数内部有些可以有些不可以访问到组件内部的数据
操作组件内部的数据或者方法最后只能在这个beforeDestroy函数内部操作不可以在destroyed操作

请添加图片描述

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

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

相关文章

Matlab中实现对一幅图上的局部区域进行放大

大家好,我是带我去滑雪! 局部放大图可以展示图像中的细节信息,使图像更加直观和精美,此次使用magnify工具实现对绘制的figure选择区域绘制,图像效果如下: 1、基本图像绘制 这里选择绘制一个散点图&#xff…

mysql中的‘\G’ ‘\g’ ‘;’ navicat dbeaver

省流: 在navicat、dbeaver等客户端中使用时,“\G”、“\g”、“;”都可以不需要。 “\G”、“\g”、“;”都是用来做sql的结束符用。“\g”、“;”作用完全等价。“\G”是将字段横排显示转换成纵列显示。 横排显示: id |e…

前端:运用html+css+js模仿百度热搜电影榜鼠标移入特效

前端:运用htmlcssjs模仿百度热搜电影榜鼠标移入特效 1. 实现原理2. 界面布局3. js实现对鼠标移入和移出的监听4. 参考代码如下: 1. 实现原理 百度热搜上电影榜鼠标移入特效如上图所示。个人觉得上述特效实现原理为使用相对定位、绝对定位实现的(鼠标移入和没有移入…

自己实现SpringMVC 底层机制[二]

文章目录 自己实现SpringMVC 底层机制[二]实现任务阶段3- 从web.xml 动态获取myspringmvc.xml分图析示意代码实现 实现任务阶段4- 完成自定义Service 注解功能。分析示意图代码实现完成测试(启动Tomcat, 自动加载MyDispatcherServlet, 完成IOC 容器的注入)。 自己实现SpringMVC…

springboot集成logback按日志级别按天保存

演示结果 集成logback后项目启动控制台不会有日志输出 生成的日志文件路径windows上是默认D盘,linux上可自定义 代码实现 pom.xml <dependency><groupId>ch.qos.logback</groupId>

C# Modbus通信从入门到精通(21)——Modbus TCP协议原理

Modbus TCP是走网口的&#xff0c;也可以在同一时间内有多个从站访问主站&#xff0c;并且通过Modbus事务处理标识来区分同一时刻的不同Modbus事务&#xff0c;这是区别于Modbus ASCII和Modbus RTU的地方。 1、访问模式&#xff1a; Modbus客户端通常输入Modbus服务器的IP地址…

简单模拟Mybatis通过注解查询SQL

通过自定义注解&#xff0c;简单模拟Mybatis通过注解查询SQL。 首先&#xff0c;创建自定义注解MyDao和MySelect。 MyDao.java Target({ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) public interface MyDao {String[] value() default {}; }MySelect.java Targ…

AI面试官:LINQ和Lambda表达式(一)

AI面试官&#xff1a;LINQ和Lambda表达式&#xff08;一&#xff09; 当面试官面对C#中关于LINQ和Lambda表达式的面试题时&#xff0c;通常会涉及这两个主题的基本概念、用法、实际应用以及与其他相关技术的对比等。以下是一些可能的面试题目&#xff0c;附带简要解答和相关案…

HTML <option> 标签

实例 创建带有 4 个选项的选择列表: <select><option value ="volvo">Volvo</option><option value ="saab">Saab</option><option value="opel">Opel</option><option value="audi"…

Server - 调用 K8S 集群 GPU 环境运行算法脚本

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131899662 Kubeflow 是基于 Kubernetes 的机器学习工具包&#xff0c;提供了一套技术栈&#xff0c;包含了很多组件&#xff0c;用于支持…

使用RestTemplate访问内部服务时返回的json字符串未做转换处理之后再次返回json字符到前台导致json字符串无法解析的解决办法

1. 以下是使用RestTemplate调用接口的方法 RequestMapping("/getQrList") //获取qrlable列表String getQrList(Qr qr) {//返回的数据本身就是 ResponBody也就是json&#xff0c;当前方法再次返回json&#xff0c;就会导致导出时无法解析数据&#xff08;table是能…

SQL SERVER安装

其中服务器名称输入./自己本机电脑名称. nchar类型一个单位可以放一个汉字-------长度短的补空格一个字节8位一个汉字两个字节 char类型两个单位可以放一个汉字 nvarchar类型是可变长度-----------长度短不会补空格 varchar类型是可变长度两个单位可以放一个汉字---------…

GStreamer Basic tutorial 学习笔记(十三)

1 播放速度 GStreamer提供了两种改变播放速度的机制&#xff1a;步进事件&#xff08;Step Events&#xff09;和搜索事件&#xff08;Seek Events&#xff09;。步进事件允许跳过一定量的媒体&#xff0c;并改变随后的播放速度&#xff08;只能为正值&#xff09;。搜索事件还…

“深入解析Spring Boot:从入门到实战“

标题&#xff1a;深入解析Spring Boot&#xff1a;从入门到实战 摘要&#xff1a;本篇博客将深入解析Spring Boot&#xff0c;从入门到实战&#xff0c;帮助读者了解Spring Boot的核心概念、特性和使用方法&#xff0c;并通过示例代码演示如何使用Spring Boot开发一个简单的We…

Python3 unittest学习

Python3 unittest学习 unittest单元测试框架基本结构执行测试普通方式执行通过unittest模块执行 跳过测试与预期失败使用子测试区分测试迭代类与函数class unittest.TestCase(methodNamerunTest)用于运行测试的方法断言方法其他方法和属性 class unittest.IsolatedAsyncioTestC…

JVM五大内存模型

什么是JVM JVM是Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;JVM是一个虚构出来的计算机&#xff0c;有着自己完善的硬件架构&#xff0c;如处理器、堆栈等。 JVM的作用 Java语言使用Java虚拟机屏蔽了与具体平台相关的信息&#xff0c;使得Jav…

Istio Pilot源码学习(三):xDS的异步分发

本文基于Istio 1.18.0版本进行源码学习 5、xDS的异步分发 DiscoveryService主要包含下述逻辑&#xff1a; 启动GRPC Server并接收来自Envoy端的连接请求接收Envoy端的xDS请求&#xff0c;从ConfigController和ServiceController中获取配置和服务信息&#xff0c;生成响应消息…

文心一言 VS 讯飞星火 VS chatgpt (64)-- 算法导论6.5 3题

文心一言 VS 讯飞星火 VS chatgpt &#xff08;64&#xff09;-- 算法导论6.5 3题 三、要求用最小堆实现最小优先队列&#xff0c;请写出 HEAP-MINIMUM、HEAP-EXTRACT-MIN、HEAP DECREASE-KEY 和 MIN-HEAP-INSERT 的伪代码。 文心一言&#xff1a; 以下是使用最小堆实现最小…

国内攻克OLED屏幕修复术,成本暴降2/3不用拆机换屏

连着许多年各家手机发布会&#xff0c;屏幕基本是会花大精力宣传的三大件之一 也对&#xff0c;无论是外观还是实际的视觉、操作体验&#xff0c;屏幕都是非常重要的一环。 屏幕素质越来越高&#xff0c;用着也的确更爽了&#xff0c;但也越来越不敢摔了。 普普通通的一块 60…