前端学习--Vue(4) 生命周期

news2024/11/19 2:41:41

一、组件的生命周期

一个组件从创建-运行-销毁的真个阶段,强调的是一个时间段

1.1 生命周期函数

 1.1.1 创建

(只执行一次)

created()

阶段任务:最早可以使用methods中的方法发起ajax请求获取数据,并将数据挂载到data中

mounted()

阶段任务:最早可以操作dom元素

1.1.2 运行

(最少0次,最多n次)

beforeUpdate()

触发时机:数据发生变化

此时数据最新,但是UI结构还未变化

updated()

UI结构完成变化

阶段任务:数据变化后操作最新的dom结构

1.1.3 销毁

(只执行一次)

destroyed()

二、组件之间的数据共享

组件关系

父子

兄弟

2.1 父组件向子组件共享数据

使用自定义属性

 2.2 子组件向父组件共享数据

自定义事件

 2.3 兄弟之间数据共享

EventBus

① 创建 eventBus.js 模块,并向外共享一个 Vue 的实例对象

② 在数据发送方,调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

③ 在数据接收方,调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

 三、ref引用

jQuery简化程序员操作dom的过程

vue中程序员不需要操作dom,只需要维护数据(数据驱动视图)

3.1 概念

ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。

每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。

默认情况下, 组件的 $refs 指向一个空对象。

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

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

相关文章

论文阅读笔记(三)——有监督解耦+信息瓶颈

论文信息 《Disentangled Information Bottleneck》 论文地址:https://ojs.aaai.org/index.php/AAAI/article/view/17120 代码地址:GitHub - PanZiqiAI/disentangled-information-bottleneck inproceedings{pan2021disentangled, title{Disentangled in…

vue3与vue2共存环境搭建

1、全局安装vue2 npm install vue-cli -g2、自行在任意位置创建一个文件夹,局部安装vue3 npm初始化 npm initnpm初始化 提示: 初始化后 出现文件package.json 如果没有初始化 会报错,且文件夹中不会新增内容 3、局部安装vue3 npm install …

一名优秀的黑客,具备的有哪些特质

想要成为网络hacker黑客?十个必会的特质 一、基本的计算机知识 把它列为第一条,相信很多人肯定会觉得不以为然,其实掌握必要的计算机知识对黑客入门非常重要。这些包括:计算机硬件的组成、操作系统的安装、Windows批处理命令、命…

LeetCode_DFS_困难_1377.T 秒后青蛙的位置

