vue3的ref和reactive

server/2024/11/14 11:51:36/

ref

RefImpl:引用对象,如果想让一个普通变量变成响应式的,就需要把这个变量丢给ref。

在这里插入图片描述
在这里插入图片描述

修改的时候需要使用name.value进行修改。使用的时候直接使用name字段就行。
补充:const obj={name:’li’}定义的对象是可以修改对象里面的属性,如:obj.name = ‘ni’ 但是不可以修改整个对象,比如:obj = {name:’ni’}

Ref作用:定义一个响应式的数据。
Ref语法:

  • 创建一个包含响应式数据的引用对象
    在这里插入图片描述

  • JS中操作数据,使用XXX.value。

  • 模板中使用,不需要value,直接{{XXX}}。

Ref接收的数据类型:基本类型,对象类型。

javascript">const a = ref(1);  
const a = ref('1');  
const a = ref(true);  
const a = ref({});  
const a = ref([])

基本数据类型:响应式依靠的是object.defineProperty()的get和set。
对象类型:内部求助了vue3的一个新函数——reactive函数。

Reactive函数

作用:定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)。
使用ref定义的响应式数据,在js中修改的时候必须加上.value;使用reactive定义的响应式数据,不用.value就可以进行修改,无论对象层级有多深,数组也可以直接用索引来修改。
在这里插入图片描述
语法:const 代理对象 = reactive(原对象),接受一个对象或数组,返回一个代理对象(proxy的实例对象,简称proxy对象)。

Reactive定义的响应式数据是’深层次’的。
内部基于ES6的proxy实现,通过代理对象操作源对象内部数据进行操作。

对比reactive和ref

  1. 从定义数据角度对比

Ref用来定义:基本数据类型。
Reactive用来定义:对象(或数组)类型数据。
备注:ref也可以定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象。

  1. 从原理角度对比

Ref通过object.defineProperty()的get和set来实现响应(数据劫持)。
Reactive通过proxy来实现响应式(数据劫持),通过Reflect来操作源数据内部。

  1. 从使用角度对比

Ref定义的数据,操作数据需要使用.value,模板中使用数据不需要使用.value。
Reactive定义的数据,操作数据与读取数据,均不需要使用.value。


http://www.ppmy.cn/server/5503.html

相关文章

HTML标签03

HTML 颜色 HTML 颜色有三种显示方式 #FF0000直接输入颜色的英语单词使用rgb(x,y,z) x,y,z的取值范围是0-255 HTML 脚本 HTML script 标签 <script> 标签用于定义客户端脚本&#xff0c;比如 JavaScript。<script> 元素既可包含脚本语句&#xff0c;也可通过 s…

自然语言处理基础面试

文章目录 TF-IDFbag-of-wordsBert 讲道理肯定还得有Transformer&#xff0c;我这边先放着&#xff0c;以后再加吧。 TF-IDF TF&#xff08;全称TermFrequency&#xff09;&#xff0c;中文含义词频&#xff0c;简单理解就是关键词出现在网页当中的频次。 IDF&#xff08;全称…

文心一言vsGPT-4全面对比

文心一言和GPT-4都是当前非常先进的人工智能语言模型&#xff0c;它们各自具有独特的特点和优势。以下是对这两款工具的全面比较&#xff1a; 文心一言是由百度开发的一款大型人工智能语言模型&#xff0c;它基于强大的深度学习技术和海量的数据资源&#xff0c;具备出色的语言…

C++类和对象(中)(1)

一、类的6个默认成员函数 在一个类中&#xff0c;如果这个类什么都没有&#xff0c;那么这个类我们称之为空类&#xff0c;那么空类中真的什么都没有吗&#xff1f;其实并不是&#xff0c;任何类在什么都不写的情况下&#xff0c;编译器也会自动生成六个默认成员函数。 默认成…

通往大厂之路:Solr面试题及参考答案100道题

目录 什么是Solr,它主要用来做什么? 解释Solr和Lucene的关系。 Solr有哪些主要特点?

vue--样式绑定--样式切换方法

1.通过改变类名的方法改变盒子样式 可以通过 :class变量名来动态改变标签的样式名&#xff0c;变量值可以是字符串、数组、对象 1.字符串写法 适用于样式类名不确定需要动态指定 <div classbase :classa>Text</div> data:{ a:normal } classbase和 :classa可…

【WPF】取色器-Color Extractor

【WPF】取色器 序实现HookScreen Colorlayout.CS预览下载序 取色器是一个非常实用的小工具,网上也很多可供下载使用。为什么已有却还是想要自己去实现一个呢?一方面是因为工具虽小但毕竟涉及到操作系统 API 的使用。另一方面想要在技术上精进一些。 实现 实现思路测试通过 Ho…

数据的质量控制软件----fastQC

一、前言 FastQC的基本介绍: FastQC是一款基于Java的软件&#xff0c;它可以快速地对测序数据进行质量评估&#xff0c;其官网为&#xff1a;Babraham Bioinformatics - FastQC A Quality Control tool for High Throughput Sequence Data 高通量测序数据的高级质控工具输入…