当前位置: 首页 > news >正文

vue3.0学习笔记(二)——生命周期与响应式数据(ref,reactive,toRef,toRefs函数)

1. 组合API-setup函数

使用细节:

  • setup 是一个新的组件选项,作为组件中使用组合API的起点。
  • 从组件生命周期来看,它的执行在组件实例创建之前vue2.x的beforeCreate执行
  • 这就意味着在setup函数中 this 还不是组件实例,this 此时是 undefined
  • 在模版中需要使用的数据和函数,需要在 setup 返回(return)。

2. 生命周期

2.1 回顾vue2.x生命周期钩子函数

  • beforeCreate
  • created——实例创建,能获取data, 不能获取真实DOM,一般用于发起Ajax请求
  • beforeMount
  • mounted——可以获取真实DOM
  • beforeUpdate
  • updated——当数据发生变化并更新页面后执行,获取更新后的DOM
  • beforeDestroy
  • destroyed——手动消除计时器/定时器/全局事件

2.2 认识vue3.0生命周期钩子函数

  • setup 创建实例前
  • onBeforeMount 挂载DOM前
  • onMounted 挂载DOM后
  • onBeforeUpdate 更新组件前
  • onUpdated 更新组件后
  • onBeforeUnmount 卸载销毁前
  • onUnmounted 卸载销毁后

总结: 组合API的生命周期钩子有7个,可以多次使用同一个钩子,执行顺序和书写顺序相同。

3. ref() 函数

  • 作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象(RefImpl)

定义响应式数据:

  • ref函数,常用于简单数据类型定义为响应式数据
    • 再修改值,获取值的时候,需要.value
    • 在模板中使用ref申明的响应式数据,可以省略.value

语法:

  • 从 vue 包中导入 ref 函数        import { ref } from 'vue'

  • 在 setup 中执行 ref 函数并传入初始值,使用变量接收 ref 函数的返回值

使用场景:

  • 当你明确知道需要的是一个响应式数据对象,那么就使用 reactive 即可
  • 其他情况使用ref

4. reactive() 函数

  • 作用:接受对象类型数据的参数传入并返回一个响应式的对象响应式对象是 JavaScript 代理,其行为就和普通对象一样。(Proxyreactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的。
  • 定义响应式数据:

    • reactive是一个函数,它可以定义一个复杂数据类型,成为响应式数据。
    • 通常是用来定义响应式对象数据

语法:

  • 从 vue 包中导入 ref 函数        import { reactive } from 'vue'

  • 在 setup 中执行 reactive 函数并传入初始值,使用变量接收 reactive 函数的返回值

5. ref()与reactive()函数的理解

  • reactive和ref函数的共同作用是什么 ?
    • 用函数调用的方式生成响应式数据
  • reactive vs ref
    • reactive不能处理简单类型的数据
    • ref参数类型支持更好但是必须通过.value访问修改 ​​​​​​​
    • ref函数的内部实现依赖于reactive函数
  • 在实际工作中推荐使用哪个?
    • 推荐使用ref函数,更加灵活统一

理解:

        ref 和 reactvie 都是生成响应式数据的方法。ref 可以用于简单类型的数据和复杂类型的数据,生成的是响应式对象(RefImpl);而 reactive 只能用于对象,且生成的代理响应式对象(Proxy)。通过 ref 生成的响应式对象(RefImpl).value之后的值,其实就是通过 reactive 生成的代理响应式对象(Proxy)。

推荐:以后申明数据,统一使用 ref => 统一了编码规范

6. toRef() 函数

  • 作用:toRef 是函数,转换响应式对象某个属性为单独响应式数据,并且值是关联的
  • 语法:

    • 从 vue 包中导入 toRef 函数        import { toRef } from 'vue'

    • toRef (响应式对象, 响应式对象中的某个属性)

使用场景:有一个响应式对象数据,但是模版中只需要使用其中一项数据。

7. toRefs() 函数

  • 作用:toRefs() 是函数,转换响应式对象中所有属性为单独响应式数据,并且值是关联的。
  • 语法:
    • 从 vue 包中导入 toRefs 函数        import { toRefs } from 'vue'
    • toRefs (响应式对象)

8. 案例

基本步骤:

  • 记录鼠标坐标
    • 定义一个响应式数据对象,包含x和y属性。
    • 在组件渲染完毕后,监听document的鼠标移动事件
    • 指定move函数为事件对应方法,在函数中修改坐标
    • 在setup返回数据,模版中使用
  • 累加1功能
    • 定义一个简单数据类型的响应式数据
    • 定义一个修改数字的方法
    • 在setup返回数据和函数,模板中使用
<template><div><div>鼠标的坐标为:</div><p>x:{{ x }}</p><p>y:{{ y }}</p><hr><div>{{ count }}</div><button @click="add">+ 1</button></div>
</template><script>
import { onMounted, reactive, onUnmounted, toRefs, ref } from 'vue'
// 功能1:记录鼠标坐标
// 定义一个响应式数据对象,包含x和y属性。
// 在组件渲染完毕后,监听document的鼠标移动事件
// 指定move函数为事件对应方法,在函数中修改坐标
// 在setup返回数据,模版中使用export default {setup () {// 1. 定义一个响应式数据对象,包含x和y属性。const mouse = reactive({x: 0,y: 0})// 3. 指定move函数为事件对应方法,在函数中修改坐标const move = (e) => { mouse.x = e.pageXmouse.y = e.pageY}// 2. 在组件渲染完毕后,监听document的鼠标移动事件onMounted(() => {document.addEventListener('mousemove',move)})//  4. 组件销毁时,移除事件onUnmounted(() => {document.removeEventListener('mousemove',move)})// 功能2:数字加 1 const count = ref(0)const add = () => {count.value += 1}return {...toRefs(mouse),count,add}}
}
</script><style></style>