目录 1.题目2.思路3.代码实现(Java) 1.题目 给你一棵由 n 个顶点组成的无向树,顶点编号从 1 到 n。青蛙从 顶点 1 开始起跳。规则如下: 在一秒内,青蛙从它所在的当前顶点跳到另一个未访问过的顶点(如果它…

apt remove purge的区别 删除包的同时删除配置文件

1、apt remove purge的区别 查看 man apt apt remove:删除软件包,不删除配置文件。这么做的目的是将来再次安装这个包时 原来的配置文件会自动加载供使用。也可以避免误删除包,配置文件还在的话,重新安装一次软件包就可以恢复到…

亚马逊云科技出海日6月9日盛夏盛启

向全球价值链上游奋进 中国企业增强国际竞争力的关键,是努力朝全球价值链上游奋进,发力技术出海。中国的出海新机遇,背后曾是疫情在全球按下数字互联和数字化升级的快进键,跨境电商、在线社交、移动支付、数字服务等数字经济迎来…

Spring 学习总结(37)—— 了解什么是单体的模块化,Spring Modulith 入门实践

1、介绍 模块化单体是一种架构风格,代码是根据模块的概念构成的。 对于许多组织而言,模块化单体可能是一个很好的选择。 它有助于保持一定程度的独立性,这有助于我们在需要的时候轻松过渡到微服务架构。Spring Modulith 是 Spring 的一个实验项目,可用于构建模块化单体应用…

《消息队列高手课》课程笔记(一)

消息生态系统全景图 为什么需要消息队列? 异步处理 大多数程序员在面试中,应该都问过或被问过一个经典却没有标准答案的问题:如何设计一个秒杀系统? 这个问题可以有一百个版本的合理答案,但大多数答案中都离不开消息…

马蹄集oj赛(第五次)

目录 围栏木桩 某农场有一个由按编号排列的根木桩构成的首尾不相连的围栏。现要在这个围栏中选取一些木桩,按照原有的编号次序排列之后,这些木桩高度成一个升序序列。 大厨小码哥 附庸的附庸 最长子段和 旅费 纸带 暧昧团 上楼梯 上楼梯2 采蜜 围栏…

Spring 学习总结(36)—— Spring 状态机优雅实践

1、什么是状态机 1.1 什么是状态 先来解释什么是“状态”( State )。现实事物是有不同状态的,例如一个自动门,就有 open 和 closed 两种状态。我们通常所说的状态机是有限状态机,也就是被描述的事物的状态的数量是有限个,例如自动门的状态就是两个 open 和 closed 。 状…

Mybatisplus真实高效批量插入附容错机制

文章目录 概要优化技术细节小结 概要 提示:mybatisplus自带真实批量插入 在mybatisplus已知常用批量插入为继承Iservice里的saveBatch方法和saveOrUpdateBatch方法, 进入源码可知,此两种方法的插入均为单条插入,如图: 其中可看出&#xff0…

果汁脱色树脂,制糖行业脱色,医药行业脱色

具有控制孔径的大孔强碱性Ⅰ型阴特种脱色用离子交换树脂 Tulsimer A-722是一款具有便于颜色和有机物去除的控制孔径的,专门开发的大孔强碱性Ⅰ型阴离子交换树脂。 Tulsimer A-722 (氯型)专门应用于糖浆脱色。 Tulsimer A-722由于其本身…

字节真的是宇宙尽头吗?

身边在字节的朋友很多人抱怨很卷,但卷到何种程度?很多人没有直观感受。某乎上一个问题(在字节跳动工作是怎样的?)点赞排名第一的回答生动的解释了字节的卷。 租房的舍友在字节工作。 舍友主卧,我次卧。 合租两个月了,我没见过舍友长什么样。…

Python实现ACO蚁群优化算法优化Catboost回归模型(CatBoostRegressor算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 蚁群优化算法(Ant Colony Optimization, ACO)是一种源于大自然生物世界的新的仿生进化算法&#xff0c…

Bark(Suno AI) 搭建及使用

前言 Bark 是由Suno AI创建的基于转换器的文本到音频模型。Bark 可以生成高度逼真的多语言语音以及其他音频 - 包括音乐、背景噪音和简单的音效。该模型还可以产生非语言交流,如大笑、叹息和哭泣。 1: 环境 win10 rtx 3060TI bark 下载地址 https://github.com/sun…

Jenkins配置Powershell脚本,通过脚本控制开发/测试服务器

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:无尽的折腾后,终于又回到了起点,工控,我来了 !序言 因为需要在Windows上编译和部署程序,因此需要借助PowerShell的脚本力量完成这些事情。 目标…

3年工作经验裸辞,有点后悔了

2019年毕业,现在有3年的软件测试工作经验,刚毕业前半年在一家知名上市公司,后面则进入一家传统行业公司待到现在2年半。 由于看不到技术成长以及其他原因,上上周辞职了,目前交接中,下个月中旬就得离开了&a…

Call for Papers丨第十七届全国知识图谱与语义计算大会,AI Open联合征稿

第十七届全国知识图谱与语义计算大会(CCKS 2023)征稿中,并与《AI Open》开展联合征稿,征稿截止日期为2023年6月2日。 全国知识图谱与语义计算大会(China Conference on Knowledge Graph and Semantic Computing&#x…

推荐一个AI导航网站 - 收录的都是热门AI工具

AI导航 | AI工具 | AI之旅导航是只收录最新最实用AI工具的人工智能导航网站 最近半年使用了大量的AI人工智能工具,收藏夹已经收藏不过来了。 所以搭建这个导航网站,管理所有收藏的热门AI网站,同时像大家分享, 网站没有任何广告…

esp32 下蓝牙播放音乐歌词的获得

以esp32 或者esp8266 作为蓝牙音乐接收端是可以获取到歌词的。 走了不少弯路,这方面还是资料有缺失,其实这是很简单的事情。 使用了A2DP这个库,GitHub - pschatzmann/ESP32-A2DP: A Simple ESP32 Bluetooth A2DP Library (to implement a M…