Vue/组件的生命周期

这篇文章借鉴了coderwhy大佬的Vue生命周期

在Vue实例化或者创建组件的过程中 内部涉及到一系列复杂的阶段 每一个阶段的前后时机都可能对应一个钩子函数 以下是我根据coderwhy大佬文章对于每一个阶段的一些看法

1.过程一

在这里插入图片描述
首先实例化Vue或者组件 在实例化之前 会对应一个钩子函数beforeCreate(如果未定义的话 肯定不会调用 以下同理) 在实例化之后 也会对应一个钩子函数created

2.过程二

在这里插入图片描述
实例化之后 会判断一下Vue实例中是否挂载了el属性(挂载意味着拿到某一个物品的控制权 可以控制它做事情) 如果挂载了 在判断一下是否挂载了template属性/组件 反之如果没有挂载el属性(即vue组件) 那就需要通过$mount(el)对Vue实例进行el元素的手动挂载 接着在判断是否存在template属性
如果存在template属性的话 那么就会先将其渲染为render函数(runtime compiler模式 即template->ast->render()->vdom->ui) 如果不存在的话 那么就是将render函数转换为虚拟dom最终生成组件ui的过程(runtime only模式 即render()->vdom->ui 该模式体积小 效率高)

3.过程三

在这里插入图片描述
该过程中 创建el指向的dom元素 并且将Vue实例挂载的template替换他 替换完成之时就是挂载完毕之时 在挂载前后存在两个钩子函数用于监听这两个时机
挂载(mount)完毕以后 如果template中的响应式数据发生了改变 那么需要重新渲染处vdom 和真实dom进行比对 以更新真实dom

4.过程四

在这里插入图片描述
当组件不再被挂载/使用时 这时候 组件就进入到了销毁阶段 而在销毁前后定义两个钩子函数用以监听这两个时机

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

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

相关文章

安装最新 MySQL 8.0 数据库(教学用)

安装 MySQL 8.0 数据库(教学用) 文章目录 安装 MySQL 8.0 数据库(教学用)前言MySQL历史一、第一步二、下载三、安装四、使用五、语法总结 前言 根据 DB-Engines 网站的数据库流行度排名(2024年)&#xff0…

用 rsync 的直接同步模式在服务器间同步文件

可以用 rsync 在服务器间同步文件、目录。使用 rsync 有两种模式,一是利用 ssh 的直接同步,二是利用 rsync 服务的模式。直接同步模式不要求有事先的设置工作,只需要有ssh服务即可使用。下面就是直接模式的同步命令示例: nohup r…

使用 Go 语言与 Redis 构建高效缓存与消息队列系统

什么是 Redis? Redis 是一个开源的内存数据库,支持多种数据结构,包括字符串、列表、集合、哈希和有序集合。由于 Redis 运行在内存中,读写速度极快,常被用于构建缓存系统、实时排行榜、会话存储和消息队列等高并发场景…

【浏览器】如何正确使用Microsoft Edge

1、清理主页广告 如今的Microsoft Edge 浏览器 主页太乱了,各种广告推送,点右上角⚙️设置,把快速链接、网站导航、信息提要、背景等全部关闭。这样你就能得到一个超级清爽的主页。 网站导航       关闭 …

十款文件防泄密软件推荐,保护您的重要信息

信息安全是现代社会不可忽视的重要话题,尤其是在工作和生活中接触到大量敏感数据时。选择合适的文件防泄密软件,可以有效防止信息泄露。以下是我们为您推荐的十款优秀软件。 Ping32 以高效的文件加密功能而闻名,Ping32 可以轻松保护您的文件&…

【JavaEE】——回显服务器的实现

阿华代码,不是逆风,就是我疯 你们的点赞收藏是我前进最大的动力!! 希望本文内容能够帮助到你!! 目录 一:引入 1:基本概念 二:UDP socket API使用 1:socke…

笔记||VUE3

侦听器 | Vue.js (vuejs.org) 模板引用 | Vue.js (vuejs.org)

R语言绘制散点图

