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------------------------------------------------------");

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

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

相关文章

Flink之Java Table API的使用

Java Table API的使用 使用Java Table API开发添加依赖创建表环境创建表查询表输出表使用示例 表和流的转换流DataStream转换成表Table表Table转换成流DataStream示例数据类型 自定义函数UDF标量函数表函数聚合函数表聚合函数 API方法汇总基本方法列操作聚合操作Joins合并操作排…

智能优化算法(一):伪随机数的产生

文章目录 1.伪随机数介绍1.1.伪随机产生的意义1.2.伪随机产生的过程 2.产生U(0,1)的乘除同余法2.1.原始的乘同余法2.2.改进的乘同余法 3.产生正态分布的伪随机数4.基于逆变法产生伪随机数 1.伪随机数介绍 1.1.伪随机产生的意义 1.随机数的产生是进行随机优化的第一步也是最重要…

Qt QTableWidget表格的宽度

本文归属于 Qt实验室-CSDN博客 系列文章 默认值 QTableWIdget的表格宽度默认是一个给定值&#xff0c;可以手动调整每列的宽度&#xff0c;也不填满父窗口 MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {this->resize(800,600);QStringList contents{&q…

2023.11-9 hive数据仓库,概念,架构,元数据管理模式

目录 0.数据仓库和数据库 数据仓库和数据库的区别 数据仓库基础三层架构 一.HDFS、HBase、Hive的区别 二.大数据相关软件 三. Hive 的优缺点 1&#xff09;优点 2&#xff09;缺点 四. Hive 和数据库比较 1&#xff09;查询语言 2&#xff09;数据更新 3&#xff09;…

《视觉SLAM十四讲》-- 相机与图像

04 相机与图像 4.1 相机模型 4.1.1 针孔相机模型 针孔模型描述了一束光线通过针孔后&#xff0c;在针孔背面投影成像的关系&#xff08;类似小孔成像原理&#xff09;。 根据相似三角关系 Z f − X X ′ − Y Y ′ (3-1) \frac{Z}{f}-\frac{X}{X^{\prime}}-\frac{Y}{Y^{\p…

UART学习

uart.c #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_uart.h" // UART4_TX : PG11 AF6 // UART4_RX : PB2 AF8 void __uart_init() {// GPIOB2 设置为复用功能GPIOB->MODER & (~(0x3 << 4));GPIOB->MODER | (0x2 << 4);G…

5.图层控制器(DefaultOverlayManager)

愿你出走半生,归来仍是少年&#xff01; 图层控制器用于操作在MapView中的图层。 1.图层新增 voidadd(int pIndex, Overlay pElement)List<Overlay>overlays() 通过add方法可向MapView中新增一个图层&#xff0c;并指定其顺序。或者通过获取其图层的List,进行操作新增。…

算法与数据结构--前缀和

一维前缀和适用于计算某个一维数列某个数到某个数之间的累加和&#xff08;或者乘积&#xff0c;又或者异或和&#xff09;之类的。 比如计算某个一维度数列从i到j之间元素的和。最开始的想法就是从i遍历到j&#xff0c;将这之间的元素相加。但是当查询次数很多时候&#xff0…

基于DBO算法的WSN节点覆盖优化

先做一个声明&#xff1a;文章是由我的个人公众号中的推送直接复制粘贴而来&#xff0c;因此对智能优化算法感兴趣的朋友&#xff0c;可关注我的个人公众号&#xff1a;启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法&#xff0c;经典的&#xff0c;或者是近几年…

【EI会议征稿】第三届区块链、信息技术与智慧金融国际学术会议 (ICBIS2024)

第三届区块链、信息技术与智慧金融国际学术会议 (ICBIS2024) The 3rd International Academic Conference on Blockchain, Information Technology and Smart Finance 第三届区块链、信息技术与智慧金融国际学术会议 (ICBIS2024) 将于2024年2月23-25日在马来西亚举行。本次会…

