六、组件的生命周期与组件间之间的数据共享

news2024/11/15 21:41:22

一、组件的生命周期

1.1、生命周期 & 生命周期函数

生命周期(Life Cycle)是指一个组件从创建远行销毁的整个阶段,强调的是一个时间段
生命周期函数:是由vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行
注意:生命周期强调的是时间段生命周期函数强调的是时间点

1.2、组件生命周期函数的分类

在这里插入图片描述

1.3、生命周期图示

可以参考 vue 官方文档给出的"生命周期图示",进一步理解组件生命周期执行的过程:
https://v2.cn.vuejs.org/v2/guide/instance.html → 生命周期图示
在这里插入图片描述

1.3.1、beforeCreate

组件的 props / data / methods尚未被创建,都处于不可用状态。
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

1.3.2、created

组件的props / data / methods已创建好,都处于可用的状态。但是组件的模板结构尚未生成
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述

1.3.3、beforeMount

将要把内存中编译好的 HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构。
在这里插入图片描述在这里插入图片描述

1.3.4、mounted

已经把内存中的 HTML 结构,成功的渲染到了浏览器之中。此时浏览器中已然包含了当前组件的DOM结构
在这里插入图片描述在这里插入图片描述

1.3.5、beforeUpdate

将要根据变化过后、最新的数据,重新渲染组件的模板结构。
在这里插入图片描述在这里插入图片描述

1.3.6、updated

已经根据最新的数据,完成了组件 DOM 结构的 重新渲染
在这里插入图片描述在这里插入图片描述

1.3.7、beforeDestory

将要销毁此组件,此时尚未销毁,组件还处于正常工作的状态。
在这里插入图片描述在这里插入图片描述

1.3.8、destroyed

组件已经被销毁,此组件在浏览器中对应的 DOM结构已被完全移除

1.4、总结

在这里插入图片描述

二、组件之间的数据共享

2.1、组件之间的关系

在项目开发中,组件之间的最常见的关系分为如下两种:父子关系兄弟关系
在这里插入图片描述

2.2、父子组件之间的数据共享

父子组件之间的数据共享又分为:父→子共享数据、子→父共享数据

2.2.1、父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性。示例代码如下:
在这里插入图片描述在这里插入图片描述

2.2.2、子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。示例代码如下:
在这里插入图片描述在这里插入图片描述

2.3、兄弟组件之间的数据共享

vue2.x中,兄弟组件之间数据共享的方案是EventBus
在这里插入图片描述
EventBus 的使用步骤

  1. 创建eventBus.js模块,并向外共享一个 Vue的实例对象
  2. 在数据发送方,调用bus.$emit(‘事件名称’,要发送的数据)方法触发自定义事件
  3. 在数据接收方,调用bus.$on(‘事件名称’,事件处理函数)方法注册一个自定义事件

在这里插入图片描述在这里插入图片描述

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

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

相关文章

阿里云安装mysql、nginx、redis

目录 安装mysql 安装nginx ​编辑安装redis 先看一下系统基本信息 安装mysql rpm -qa | grep mariadb 卸载mariadb rpm -e --nodeps mariadb-libs-5.5.68-1.el7.x86_64 wget -i http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm yum -y install my…

【使用 BERT 的问答系统】第 7 章 :BERT 模型的未来

🔎大家好,我是Sonhhxg_柒,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流🔎 📝个人主页-Sonhhxg_柒的博客_CSDN博客 📃 🎁欢迎各位→点赞…

(八) 共享模型之管程【活跃性】

一、多把锁(P114) 一间大屋子有两个功能:睡觉、学习,互不相干。 现在小南要学习,小女要睡觉,但如果只用一间屋子(一个对象锁)的话,那么并发度很低 解决方法是准备多个房间…

项目复习:基于TCP的文件服务器

ser.c(服务器): #include "./fun.h"int main(int argc,const char * argv[]) {//1.判断入参if(argc!3){fprintf(stderr,"入参为空,请检查\n");return -1;}//端口号转整型int portatoi(argv[2]);//变量声明struct sockaddr_in sin;int sinLensi…

axios.defaults.baseURL的三种配置方法

axios.defaults.baseURL的三种配置方法目录概述需求:设计思路实现思路分析1.少2.2.动态获取请求地址3.3.采用配置文件参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full busy,skip hardness,m…

SEAL 0.3 正式发布:国内首个全链路软件供应链安全管理平台

