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

Vue 组件化编程 和 生命周期

news 2026/2/10 0:05:07

目录

一、组件化编程

        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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/9 18:19:34

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/24 14:31:01

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2026/2/9 20:30:28

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2026/1/17 14:57:41

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

编程新知 2025/8/17 3:31:21

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2026/2/4 17:28:54