vue3的ref和reactive

embedded/2024/11/15 5:29:57/

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/embedded/8839.html

相关文章

MAC: 使用技巧

提高文件夹的权限并删除文件 提高权限 打开 Finder 应用程序。 在您想要删除的文件夹,并右键单击它。 显示简介 - 共享与权限”(Sharing & Permissions) -点击锁图标,并输入管理员密码解锁 - 将当前用户的权限更改为“读与写”…

【GNSS】GNSS开源相关代码汇总

仅作为笔者的学习笔记使用 参考:GNSS算法相关开源代码(含多传感器融合相关项目) - 知乎 (zhihu.com)

易货模式!解决您的库存压力 企业家朋友可以过来看看!

易货模式,这是一种非现金的交易方式,旨在让企业或个人以货换货,充分利用各自的闲置资源,换取所需商品或服务。 易货模式包含两种主要形式:传统的物物交换与现代的非现金结算。传统的物物交换,即双方直接以各…

Javascript基础

1.数组随机排序 let arr [1, 2, 3, 4, 5, 6, 7, 8, 9] // function result(params) { // for (let i 0; i < params.length; i) { // let randomIndex parseInt(Math.random() * params.length) // //定义完随机数后我们开始把当前数据存起来用于给赋值后的随…

Springboot策略和工厂模式结合

文章目录 一、定义接口二、定义工厂类三、实现接口的处理类[组件]四、调用 一、定义接口 package com.interotc.handler;/*** author lenovo*/ public interface IStrategy {<T> T execute(T parameter) throws Throwable; }二、定义工厂类 package com.interotc.handl…

Hive on spark编译

文章目录 Hive引擎简介Hive on Spark配置Yarn环境配置 Hive引擎简介 Hive引擎包括&#xff1a;默认MR、Tez、Spark Hive on Spark&#xff1a;Hive既作为存储元数据又负责SQL的解析优化&#xff0c;语法是HQL语法&#xff0c;执行引擎变成了Spark&#xff0c;Spark负责采用RD…

Hive进阶(2)----HDFS写入数据流程(赋图助君理解)

HDFS写入数据流程 一、写入流程 1、 Client向NameNode发起RPC请求&#xff0c;来确定请求文件block所在的位置&#xff1b; 2、 NameNode会视情况返回文件的部分或者全部block列表&#xff0c;对于每个block&#xff0c;NameNode都会返回含有该block副本的DataNode地址&…

RIP最短路实验(华为)

思科设备参考&#xff1a;RIP最短路实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 RIP&#xff08;Routing Information Protocol&#xff0c;路由信息协议&#xff09;是一种基于距离矢量的内部网关协议&#xff0c;工作原理是每个路由器周期性地向邻居路由器发…