快速打通 Vue 3(四):标签的 ref 属性与 Vue3 生命周期

很激动进入了 Vue 3 的学习,作为一个已经上线了三年多的框架,很多项目都开始使用 Vue 3 来编写了
这一组文章主要聚焦于 Vue 3 的新技术和新特性
如果想要学习基础的 Vue 语法可以看我专栏中的其他博客
Vue(一):Vue 入门与 Vue 指令
Vue(二):计算属性与 watch 监听器
Vue(三):Vue 生命周期与工程化开发
一篇文章快速通关 Vuex(适合小白学习)
Vue 框架前导:详解 Ajax
快速打通 Vue 3(一):基本介绍与组合式 API
快速打通 Vue 3(二):响应式对象基础
快速打通 Vue 3(三):Vue3 中的 watch 监听器与新特性
上一篇 Vue3 博客:快速打通 Vue 3(三):Vue3 中的 watch 监听器与新特性
后续还会继续更新,期待大家的关注!

因为我想要将 Vue3 分模块整理,后面要接一篇路由的整理,所以这篇文章会比较短,后面路由想保证量大管饱(bushi)。

06. 标签的 ref 属性

​ 当我们想要获取一个标签对应的 DOM 元素的时候在 JavaScript 中,我们通过 document.querySelector() 来借助类选择器的写法获取,但是在 Vue 中,我们的 DOM 元素是挂载在同一个网页上的,这些名称难免会重复,所以需要别的方式去获取。

6.1 用在普通标签上

这里就需要借助给标签加上 ref 属性

直接来上代码

<template><h1 ref="h1">111</h1><button @click="getLog">命令展示</button>
</template><script setup lang="ts">import { ref } from 'vue';const h1 = ref();const getLog = () => {console.log(h1.value);}
</script>

​ 这里我们书写了一个 h1 标签,给 h1 加上 ref 属性,属性值为 h1,下面来通过与属性值同名的响应式变量来获取这个 DOM 元素。
在这里插入图片描述

可以直接拿到这个对象,像我们之前去操作 DOM 元素那样,可以对它进行任何操作。

  • 补充:这里为什么不直接写 console.log(h1.vale) 而是要书写一个函数然后绑定事件?主要原因是我们执行 javaScript 代码的时候,这个元素还没有挂载完成,在后面学习生命周期后,可以通过钩子函数实现在挂载完成后打印。

6.2 用在组件标签上

<template>
<Son ref="son"></Son>
<button @click="showMessage">打印信息</button>
</template><script setup lang="ts">
import { ref } from 'vue';
import Son from './components/Son.vue';
const son = ref();
const showMessage = () => {console.log(son.value);
}
</script>

和上面相同,打印出来的是子组件的示例对象,但示例对象中的信息我们是无法拿到的,需要子组件去配置
defineExpose({暴露出去的信息})

<template>
</template>
<script setup lang="ts">
import { ref } from 'vue';const a = ref();
const b = ref();
const c = ref();defineExpose({a, b, c});
</script>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们就能拿到暴露出来的信息,也可以通过数组来导出。

07. 生命周期

Vue 组件实例在创建时要经历一系列的初始化步骤,在此过程中 Vue 会在特定的事件去调用特定的函数,从而让开发者有机会在特定的阶段去运行自己的代码,这些待定的函数称之为生命周期钩子。

Vue2 相比, Vue3 对生命周期做了简化,不再去写选项式API,而是采用函数的方式去代替,并且对各个生命周期的函数都做了简化:

  • Vue2 的生命周期

    创建阶段:beforeCreatecreated

    挂载阶段:beforeMountmounted

    更新阶段:beforeUpdateupdated

    销毁阶段:beforeDestroydestroyed

  • Vue3 的生命周期

    创建阶段:setup

    挂载阶段:onBeforeMountonMounted

    更新阶段:onBeforeUpdateonUpdated

    卸载阶段:onBeforeUnmountonUnmounted

​ 比较重要的两个阶段就是创建阶段和挂载阶段,在更新阶段我们可以向服务端请求数据,挂载完成后我们可以获取 DOM 元素然后对其进行操作。

​ 在 Vue3 中将其创建阶段简化为 setup,方便了代码的书写。

我们上面提到为什么不使用 console.log(h1.value) 直接打印而是要写个函数,就是因为当我们能看到那个按钮的时候说明已经挂载完毕了,可以来获取元素了,如果直接打印获取到的就是 undefined

但通过生命周期函数可以实现:

<template><h1 ref="h1">111</h1>
</template><script setup lang="ts">import { onMounted, ref } from 'vue';const h1 = ref();onMounted(() => {console.log(h1.value);})
</script>

