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

news/2024/11/20 1:39:37/

一、组件的生命周期

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

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.ppmy.cn/news/75738.html

相关文章

MySQL性能优化之(explain)工具

慢SQL的定位 在MySQL当中,我们有时候写的SQL执行效率太慢此时我们需要将其优化。但是SQL可能非常的多,难道我们一条一条的进行查看吗?在MySQL当当中我们可以查看慢查询日志,看看那些SQL这么慢。但是这个默认情况下这个慢查询日志…

Xshell常用命令

Linux操作命令 删除目录:rm -rf 目录名字删除文件:rm -f 文件名在当前目录下建立子目录:mkdir 文件名 进入目录:后面接你要进入的目录(对应电脑上的文件夹),如:cd /etc/nginx/切换到根目录:cd …

3 个令人惊艳的 ChatGPT 项目,开源了!

过去一周,AI 界又发生了天翻地覆的变化,其中,最广为人知的,应该是 OpenAI 正式上线 ChatGPT iOS 客户端,让所有人都可以更方便的在手机上与 ChatGPT 聊天。 此外,Stable Diffusion 母公司 Stability AI 也…

ChatGPT 使用 拓展资料:如何善用大语言模型的推理能力?

ChatGPT 使用 拓展资料:如何善用大语言模型的推理能力?

(06)---STM32的Systick定时器与ADC

目录 【1】Systick定时器 概念 工作原理 时钟基准 【2】HAL_Delay函数分析 【3】定时器 基本概念 定时器分类 定时器组成 1.计数器 2.自动重装寄存器 3.预分频器 定时器计数原理 实验 2.PWM 定义 参数 工作原理 应用 练习:通过PWM信号调节LED灯亮度 练…

Elasticsearch:使用字节大小的向量节省空间 - 8.6

作者:Jack Conradson, Benjamin Trent Elasticsearch 在 8.6 中引入了一种新型向量! 该向量具有 8 位整数维度,其中每个维度的范围为 [-128, 127]。 这比具有 32 位浮点维度的当前向量小 4 倍,这可以节省大量空间。 你现在可以通…

教你精通Java语法之第十四章、枚举

目录 一、背景及定义 二、使用 2.1switch语句 2.2常用方法 三、枚举优点缺点

超市购物车功能

1 问题 平常去超市买的要买的东西过多后,记不清楚怎么办? 2 方法 解决问题的步骤采用如下方式: 首先运用字典储存已有商品跟价格注释引导顾客进行操作; 通过实验、实践等证明提出的方法是有效的,是能够解决开头提出的问题。 代码清…