vue3学习 ref和reactive的使用

使用ref声明一个响应式对象并使用

<script lang="ts" setup>
import { ref } from 'vue';
const message = ref("HelloWorld")
message.value="被修改了啊~~"
</script>
<template>{{ message }}
</template>

ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回,如果在js中使用需要XX.value来操作其内容,在模板中可以直接使用,因为已经自动解包了

为什么ref可以变成响应式

vue会在首次渲染的时候追踪所有的ref,将ref对象进行一次封装,如果是普通对象我们是没办法检测他的修改和访问的,所以我们将他封装成对象,然后通过getter和 setter方法拦截对象属性的get和set操作。
.value属性就是用来检测ref合适被访问和修改的,可以参考如下伪代码:

// 伪代码,不是真正的实现
const myRef = {_value: 0,get value() {track()return this._value},set value(newValue) {this._value = newValuetrigger() //用来做一些通知,}
}

使用reactive声明一个响应式对象并使用

// 伪代码,不是真正的实现
const myRef = {_value: 0,get value() {track()return this._value},set value(newValue) {this._value = newValuetrigger() //用来做一些通知,}
}
  1. reactive()将对象本身变的具有响应性,所以他只能用于对象类型,不支持string number boolean等原始类型。
  2. reactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的.
  3. reactive对结构操作不友好,如果我们对reactive进行结构,那他将失去响应性链接
const raw = {}
const proxy = reactive(raw)// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

在TS中如何使用 ref 和reactive

<script lang="ts" setup>
import { ref, reactive } from 'vue';
const message = ref<string>("HelloWorld")
interface User {name: string,age: number
}
const user = reactive<User>({name: "三千",age: 18
})
user.name = "八百"
</script>
<template>{{ message }}{{ user.name }}
</template>

怎么选择

虽然没有严格的规则,但在某些情况下,使用一些特定的内容才是最佳实践,当然你也能够 ref 一把梭哈

如果你需要一个响应式原始值,那么使用 ref() 是正确的选择,要注意是原始值
如果你需要一个响应式对象,层级不深,那么使用 ref也可以
如果您需要一个响应式可变对象,并且对象层级较深,需要深度跟踪,那么使用 reactive
你可以把 reactive 看成 ref 的子集,ref 可以解决一切烦恼

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

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

相关文章

Docker容器与虚拟化技术:OpenEuler 使用 docker-compose 部署 LNMP

目录 一、实验 1.环境 2.OpenEuler 部署 docker-compose 3.docker-compose 部署 LNMP 二、问题 1.ntpdate未找到命令 2.timedatectl 如何设置时区与时间同步 3.php网页显示时区不对 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统架构版本IP备注Lin…

docker启动容器报错:ERRO[0000] error waiting for container: context canceled,解决方法

系统环境&#xff1a;ubuntu16.04&#xff0c;已安装docker 执行命令&#xff1a;sudo docker run -it --privileged --shm-size128g -v /home:/home docker-image /bin/bash 报错 docker: Error response from daemon: could not select device driver "" with …

Android PMS实战——Hook技术介绍(十四)

在了解了 PMS 的调用流程之后,都有那些用处呢?首先帮助了解 Android 包管理系统原理,还有就是配合 AMS 通过 Hook 技术,实现热更新、插件化等功能。 我们可以通过反射获取到 PackageParser 对象,再反射调用它的 parsePackage() 传入 apk 路径完成解析获取到 Package 对象,…

厚膜电阻与薄膜电阻相比,特点是什么?

厚膜电阻与薄膜电阻是两种常见的电阻器件&#xff0c;它们之间的特点主要有以下几个方面&#xff1a; 1. 厚度不同&#xff1a;厚膜电阻的膜层厚度较大&#xff0c;一般在几微米到几十微米之间&#xff0c;而薄膜电阻的膜层厚度较薄&#xff0c;一般在几纳米到几微米之间。 2. …

单片机精进之路-9ds18b20温度传感器

ds18b20复位时序图&#xff0c;先将b20的数据引脚拉低至少480us&#xff0c;然后再将数据引脚拉高15-60us&#xff0c;再去将测传感器的数据引脚是不是变低电平并保持60-240us&#xff0c;如果是&#xff0c;则说明检测到温度传感器&#xff0c;并正常工作。需要在240us后才能检…

xss高级靶场

一、环境 XSS Game - Ma Spaghet! | PwnFunction 二、开始闯关 第一关 看看代码 试一下直接写 明显进来了为什么不执行看看官方文档吧 你不执行那我就更改单标签去使用呗 ?somebody<img%20src1%20onerror"alert(1)"> 防御&#xff1a; innerText 第二关…

Codeforces Round 930 (Div. 2) (A~B)

比赛&#xff1a;Codeforces Round 930 (Div. 2) (A~B) 目录&#xff1a;A B A题&#xff1a;Shuffle Party 标签: 模拟 题目大意 给你一个数组 a1,a2,…,an。最初&#xff0c;每个 1 ≤ i ≤ n都有 ai i&#xff0c;整数 k ≥ 2的运算 swap(k)定义如下&#xff1a; 设 d是…

Python图像形态学处理:腐蚀、膨胀、礼帽、黑帽……

文章目录 二值形态学灰度形态学 python图像处理教程&#xff1a;初步&#x1f4f7;插值变换 最基础的形态学操作有四个&#xff0c;分别是腐蚀、膨胀、开计算和闭计算&#xff0c;【scipy.ndimage】分别实现了二值数组和灰度数组的这四种运算。而针对灰度图像&#xff0c;【sc…

Office/WPS 好用的PPT插件-智能选择布局

软件介绍 PPT大珩助手是一款全新设计的Office PPT插件&#xff0c;它是一款功能强大且实用的PPT辅助工具&#xff0c;能够轻松帮助您修改、优化和管理幻灯片。凭借丰富的功能和用户友好的界面&#xff0c;PPT大珩助手能够助力您打造出精美而专业的演示文稿。我们致力于为用户提…

Flutter学习7 - Dart 泛型

1、泛型类 //泛型类 class Cache<T> {final Map<String, T> _cache {};void saveData(String key, T value) {_cache[key] value;}//泛型方法T? getData(String key) {return _cache[key];} }void main() {Cache<int> cache1 Cache();const String name…

NGINX的重写与反向代理机制解析

目录 引言 一、重写功能 &#xff08;一&#xff09;if指令 1.判断访问使用的协议 2.判断文件 &#xff08;二&#xff09;return指令 1.设置返回状态码 2.返回指定内容 3.指定URL &#xff08;三&#xff09;set指令 1.手动输入变量值 2.调用其它变量值为自定义变…

RISC-V特权架构 - CSR寄存器

RV32/64 特权架构 - CSR寄存器 1 CSR地址空间2 CSR定义2.1 用户级2.2 监管级2.3 超级监管级2.4 机器级 3 CSR访问3.1 CSRRW3.2 CSRRS3.3 CSRRC3.4 CSRRWI3.5 CSRRSI3.6 CSRRCI 本文属于《 RISC-V指令集基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 CSR地址空间 RISC&…

房贷计算器微信小程序原生语言

微信小程序: 房贷计算器 效果: 输入 300万 结果 还款明细 一共有3个页面 1、输入页面 2、结果页面 3、详情页面 1 index页面 index.wxml文件 <view class="text-black"><!--房屋总价--><view class="cu-bar bg-white solid-bottom"&…

TCP/IP状态迁移

TCP&#xff08;传输控制协议&#xff09;是一种面向连接的流式控制协议&#xff0c;它定义了不同的状态以管理通信过程中的连接。TCP 状态迁移描述了 TCP 连接在不同状态之间的转换过程&#xff0c;常见的 TCP 状态包括 CLOSED、LISTEN、SYN_SENT、SYN_RECEIVED、ESTABLISHED、…

免费下载《金融行业数据安全交换解决方案白皮书》

金融行业包括商业银行业务、证券业务、保险业务、基金业务、信托业务等&#xff0c;因此数据类型多种多样&#xff0c;并且数据涉及主体众多&#xff0c;应用场景上较为多样复杂&#xff0c;在数据交换上存在安全、合规、可控、可靠、高效等需求。 金融行业会面临哪些数据安全…

IIS发布PHP网站字体404解决办法

最近在使用 IIS 发布 PHP 网站时&#xff0c;我遇到了一个前端问题&#xff0c;即字体库文件 404 错误。这个问题的根本原因是 IIS 未能正确识别字体文件类型&#xff0c;导致浏览器在加载页面时无法正确获取所需字体资源&#xff0c;进而触发了404错误。这样的问题会导致网站页…

npm install 报错常见的解决方法

npm install 报错的情况有很多种&#xff0c;每种错误的具体解决方案也有所不同。这里我将汇总一些常见的npm install报错及其解决办法&#xff1a; 1. 下载速度慢/网络问题 解决办法&#xff1a;更换npm包的镜像源至国内镜像&#xff0c;如淘宝npm镜像&#xff1a;npm confi…

Javascript:输入输出

目录 一.前言 二.正文 1.输出 2.输入 3.字面量 概念&#xff1a; 三.结语 一.前言 Javascript作为运行浏览器的语言&#xff0c;对于学习前端的同学来说十分重要&#xff0c;那么从现在开始我们将开始介绍有关 Javascript。 二.正文 1.输出 document.write() : 向body内…

第十四篇【传奇开心果系列】Python的文本和语音相互转换库技术点案例示例:深度解读Azure Cognitive Services个性化推荐系统

传奇开心果博文系列 系列博文目录Python的文本和语音相互转换库技术点案例示例系列 博文目录前言一、个性化推荐系统介绍和关键功能以及优势解说二、雏形示例代码三、个性化推荐示例代码四、实时推荐示例代码五、多种推荐算法示例代码六、易于集成示例代码七、数据安全和隐私保…

C# DLL实现泄露实验

先说结论&#xff1a;如果应用程序项目中使用直接引用的形式调用动态链接库&#xff0c;当动态链接库是在调试模式生成的情况下&#xff0c;即使应用程序以发布模式生成&#xff0c;跟随应用程序一同生成的动态链接库仍为调试模式&#xff0c;会引发DLL实现泄露问题&#xff1b…