12月1日,软件供应链安全管理平台 SEAL 0.3 正式发布(以下简称“SEAL”),这是国内首个以全链路视角保护软件供应链的安全管理平台。两个月前 SEAL 0.2 发布,该版本创新性地提供了依赖项的全局汇总与关联,用户…

DSP篇--C6678功能调试系列之SPI调试

目录 1、初始化 2、数据传输 1、初始化 Perform the following procedure for initializing the SPI: 1. Reset the SPI by clearing the RESET bit in the SPI global control register 0 (SPIGCR0) to 0. 2. Take the SPI out of reset by setting SPIGCR0.RESET to 1. 3. …

【使用 BERT 的问答系统】第 6 章 :BERT 模型应用:其他任务

🔎大家好,我是Sonhhxg_柒,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流🔎 📝个人主页-Sonhhxg_柒的博客_CSDN博客 📃 🎁欢迎各位→点赞…

【大数据入门核心技术-Zookeeper】(三)Zookeeper的选举机制和流程

目录 一、Zookeeper的选举机制 1、每一个 Server 都会发出一个投票 2、接收来自各个 Server 的投票 3、处理投票 4、统计投票 5、改变服务器状态 二、Zookeeper的选举流程 一、Zookeeper的选举机制 Zookeeper 在配置文件中并没有指定 Master 和 Slave。但是,…

软件测试培训之十个无脚本测试方案

1.自然语言处理(NLP) 目前,一些最新的无脚本自动化测试工具能够通过采用NLP语法,来创建各种测试用例。就像编写简单的英语语句一样,用户可以轻松地实现测试用例的自动化。此类工具一般会带有AI驱动的内核,因此大幅节省了用户对其维…

【遥感图像融合:梯度指导:纹理细节】

GTP-PNet: A residual learning network based on gradient transformation prior for pansharpening (一种基于梯度变换的剩余学习网络) 提出了一种基于梯度变换先验的残差学习网络GTP-PNet,用于生成光谱分布准确、空间结构合理的高质量HRM…

车间生产设备管理有哪些问题?低代码来助力

随着科学技术对生产技术与生产工艺流程的不断改革创新,同时受市场变化的影响,企业生产管理模式也发生了巨大的改变,对车间生产设备管理的要求更高,并在一定层面推动了车间生产设备管理模式的创新和转变发展。但由于不同的企业面对…

JavaScript---DOM---DOM简介、获取元素、事件基础、操作元素---11.5

DOM简介 什么是DOM 文档对象模型(Document Object Model,简称DOM)是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、…

[附源码]计算机毕业设计springboot学生宿舍管理系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

如何在 Windows 10/8.1/8/7 上无密码删除 Deep Freeze

如何在 Windows 10/8.1/8/7 上无密码删除 Deep Freeze 有些人认真对待计算机安全问题。这些人会安装 Deep Freeze 冰点来保护他们的计算机。该应用程序的便利之处在于它会在重新启动时将计算机恢复到原始的预设配置。因此,可以轻松消除重启之间发生的任何变化&#…

海量数据如何在Web端实现动态可视化?看看这家企业是怎么做的

“我们TestLogger公司是一家赛车行业的软件公司,主要是通过分析在赛道上多个传感器收集到的赛车数据,帮助提高赛车性能。TestLogger Analyzer就是其中的一款核心数据分析工具,在我们构建该工具的第一个产品原型时,就发现由于不同类…

(附源码课件)10款Java小游戏满足你各种需求

游戏推荐 黄金矿工项目 飞机大战项目 超级玛丽项目 坦克大战项目 大鱼吃小鱼项目 飞翔的小鸟项目 扫雷项目 贪吃蛇项目 推箱子项目 本套视频课程包含: 1、王者荣耀项目 开发环境:jdk1.8 开发工具:eclipse JavaEE基础如下:变量、数据类型…

[附源码]计算机毕业设计springboot校友社交系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

uni-app入门:自定义tabbar

本文介绍如何使用vant Weapp定义自定义tabbar.按照自定义图标的方式进行添加: 自定义tabbar微信官方链接: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 1.导入vant weapp并构建npm 项目根目录右键选择外部终端窗口中打开 …

Numpy入门[2]——Matplotlib 基础

Numpy入门[2]——Matplotlib 基础 参考: https://ailearning.apachecn.org/ Python直接使用plot()函数画图 使用Jupyter进行练习 在使用Numpy之前,需要了解一些画图的基础。 Matplotlib是一个类似Matlab的工具包,主页地址为 http://matplot…