相关文章:

vue3.0学习笔记(二)——生命周期与响应式数据(ref,reactive,toRef,toRefs函数)

1. 组合API-setup函数 使用细节&#xff1a; setup 是一个新的组件选项&#xff0c;作为组件中使用组合API的起点。从组件生命周期来看&#xff0c;它的执行在组件实例创建之前vue2.x的beforeCreate执行。这就意味着在setup函数中 this 还不是组件实例&#xff0c;this 此时是…...

C++——QT:保姆级教程,从下载到安装到用QT写出第一个程序

登录官网&#xff0c;在官网选择合适的qt版本进行下载 这里选择5.12.9版本 点击exe文件下载&#xff0c;因为服务器在国外&#xff0c;国内不支持&#xff0c;所以可以从我的网盘下载 链接: https://pan.baidu.com/s/1XMILFS1uHTenH3mH_VlPLw 提取码: 1567 --来自百度网盘超级…...

掌握互联网路由选择协议:从基础入门到实战

文章目录 路由选择协议的基本概念路由选择算法的分类分层次的路由选择协议路由信息协议&#xff08;RIP&#xff09;内部网关协议&#xff1a;OSPF外部网关协议&#xff1a;BGP互联网中的实际应用总结 互联网的路由选择协议是网络通信的核心&#xff0c;它决定了数据包如何在网…...

[笔记]ONVIF服务端实现[进行中...]

1.文档搜索&#xff1a; 从&#xff1a;https://www.cnblogs.com/liwen01/p/17337916.html 跳转到了&#xff1a;ONVIF协议网络摄像机&#xff08;IPC&#xff09;客户端程序开发&#xff08;1&#xff09;&#xff1a;专栏开篇_onvif 许振坪-CSDN博客 1.1原生代码支持&…...

深度强化学习 ②(DRL)

参考视频&#xff1a;&#x1f4fa;王树森教授深度强化学习 前言&#xff1a; 最近在学习深度强化学习&#xff0c;学的一知半解&#x1f622;&#x1f622;&#x1f622;&#xff0c;这是我的笔记&#xff0c;欢迎和我一起学习交流~ 这篇博客目前还相对比较乱&#xff0c;后面…...

线性代数重要知识点和理论(下)

奇异值分解 奇异值分解非常重要且有趣。首先对于 n n n\times n nn对称矩阵 A A A&#xff0c;可以通过对角化得到其对角化形式 A P D P − 1 APDP^{-1} APDP−1&#xff0c;但是如果 A A A不是对称矩阵或者不是方阵&#xff0c;则不能进行对角化&#xff0c;但是可以通过奇…...

独立开发者系列(35)——python环境的理解

新手阶段&#xff0c;为了快速入门&#xff0c;基本都是直接开始写python代码实现自己想要的效果&#xff0c;类似搭建博客&#xff0c;写个web服务器&#xff0c;搭建简易聊天室&#xff0c;偶尔也写些爬虫&#xff0c;或者使用pygame写个简单小游戏&#xff0c;也有tk库做点简…...

中小企业常见的网络安全问题及防范措施

在数字化浪潮的推动下&#xff0c;我国中小企业的信息化建设取得了显著成就。然而&#xff0c;随着网络安全形势的日益严峻&#xff0c;中小企业在网络安全方面的短板逐渐暴露出来。本文将从中小企业网络安全现状出发&#xff0c;深入剖析其存在的问题&#xff0c;并提出针对性…...

