Vue 组件化编程 和 生命周期
目录
一、组件化编程
1.基本介绍 :
2.原理示意图 :
3.全局组件示例 :
4.局部组件示例 :
5.全局组件和局部组件的区别 :
二、生命周期
1.基本介绍 :
2.生命周期示意图 :
3.实例测试 :
一、组件化编程
1.基本介绍 :
(1) 开发大型应用的时候,页面往往划分成很多部分,不同的页面时常会有相同的部分,例如可能会有相同的头部导航条。
(2) 如果每个页面都独自开发,无疑增加了开发的成本。因此,可以将页面的不同部分拆分成独立的组件,然后在不同的页面共享这些组件,避免重复开发。
(3) 组件化编程与之前的“模块化编程”相比,范围和目标更加精准。
2.原理示意图 :
组件化编程基本原理示意图如下 :

PS :
(1) 组件(Component)是Vue.js最强大的功能之一。
(2) 组件也是一个Vue实例,拥有自己的data数据池和methods,生命周期函数等。
(3) 组件渲染需要HTML模板,所以增加了template属性,值就是HTML模板。
(4) 对于全局组件,任何Vue实例都可以直接在HTML中通过组件名称来使用组件。
(5) data不再是一个对象,而是一个函数,这样保证了每次引用组件都是独立的对象/数据。
3.全局组件示例 :
overall_components.html代码如下 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demonstrate overallComponents</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body><div id="app"><h2>组件化编程———全局组件</h2><!-- ... --><!-- 利用全局组件的名称来引用全局组件 --><counter></counter><br/> <br/><counter></counter></div><script type="text/javascript">/*(1) 定义一个全局组件,第一个参数表示该组件的名称,此处为“counter”;(2) 第二个参数———{}中表示的就是该组件相关的内容。(3) template用于指定该组件的View,由于要用到data数据池中的数据,因此要使用到ES6新特性———模板字符串``.(方便操作数据)(4) 组件也是一个Vue实例,拥有自己的data数据池和methods,生命周期函数等。(5) 对于组件来说,数据池中的数据要以函数/方法的形式来返回,与传统返回形式不同,这么做的目的是保证每个组件的数据都是独立的。*/Vue.component("counter", {template: `<button v-on:click="clickTest()">这个按钮被点了{{ count }}次🌶</button>`,// data: {// count: 5,// },data() {return {count: 5}},methods: {clickTest() {this.count++;}}})//传统Vue示例方式let vm = new Vue({el: "#app",data: {count: 5},methods: {// clickTest() {// this.count++;// }}})</script>
</body>
</html>
运行效果 : (如下GIF图)

4.局部组件示例 :
local_components.html代码如下 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demonstrate localComponents</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app"><h2 style="color: deepskyblue">组件化编程———局部组件</h2><!--因为引入局部组件的Vue实例挂载到了该div上,因此可以在该div中使用定义的局部组件。--><counter></counter><br/> <br/><counter></counter>
</div><script type="text/javascript">//1.定义一个局部组件(组件本质就是一个Vue实例)let buttonCounter = {template: `<button v-on:click="clickTest()">这个按钮被点了{{count}}次🌶</button>`,data() {return {count: 11}},methods: {clickTest() {this.count++;}}}//2.若想使用局部组件,需要在Vue实例中引入//此时局部组件的使用范围在当前Vuelet vm = new Vue({el: "#app",data: {},methods: {},components: {"counter": buttonCounter}})
</script>
</body>
</html>
运行结果 : (如下GIF)

5.全局组件和局部组件的区别 :
(1) 全局组件属于所有Vue实例,可以在所有Vue实例挂载的元素上使用[全局组件本质也是依赖于Vue实例],通过组件名就可以直接使用全局组件。
(2) 局部组件需要引入才能使用,只有引入了局部组件的Vue实例,其挂载的元素上才能使用定义的局部组件。
(3) 共性——组件的定义,必须在Vue实例的定义之前,否则无法识别。
二、生命周期
1.基本介绍 :
(1) Vue实例有一个完整的生命周期,从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程,称为Vue实例的生命周期。
(2) 每个Vue实例在被创建时都要经过一系列的初始化过程(比如设置数据监听、编译模板、将实例挂载到DOM、在数据变化时更新DOM等),同时在这个过程中也会运行一些叫做生命周期钩子的函数(也叫钩子函数、监听函数、生命周期函数),这给了用户在不同阶段添加自己的代码的机会。
2.生命周期示意图 :
如下图所示 :

(1) new Vue():
new了一个Vue实例对象,此时就会进入组件的创建过程。
(2) Init Events & Lifecycle:
初始化组件的事件和生命周期函数。
(3) beforeCreate:
组件创建之后遇到的第一个生命周期函数,这个阶段data和methods以及dom结构都未被初始化,即获取不到data的值,也不能调用methods中的函数。
(4) Init injections & reactivity:
这个阶段会初始化data和methods中的方法。
(5) created:
这个阶段组件的data和methods中的方法已初始化结束,可以访问,但是DOM结构未初始化,页面未渲染。
PS : 往往在“created”这个阶段发出Ajax请求,因为下一步就是编译模板。
(6) 编译模板结构
(7) beforeMount:
当模板在内存中编译完成时,此时内存中的模板结构还未渲染至页面上,看不到真正的数据。
(8) Create vm.$el and replace `el` with it:
把内存中渲染好的模板结构替换至真实的DOM结构,也就是页面上。
(9) mounted:
此时,页面已渲染好,用户看到的是真实的页面数据,生命周期创建阶段完毕,进入运行阶段。
(10) 生命周期运行中
(10.1) beforeUpdate:
当执行此钩子函数时,数据池的数据是新的,但是页面是旧的。
(10.2) Virtual DOM re-render and patch:
根据最新的data数据,重新渲染内存中的模板结构,并把渲染好的模板结构替换至页面上。
(10.3) updated:
页面已经完成了更新,此时,data数据池和页面的数据都是新的。
(11) beforeDestroy:
当执行此函数时,组件即将被销毁,但是还没有真正开始销毁,此时组件的data,methods数据或方法还可被调用。
(12) Teardown......:
注销组件和事件监听
(13) destroyed:
组件已经完成了销毁。
3.实例测试 :
在各个钩子函数中尝试打印出data数据池中的数据,调用methods中的方法,并获取DOM对象;以查看当前生命周期中能否使用data数据池中的数据,能否调用methods中的方法,能否获取到渲染后的DOM对象。
life_cycle.html代码如下 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Life cycle Demonstration</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body><div id="app"><span id="num">{{num}}</span><!-- @是v-on:的简写 --><button @click="num++">Like</button><h2>{{name}} has {{num}} likes</h2></div><script type="text/javascript">let vm = new Vue({el: "#app",data: {name: "Cyan_RA9",num: 5},methods: {getName() {return this.name;}},//组件创建后,遇到的第一个钩子函数beforeCreate() {console.log("beforeCreate~能否得到数据池中的数据?",this.name,this.num);//不能,在beforeCreate阶段调用methods中的方法会报错。// console.log("beforeCreate~能否使用methods中的方法?",this.getName());console.log("beforeCreate~能否得到渲染后的DOM对象",document.getElementById("num"));},//(4)Init injections & reactivity:这个阶段会初始化data和methods中的方法//(5)created:created() {console.log("created~能否得到数据池中的数据?",this.name,this.num);console.log("created~能否使用methods中的方法?",this.getName());console.log("created~能否得到渲染后的DOM对象",document.getElementById("num"));},//挂载DOM之前beforeMount() {console.log("beforeMount~能否得到数据池中的数据?",this.name,this.num);console.log("beforeMount~能否使用methods中的方法?",this.getName());console.log("beforeMount~能否得到渲染后的DOM对象",document.getElementById("num"));},//挂载DOM之后mounted() {console.log("mounted~能否得到数据池中的数据?",this.name,this.num);console.log("mounted~能否使用methods中的方法?",this.getName());console.log("mounted~能否得到渲染后的DOM对象",document.getElementById("num"));},//数据变化前,不会调用beforeUpdate钩子函数//只有当数据发生变化后,才会调用beforeUpdate钩子函数。beforeUpdate() {console.log("beforeUpdate~能否得到数据池中的数据?",this.name,this.num);console.log("beforeUpdate~能否使用methods中的方法?",this.getName());console.log("beforeUpdate~能否得到渲染后的DOM对象",document.getElementById("num"));console.log("beforeUpdate~能否得到渲染后的DOM对象",document.getElementById("num").innerText);},//调用beforeUpdate钩子时,还没更新页面。//需要等下一步Virtual DOM re-render and patch://根据最新的data数据,重新渲染内存中的模板结构,并把渲染好的模板结构替换至页面上。//接着调用updated钩子时,页面已经更新。updated() {console.log("updated~能否得到数据池中的数据?",this.name,this.num);console.log("updated~能否使用methods中的方法?",this.getName());console.log("updated~能否得到渲染后的DOM对象",document.getElementById("num"));console.log("beforeUpdate~能否得到渲染后的DOM对象",document.getElementById("num").innerText);},})</script>
</body>
</html>
运行效果 : (如下GIF图)

控制台打印出的结果如下 :

此时由于num属性的值还未变化,因此不会调用beforeUpdate钩子函数和updated钩子函数,
点击按钮修改num属性的值,会看到新的钩子函数被调用,如下图所示 :

System.out.println("END------------------------------------------------------");
相关文章:
Vue 组件化编程 和 生命周期
目录 一、组件化编程 1.基本介绍 : 2.原理示意图 : 3.全局组件示例 : 4.局部组件示例 : 5.全局组件和局部组件的区别 : 二、生命周期 1.基本介绍 : 2.生命周期示意图 : 3.实例测试 : 一、组件化编程 1.基本介绍 : (1) 开发大型应用的时候,页面往往划分成…...
《数字图像处理-OpenCV/Python》连载(41)图像的旋转
《数字图像处理-OpenCV/Python》连载(41)图像的旋转 本书京东优惠购书链接:https://item.jd.com/14098452.html 本书CSDN独家连载专栏:https://blog.csdn.net/youcans/category_12418787.html 第 6 章 图像的几何变换 几何变换分…...
案例 - 拖拽上传文件,生成缩略图
直接看效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>拖拽上传文件</title>&l…...
PHP 使用递归方式 将其二维数组整合为层级树 其中层级id 为一个uuid的格式 造成的诡异问题 已解决
不啰嗦 直接上源代码 <?php function findChildren($list, $p_id){$r array();foreach ($list as $k > $item) {if ($item[fid] $p_id) {unset($list[$k]);$length count($r);$r[$length] $item;if ($t findChildren($list, $item[id])) {$r[$length][children] …...
rv1126-rv1109-添加分区,定制固件,开机挂载功能
===================================================================== 修改分区: 这里是分区的txt文件选择; 这里是分区的划分,我这里回车了,方便看 FIRMWARE_VER: 8.1 MACHINE_MODEL: RV1126 MACHINE_ID: 007 MANUFACTURER: RV1126 MAGIC: 0x5041524B ATAG: 0x00200…...
一台电脑使用多个gitee账号,以及提交忽略部分文件
目录 编辑 一:前言 二:解决方法 三:提交gitee时忽略文件 一:前言 在开发中,我们拥有不止一个 gitee 账号,通常而言一个是公司的,一个是私人的。有时候我们在公司写了一些自己的东西&#…...
解析邮件文本内容; Mime文本解析; MimeStreamParser; multipart解析
原始文本 ------_Part_46705_715015081.1699589700255 Content-Type: text/html;charsetUTF-8 Content-Transfer-Encoding: base64PGh0bWwCiAgICA8aGVhZD4KICAgICAgICA8bWV0YSBodHRwLW VxdWl2PSJDb250ZW50LVR5cGUiIGNvbnRlbnQ9InRleHQvaHRt bDsgY2hhcnNldD1VVEYtOCICiAgICAgIC…...
获取请求IP以及IP解析成省份
某些业务需要获取请求IP以及将IP解析成省份之类的,于是我写了一个工具类,可以直接COPY /*** IP工具类* author xxl* since 2023/11/9*/ Slf4j public class IPUtils {/*** 过滤本地地址*/public static final String LOCAL_ADDRESS "127.0.0.1&quo…...
YOLOv8-seg改进:复现HIC-YOLOv5,HIC-YOLOv8-seg助力小目标分割
🚀🚀🚀本文改进:HIC-YOLOv8-seg:1)添加一个针对小物体的额外预测头,以提供更高分辨率的特征图2)在backbone和neck之间采用involution block来增加特征图的通道信息;3)在主干网末端加入 CBAM 的注意力机制; 🚀🚀🚀HIC-YOLOv8-seg小目标分割检测&复杂场景…...
vscode 终端进程启动失败: shell 可执行文件“C:\Windows\System32\WindowsPower
vscode 终端进程启动失败: shell 可执行文件“C:\Windows\System32\WindowsPower 第一次用vscode,然后遇到这个问题,在设置里搜索 terminal.integrated.defaultProfile.windows 将这里的null改成"Command Prompt" 重启就可以了...
【中间件篇-Redis缓存数据库02】Redis高级特性和应用(慢查询、Pipeline、事务、Lua)
Redis高级特性和应用(慢查询、Pipeline、事务、Lua) Redis的慢查询 许多存储系统(例如 MySQL)提供慢查询日志帮助开发和运维人员定位系统存在的慢操作。所谓慢查询日志就是系统在命令执行前后计算每条命令的执行时间,当超过预设阀值,就将这条命令的相关…...
栈 和 队列
什么是栈? 一种特殊的线性表,只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出(LIFO - Last In First Out)的原则。 从数据结构的角度来看&…...
【推荐】一款AI写作大师、问答、绘画工具-「智元兔 AI」
在当今技术飞速发展的时代,越来越多的领域开始应用人工智能(Artificial Intelligence,简称AI)。其中,AI写作工具备受瞩目,备受推崇。在众多的选择中,智元兔AI是一款在笔者使用过程中非常有帮助的…...
阿里云付费用户破100万 用户规模亚洲最大
导读阿里巴巴集团公布2018财年第一季度财报,阿里云达到一个重要里程碑,云计算付费用户数量首次超过100万,成为亚洲首家达到百万级用户规模的云计算公司。同时,企业级市场被云计算人工智能等新技术全面激活,推动该季度营…...
人工智能基础——Python:Matplotlib与绘图设计
人工智能的学习之路非常漫长,不少人因为学习路线不对或者学习内容不够专业而举步难行。不过别担心,我为大家整理了一份600多G的学习资源,基本上涵盖了人工智能学习的所有内容。点击下方链接,0元进群领取学习资源,让你的学习之路更加顺畅!记得…...
Ubuntu 配置 Github 的 SSH keys
先进入已有的 Git 目录或使用新建的一个 Git 仓库下。 设置 Github 用户名和邮箱: $ git config --global user.name [Github用户名] $ git config --global user.email [Github认证邮箱]生成 SSH 密钥文件: $ ssh-keygen -t rsa -C [Github认证邮箱]…...
Flink—— Flink Data transformation(转换)
Flink数据算子转换有很多类型,各位看官看好,接下来,演示其中的十八种类型。 1.Map(映射转换) DataStream → DataStream 将函数作用在集合中的每一个元素上,并返回作用后的结果,其中输入是一个数据流&…...
前端读取文件当文件选择相同文件名的文件,内容不会变化
前端读取文件当文件选择相同文件名的文件,内容不会变化 今天遇到个奇怪的bug,使用打开文件,并选择文件时,正常情况会读取文件信息。 但是如果先选择相同的文件名,则内容不会发生变化。 先说结论 只要不使用事件中e…...
PHP 服装销售管理系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp
一、源码特点 PHP 服装销售管理系统是一套完善的web设计系统mysql数据库 ,对理解php编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 php服装销售管理系统1 二、功能介绍 (1)员工管理:对员工信息…...
用于图像处理的高斯滤波器 (LoG) 拉普拉斯
一、说明 欢迎来到拉普拉斯和高斯滤波器的拉普拉斯的故事。LoG是先进行高斯处理,继而进行拉普拉斯算子的图像处理算法。用拉普拉斯具有过零功能,实现边缘岭脊提取。 二、LoG算法简述 在这篇博客中,让我们看看拉普拉斯滤波器和高斯滤波器的拉普…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
