当前位置： 首页 > news >正文

Vue 组件化编程 和 生命周期

news 2026/2/10 7:31:22

目录

一、组件化编程

        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) 开发大型应用的时候&#xff0c;页面往往划分成…...

编程日记 2023/11/11 19:52:03

《数字图像处理-OpenCV/Python》连载（41）图像的旋转

《数字图像处理-OpenCV/Python》连载&#xff08;41&#xff09;图像的旋转 本书京东优惠购书链接&#xff1a;https://item.jd.com/14098452.html 本书CSDN独家连载专栏&#xff1a;https://blog.csdn.net/youcans/category_12418787.html 第 6 章 图像的几何变换 几何变换分…...

编程日记 2023/11/11 19:51:01

案例 - 拖拽上传文件,生成缩略图

直接看效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>拖拽上传文件</title>&l…...

编程日记 2023/11/11 19:50:00

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] …...

编程日记 2023/11/11 19:48:59

rv1126-rv1109-添加分区，定制固件，开机挂载功能

===================================================================== 修改分区： 这里是分区的txt文件选择； 这里是分区的划分，我这里回车了，方便看 FIRMWARE_VER: 8.1 MACHINE_MODEL: RV1126 MACHINE_ID: 007 MANUFACTURER: RV1126 MAGIC: 0x5041524B ATAG: 0x00200…...

编程日记 2023/11/11 19:46:57

一台电脑使用多个gitee账号，以及提交忽略部分文件

目录 ​编辑 一&#xff1a;前言 二&#xff1a;解决方法 三&#xff1a;提交gitee时忽略文件 一&#xff1a;前言 在开发中&#xff0c;我们拥有不止一个 gitee 账号&#xff0c;通常而言一个是公司的&#xff0c;一个是私人的。有时候我们在公司写了一些自己的东西&#…...

编程日记 2023/11/11 19:44:53

解析邮件文本内容； Mime文本解析； MimeStreamParser； multipart解析

原始文本 ------_Part_46705_715015081.1699589700255 Content-Type: text/html;charsetUTF-8 Content-Transfer-Encoding: base64PGh0bWwCiAgICA8aGVhZD4KICAgICAgICA8bWV0YSBodHRwLW VxdWl2PSJDb250ZW50LVR5cGUiIGNvbnRlbnQ9InRleHQvaHRt bDsgY2hhcnNldD1VVEYtOCICiAgICAgIC…...

编程日记 2023/11/11 19:43:52

获取请求IP以及IP解析成省份

某些业务需要获取请求IP以及将IP解析成省份之类的&#xff0c;于是我写了一个工具类&#xff0c;可以直接COPY /*** IP工具类* author xxl* since 2023/11/9*/ Slf4j public class IPUtils {/*** 过滤本地地址*/public static final String LOCAL_ADDRESS "127.0.0.1&quo…...

编程日记 2023/11/11 19:40:47

YOLOv8-seg改进：复现HIC-YOLOv5，HIC-YOLOv8-seg助力小目标分割

🚀🚀🚀本文改进：HIC-YOLOv8-seg：1)添加一个针对小物体的额外预测头，以提供更高分辨率的特征图2）在backbone和neck之间采用involution block来增加特征图的通道信息；3）在主干网末端加入 CBAM 的注意力机制； 🚀🚀🚀HIC-YOLOv8-seg小目标分割检测&复杂场景…...

编程日记 2023/11/11 19:39:47

vscode 终端进程启动失败: shell 可执行文件“C:\Windows\System32\WindowsPower

vscode 终端进程启动失败: shell 可执行文件“C:\Windows\System32\WindowsPower 第一次用vscode&#xff0c;然后遇到这个问题&#xff0c;在设置里搜索 terminal.integrated.defaultProfile.windows 将这里的null改成"Command Prompt" 重启就可以了...

编程日记 2023/11/11 19:38:46

【中间件篇-Redis缓存数据库02】Redis高级特性和应用(慢查询、Pipeline、事务、Lua)