散点图是一种在直角坐标系中用数据点直观呈现两个变量之间关系、可检测异常值并探索数据分布的可视化图表。它是一种常用的数据可视化工具,我们通过不同的参数调整和包的使用,可以创建出满足各种需求的散点图。 常用绘制散点图的函数有plot()函数和ggpl…

细说QT各种线程锁的特点和用法

文章目录 QMutex特点用法QReadWriteLock特点用法QSemaphore特点用法QWaitCondition特点用法在Qt框架中,提供了多种线程同步机制,包括互斥锁(Mutex)、读写锁(Read-Write Lock)、信号量(Semaphore)和条件变量(Wait Conditions)。这些机制用于处理多线程编程中的数据一致性和线程…

SpringCloud学习记录|day4

学习材料 2024最新SpringCloud微服务开发与实战,java黑马商城项目微服务实战开发(涵盖MybatisPlus、Docker、MQ、ES、Redis高级等) 网关 微服务下,好多不同地址和端口,而前端只知道8080,这怎么解决&…

《Programming from the Ground Up》阅读笔记:p217-p238

《Programming from the Ground Up》学习第11天,p217-p238总结,总计22页。 一、技术总结 1.C compiling p216, C compiling is split into two stages - the preprocessor and the main compiler。 注:感觉这个写法不好,因为p…

Java实体对象转换利器MapStruct详解

概述 现在的JAVA项目多数采用分层结构,参考《阿里巴巴JAVA开发手册》。 分层之后,每一层都有自己的领域模型,即不同类型的 Bean:  DO ( Data Object ) :与数据库表结构一一对应,…

acwing:1576. 再次树遍历

打卡一道有意义的题。 题签: 通过使用栈可以以非递归方式实现二叉树的中序遍历。 例如,假设遍历一个如下图所示的 66 节点的二叉树(节点编号从 11 到 66)。 则堆栈操作为:push(1); push(2); push(3); pop(); pop(); pu…

【HTML】defer 和 async 属性在 script 标签中分别有什么作用?

需要这两个属性的原因? 首先我们要知道的是,浏览器在解析 HTML 的过程中,遇到了 script 元素是不能继续构建 DOM 树的。 它会停止解析构建,首先去下载 js 代码,并且执行 js 的脚本;只有在等到 js 脚本执行…

nn.Identity()

在 PyTorch 中,nn.Identity()是一个简单的模块,它的作用是在模型中作为一个占位符或者不进行任何操作的层,直接返回输入。 一、使用方法 以下是一个简单的使用示例: import torch import torch.nn as nn# 创建一个 Identity 层…

AI训练 | 如何控制单篇文章不传给AI训练

随着生成式AI技术的普及,越来越多的企业开始使用AI工具来提升效率,但与此同时,关于AI训练的争议也越来越多。比如,2个月前字节跳动和WPS因为内容因为AI训练,引发了创作者的广泛讨论。这种对未经许可内容被“喂养”AI模…

draw.io创建自定义形状

Create custom shapes in draw.io using the text editor Reference draw怎么创建和编辑复杂的自定义形状 https://blog.csdn.net/u012028275/article/details/113828875 Create custom shapes in draw.io using the text editor

LeetCode讲解篇之377. 组合总和 Ⅳ

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 总和为target的元素组合个数 可以由 总和为target - nums[j]的元素组合个数 转换而来,其中j为nums所有元素的下标 而总和target - nums[j]的元素组合个数 可以由 总和为target - nums[j] - nums[k]的…

js短路求值

短路求值(short-circuit evaluation)是指在逻辑运算中,如果前面的表达式已经能够确定整个表达式的结果,后面的表达式就不会被执行。短路求值常见于逻辑运算符 &&(与)和 ||(或&#xff0…

C++模版SFIANE应用踩的一个小坑

一天一个C大佬同事&#xff0c;突然截图过来一段代码&#xff1a;这写的啥呀&#xff0c;啰里吧嗦的&#xff0c;这个构造函数模板参数T1感觉是多余的呀 template<class T> class TestClass { public:TestClass(){}//函数1template<class T1 T, std::enable_if_t<…