我们在挂载完毕后再打印就能够获取到了。

再来查看一个父子组件的生命周期关系

<template>
<Son></Son>
</template><script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted } from 'vue';
import Son from './components/Son.vue';
console.log("父组件 - 创建阶段");
onBeforeMount(() => {console.log("父组件 - 挂载前阶段")
})
onMounted(() => {console.log("父组件 - 挂载后阶段")
})
onBeforeUpdate(() => {console.log("父组件 - 更新前阶段")
})
onBeforeUpdate(() => {console.log("父组件 - 更新后阶段")
})
</script>
<template>
</template><script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted } from 'vue';console.log("子组件 - 创建阶段");
onBeforeMount(() => {console.log("子组件 - 挂载前阶段")
})
onMounted(() => {console.log("子组件 - 挂载后阶段")
})
onBeforeUpdate(() => {console.log("子组件 - 更新前阶段")
})
onBeforeUpdate(() => {console.log("子组件 - 更新后阶段")
})
</script>

打印结果

先去加载完成子组件再去加载父组件,所以通过网络请求数据并且传入子组件需要在父组件的创建阶段完成。

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

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

相关文章

centos 8.0 安装sysbench 1.0.17

序号步骤说明执行命令执行结果备注1 下载并解压sysbench-1.0.17.zip sysbench-1.0.17.zip2安装依赖文件 yum install automake libtool -y yum install /usr/include/libpq-fe.h 3安装sysbench cd sysbench-1.0.17 ./autogen.sh ./configure \ --prefix/sysbench \ --with-pgsq…

【Docker】Linux中Docker技术入门与实战及实用的常规命令

目录 一、引言 1. 说明&#xff1a; 2. Linux介绍 3. Docker简介 二、Docker三要素 1. 镜像&#xff08;Image&#xff09; 2. 容器&#xff08;Container&#xff09; 3. 仓库&#xff08;Repository&#xff09; 三、实现案例 1. 创建 2. 设置镜像 3. 开启设置 …

MidTool的AIGC与NFT的结合-艺术创作和版权保护的革新

在数字艺术和区块链技术的交汇点上&#xff0c;NFT&#xff08;非同质化代币&#xff09;正以其独特的方式重塑艺术品的收藏与交易。将MidTool&#xff08;https://www.aimidtool.com/&#xff09;的AIGC&#xff08;人工智能生成内容&#xff09;创作的图片转为NFT&#xff0c…

Windows启动MongoDB服务报错(错误 1053:服务没有及时响应启动或控制请求)

问题描述&#xff1a;修改MongoDB服务bin目录下的mongod.cfg&#xff0c;然后在任务管理器找到MongoDB服务-->右键-->点击【开始】&#xff0c;启动失败无提示&#xff1a; 右键点击任务管理器的MongoDB服务-->点击【打开服务】&#xff0c;跳转到服务页面-->找到M…

云服务器租用价格表,阿里云腾讯云华为云2024年优惠对比

作为多年站长使市面上大多数的云厂商的云服务器都使用过&#xff0c;很多特价云服务器都是新用户专享的&#xff0c;本文有老用户特价云服务器&#xff0c;阿腾云atengyun.com有多个网站、小程序等&#xff0c;国内头部云厂商阿里云、腾讯云、华为云、UCloud、京东云都有用过&a…

2024--Django平台开发-基础信息(一)

一、前置知识点 - Python环境搭建 (Python解释器、Pycharm、环境变量等) - 基础语法(条件、循环、输入输出、编码等) - 数据类型(整型、布尔型、字符串、列表、字典、元组、集合等) - 函数(文件操作、返回值、参数、作用域等) - 面向对象 (类、对象、封装、继承、多态等)包和模…

java基础之异常练习题

异常 1.Java 中所有的错误/异常都继承自 Throwable类&#xff1b;在该类的子类中&#xff0c; Error 类表示严重的底层错误&#xff0c; 对于这类错误一般处理的方式是 直接报告并终止程序 &#xff1b; Exception 类表示异常。 2.查阅API&#xff0c;完成以下填空&#xff1a;…

大数据-hive函数与mysql函数的辨析及练习-将多行聚合成一行

目录 1. &#x1f959;collect_list: 聚合-不去重 2. &#x1f959;collect_set(col): 聚合-去重 3. &#x1f959;mysql的聚合函数-group_concat 4. leetcode练习题 1. &#x1f959;collect_list: 聚合-不去重 将组内的元素收集成数组 不会去重 2. &#x1f959;collec…

unity中0GC优化方案《zstring》