Redis高级特性和应用(慢查询、Pipeline、事务、Lua) Redis的慢查询 许多存储系统&#xff08;例如 MySQL)提供慢查询日志帮助开发和运维人员定位系统存在的慢操作。所谓慢查询日志就是系统在命令执行前后计算每条命令的执行时间&#xff0c;当超过预设阀值,就将这条命令的相关…...

编程日记 2023/11/11 19:37:45

栈 和 队列

什么是栈? 一种特殊的线性表&#xff0c;只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出&#xff08;LIFO - Last In First Out&#xff09;的原则。   从数据结构的角度来看&…...

编程日记 2023/11/11 19:35:44

【推荐】一款AI写作大师、问答、绘画工具-「智元兔 AI」

在当今技术飞速发展的时代&#xff0c;越来越多的领域开始应用人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;。其中&#xff0c;AI写作工具备受瞩目&#xff0c;备受推崇。在众多的选择中&#xff0c;智元兔AI是一款在笔者使用过程中非常有帮助的…...

编程日记 2023/11/11 19:34:43

阿里云付费用户破100万 用户规模亚洲最大

导读阿里巴巴集团公布2018财年第一季度财报&#xff0c;阿里云达到一个重要里程碑&#xff0c;云计算付费用户数量首次超过100万&#xff0c;成为亚洲首家达到百万级用户规模的云计算公司。同时&#xff0c;企业级市场被云计算人工智能等新技术全面激活&#xff0c;推动该季度营…...

编程日记 2023/11/11 19:33:41

人工智能基础——Python：Matplotlib与绘图设计

人工智能的学习之路非常漫长&#xff0c;不少人因为学习路线不对或者学习内容不够专业而举步难行。不过别担心&#xff0c;我为大家整理了一份600多G的学习资源&#xff0c;基本上涵盖了人工智能学习的所有内容。点击下方链接,0元进群领取学习资源,让你的学习之路更加顺畅!记得…...

编程日记 2023/11/11 19:32:40

Ubuntu 配置 Github 的 SSH keys

先进入已有的 Git 目录或使用新建的一个 Git 仓库下。 设置 Github 用户名和邮箱&#xff1a; $ git config --global user.name [Github用户名] $ git config --global user.email [Github认证邮箱]生成 SSH 密钥文件&#xff1a; $ ssh-keygen -t rsa -C [Github认证邮箱]…...

编程日记 2023/11/11 19:31:39

Flink—— Flink Data transformation(转换)

Flink数据算子转换有很多类型&#xff0c;各位看官看好&#xff0c;接下来&#xff0c;演示其中的十八种类型。 1.Map&#xff08;映射转换&#xff09; DataStream → DataStream 将函数作用在集合中的每一个元素上,并返回作用后的结果&#xff0c;其中输入是一个数据流&…...

编程日记 2023/11/11 19:30:38

前端读取文件当文件选择相同文件名的文件，内容不会变化

前端读取文件当文件选择相同文件名的文件&#xff0c;内容不会变化 今天遇到个奇怪的bug&#xff0c;使用打开文件&#xff0c;并选择文件时&#xff0c;正常情况会读取文件信息。 但是如果先选择相同的文件名&#xff0c;则内容不会发生变化。 先说结论 只要不使用事件中e…...

编程日记 2023/11/11 19:29:36

PHP 服装销售管理系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp

一、源码特点 PHP 服装销售管理系统是一套完善的web设计系统mysql数据库 &#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 php服装销售管理系统1 二、功能介绍 (1)员工管理&#xff1a;对员工信息…...

编程日记 2023/11/11 19:28:35

用于图像处理的高斯滤波器 （LoG） 拉普拉斯

一、说明 欢迎来到拉普拉斯和高斯滤波器的拉普拉斯的故事。LoG是先进行高斯处理&#xff0c;继而进行拉普拉斯算子的图像处理算法。用拉普拉斯具有过零功能&#xff0c;实现边缘岭脊提取。 二、LoG算法简述 在这篇博客中&#xff0c;让我们看看拉普拉斯滤波器和高斯滤波器的拉普…...

编程日记 2023/11/11 19:27:34

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/2/10 4:40:33

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/30 10:30:15

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17