Android 线程并发:线程通信:Handler机制

文章目录 API源码分析操作总结 API Handler相关 Handler对象.sendMessage(Message) 发送消息 Handler对象.handleMessage()空方法 自定义Handler重写handleMessage方法&#xff0c;处理Message Looper相关 Looper.getMainLooper() 获取App的UI线程的Looper对象 Looper…...

搭建自己的金融数据源和量化分析平台(三):读取深交所股票列表

深交所的股票信息读取比较简单&#xff1a; 看上图&#xff0c;爬虫读取到下载按钮的链接之后发起请求&#xff0c;得到XLS文件后直接解析就可以了。 这里放出深交所爬虫模块的代码&#xff1a; # -*- coding: utf-8 -*- # 深圳交易所爬虫 import osimport pandas as pd imp…...

企业级视频拍摄与编辑SDK的全面解决方案

视频已成为企业传播信息、展示品牌、连接用户的重要桥梁&#xff0c;如何高效、专业地制作高质量视频内容&#xff0c;成为众多企业面临的共同挑战。美摄科技&#xff0c;作为视音频技术领域的创新先锋&#xff0c;以其强大的视频拍摄与编辑SDK&#xff0c;为企业量身打造了一站…...

后端返回列表中包含图片id,如何将列表中的图片id转化成url

问题描述 如果我有一个列表数据&#xff0c;列表中每个对象都包含一个图片id&#xff0c;现在我需要将列表中的图片id转化成图片&#xff0c;然后再页面上显示出来 如果你有一个列表数据&#xff0c;列表中每个对象都包含一个图片 ID&#xff0c;并且你想将这些图片 ID 转化为…...

Python学习笔记44:游戏篇之外星人入侵(五)

前言 上一篇文章中&#xff0c;我们成功的设置好了游戏窗口的背景颜色&#xff0c;并且在窗口底部中间位置将飞船加载出来了。 今天&#xff0c;我们将通过代码让飞船移动。 移动飞船 想要移动飞船&#xff0c;先要明白飞船位置变化的本质是什么。 通过上一篇文章&#xff0…...

export在linux中的作用

在某些项目中常常使用export命令。该命令的作用是设置环境变量&#xff0c;并且该环境变量为当前shell进程与其启动的子进程共享。 export MODEL_NAME"stable-diffusion-v1-4"比如以上命令&#xff0c;如果不采用export&#xff0c;设置的变量仅在当前shell命令/进程…...

FFmpeg解复用器如何从封装格式中解析出不同的音视频数据

目录 1、ffmpeg介绍 2、FFMPEG的目录结构 3、FFmpeg的格式封装与分离 3.1、数据结构 3.2、封装和分离(muxer和demuxer) 3.2.1、Demuxer流程 3.2.2、Muxer流程 4、总结 4.1、播放器 4.2、转码器 C++软件异常排查从入门到精通系列教程(专栏文章列表,欢迎订阅,持续…...

测试-常见问题

目录 1、测试报告中有哪些内容? 2、如何保证用例的覆盖度 3、测试用例和测试脚本的关系 4、Android和iOS测试的区别 5、小程序和App测试的区别 6、Web和App测试的区别 7、Alpha和Beta测试的区别 8、测试计划包括哪些? 9、Jmeter 、 monkey 10、设计用例的考虑点 …...

RSA非对称加密算法(Java实现)

废话不多说&#xff0c;直接上代码 public class RSAService {private static final String RSA "RSA";private static final String PUBLIC_KEY "xxx";private static final String PRIVATE_KEY "xxx";public static void main(String[] ar…...

netty构建http服务器

Netty 是一个高性能的异步事件驱动的网络应用框架&#xff0c;用于快速开发可维护的高性能协议服务器和客户端。要使用 Netty 搭建一个支持 HTTP 方法&#xff08;GET, POST, PUT, DELETE&#xff09;的 HTTP 服务器&#xff0c;可以按照以下步骤进行操作。 准备工作 添加依赖…...

Docker中安装Kafka和Kafka UI管理界面

Kafka 简介 Apache Kafka 是一个分布式流处理平台,主要用于构建实时数据管道和流应用。它最初由LinkedIn开发,并于2011年开源,之后成为Apache项目的一部分。Kafka的核心概念和功能包括: 发布与订阅消息系统:Kafka允许用户发布和订阅消息流。高吞吐量:Kafka能够处理大量数…...

防火墙——SNAT和DNAT策略的原理及应用、防火墙规则的备份、还原和抓包

防火墙——SNAT和DNAT策略的原理及应用、防火墙规则的备份、还原和抓包 &#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...