文章目录 序言简介GC带来的问题性能瓶颈玩家体验受损 使用方式 序言 游戏开发秉承遇到好东西要分享&#xff0c;下面介绍zstring&#xff0c;感谢作者开源无私奉献 源码地址&#xff1a;https://github.com/871041532/zstring 简介 GC带来的问题 性能瓶颈 GC暂停主线程执行…

C++内存小练习

使用数据文件中的一组地震检波器测量值确定可能的地震事件的位置 程序的输入是名为map.txt的数据文件和用于计算短时间能量和长时间能量的 取样值的数目。输出是给出关于潜在的地震事件次数的报告 #include <iostream> #include <fstream>using namespace std;//定…

【Kafka-3.x-教程】-【三】Kafka-Broker、Kafka-Kraft

【Kafka-3.x-教程】专栏&#xff1a; 【Kafka-3.x-教程】-【一】Kafka 概述、Kafka 快速入门 【Kafka-3.x-教程】-【二】Kafka-生产者-Producer 【Kafka-3.x-教程】-【三】Kafka-Broker、Kafka-Kraft 【Kafka-3.x-教程】-【四】Kafka-消费者-Consumer 【Kafka-3.x-教程】-【五…

Mongodb使用指定索引删除数据

回顾Mongodb删除语法 db.collection.deleteMany(<filter>,{writeConcern: <document>,collation: <document>,hint: <document|string>} ) 删除语法中&#xff0c;除了指定过滤器外&#xff0c;还可以指定写入策略&#xff0c;字符序和使用的索引。 …

SQL语句where、group by 等关键词的顺序

聚合函数的结果作为筛选&#xff0c;不能用where&#xff0c;要用having; 语法顺序是&#xff1a;where&#xff0c;group by, having, order by, limit, 顺序不可以换否则会报错。 参考&#xff1a;SQL基础----select、where、order by 、limit&#xff08;mysql&#xff09;…

开启鸿蒙开发探索之旅ArkTS基本语法介绍(3)

上一章简单的介绍了鸿蒙HUAWEI DevEco Studio框架的搭建&#xff0c;这一章讲一下鸿蒙的主要开发一眼ArkTS的基本语法结构 1.ArkTS语法解释 ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&…

【昕宝爸爸小模块】HashMap用在并发场景存在的问题

HashMap用在并发场景存在的问题 一、✅典型解析1.1 ✅JDK 1.8中1.2 ✅JDK 1.7中1.3 ✅如何避免这些问题 二、 ✅HashMap并发场景详解2.1 ✅扩容过程2.2 ✅ 并发现象 三、✅拓展知识仓3.1 ✅1.7为什么要将rehash的节点作为新链表的根节点3.2 ✅1.8是如何解决这个问题的3.3 ✅除了…

中央处理器CPU(1)----指令周期和微程序

前言&#xff1a;由于期末复习计算机组成效率太慢所以抽时间写一下文章总结一下思路&#xff0c;理解不是很深&#xff0c;欢迎各位不吝赐教。 由于时间不是很充分&#xff0c;所以有些考点由于我们不考试&#xff0c;一笔带过了。 我这是期末复习总结&#xff0c;不是考研知识…

Camunda Sub Process

一&#xff1a;内嵌子流程 repositoryService.createDeployment().name("内嵌子流程").addClasspathResource("bpmn/embed_sub_process.bpmn").deploy(); identityService.setAuthenticatedUserId("huihui"); ProcessInstance processInstance …

支持 input 函数的在线 python 运行环境 - 基于队列

支持 input 函数的在线 python 运行环境 - 基于队列 思路两次用户输入三次用户输入 实现前端使用 vue element uiWindows 环境的执行器子进程需要执行的代码 代码仓库参考 本文提供了一种方式来实现支持 input 函数&#xff0c;即支持用户输的在线 python 运行环境。效果如下图…

基于uniapp封装的table组件

数据格式 tableData: [{elcInfo: [{tableData:[1,293021.1,293021.1,293021.1,293021.1,]}]},{elcInfo: [{tableData:[1,293021.1,293021.1,293021.1,293021.1,]}]},{elcInfo: [{tableData:[1,293021.1,293021.1,293021.1,293021.1,]}]},/* {title: "2",elcInfo: [{…

Rust类型之字符串

字符串 Rust 中的字符串类型是String。虽然字符串只是比字符多了一个“串”字&#xff0c;但是在Rust中这两者的存储方式完全不一样&#xff0c;字符串不是字符的数组&#xff0c;String内部存储的是Unicode字符串的UTF8编码&#xff0c;而char直接存的是Unicode Scalar Value…