数据结构-二叉排序树(建立、查找、修改)

二叉排序树概念 二叉排序树是动态查找表的一种&#xff0c;也是常用的表示方法。 其中&#xff0c;它具有如下性质&#xff1a; 1.若它的左子树非空&#xff0c;则其左子树的所有节点的关键值都小于根节点的关键值。 2.若它的右子树非空&#xff0c;则其右子树的所有节点的…

IP地址如何实现定位功能?

网络犯罪、保护网络安全的重要手段。近日&#xff0c;一则新闻引起了广大网友的关注&#xff1a;IP也能实现定位功能&#xff0c;这是如何做到的呢&#xff1f;本文将对此进行深入解析。 首先&#xff0c;我们需要了解什么是IP地址定位。IP地址定位是通过IP地址确定网络用户所在…

计算机视觉:使用opencv实现银行卡号识别

1 概述 1.1 opencv介绍 OpenCV是Open Source Computer Vision Library&#xff08;开源计算机视觉库&#xff09;的简称&#xff0c;由Intel公司在1999年提出建立&#xff0c;现在由Willow Garage提供运行支持&#xff0c;它是一个高度开源发行的计算机视觉库&#xff0c;可以…

我国陆地遥感卫星发展现状与展望

一、引言 从20世纪90年代末至今&#xff0c;我国陆地遥感卫星事业历经二十多年&#xff0c;实现了从无到有、从小到大、从弱到强的跨越发展。随着高分辨率对地观测系统重大专项&#xff08;高分专项&#xff09;、《陆海观测卫星业务发展规划&#xff08;2011—2020年&#xff…

vue3响应式api

响应式api——compositon api setup&#xff1a; 不要再想this问题执行是在beforeCreated之前 beforeCreated&#xff1a;也就是创建了一个实例 created&#xff1a;挂载了数据 通过形参props接收&#xff0c;只读 以后所有代码都写到setup中 判断是否只读&#xff1a;isReadon…

【杜利奥定律】热情让你的人生更精彩

&#x1f680;What kind of mentality&#xff08;/menˈtləti/&#xff09;, what kind of interpersonal relationships, and what kind of quality of life there is . &#x1f680; 有什么样的心态&#xff0c;就有什么样的人际关系&#xff0c;就有什么样的生活质量——…

【04】Istio的pilot流量分发机制

4.1 Pilot配置分发机制 Pilot负责网格数据平面相关配置信息的获取&#xff0c;生成&#xff0c;和分发&#xff0c;它通过Service Registry获取网格配置信息并将其转换为XDS接口的标准数据格式&#xff0c;而后经gRPC分发至相关的Envoy; Service Registry&#xff1a;服务注册表…

EXIT(1)

EXTI介绍 EXTI是片上外设 NVIC是cpu内的外设 回忆起之前的GPIO和AFIO 我们是如何检测按键按下的 我们是一直用while循环读取IDR寄存器的对应位置的值 一直检测判断按键是否被按下 那么是否有第二种方式检测按键是否被按下了呢&#xff1f; 通过EXTI 当EXTI检测到按键的电平发生…

【C++】【Opencv】minMaxLoc()函数详解和示例

minMaxLoc&#xff08;&#xff09;函数 是 OpenCV 库中的一个函数&#xff0c;用于找到一个多维数组中的最小值和最大值&#xff0c;以及它们的位置。这个函数对于处理图像和数组非常有用。本文通过参数和示例详解&#xff0c;帮助大家理解和使用该函数。 参数详解 函数原型…

将 ONLYOFFICE 文档编辑器与 С# 群件平台集成

在本文中&#xff0c;我们会向您展示 ONLYOFFICE 文档编辑器与其自有的协作平台集成。 ONLYOFFICE 是一款开源办公套件&#xff0c;包括文本文档、电子表格和演示文稿编辑器。这款套件支持用户通过文档编辑组件扩展第三方 web 应用的功能&#xff0c;可直接在应用的界面中使用。…