Vue3中reactive与ref的对比

最新推荐文章于 2024-05-09 11:32:17 发布
最新推荐文章于 2024-05-09 11:32:17 发布
阅读量406 收藏 2
点赞数
文章标签： vue javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZeBaBa/article/details/125737398
版权
本文对比了ref和reactive在数据定义、原理和使用上的不同：ref主要定义基本类型，reactive用于对象或数组，原理上ref基于数据劫持，reactive用Proxy实现。操作上，ref需.value，reactive则无需。
摘要由CSDN通过智能技术生成

reactive对比ref

从定义数据角度对比

  • ref用来定义：基本数据类型
  • reactive用来定义：对象（或数组）类型数据
  • 备注：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象

从原理角度对比

  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）
  • reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

从使用角度对比

  • ref定义的数据：操作数据需要.value,读取数据时模板中直接读取不需要.value
  • reactive定义的数据：操作数据与读取数据：均不需要.value
ZeBaBa
关注
Vue3通透教程【五】Vue3中的响应式数据 reactive函数、ref函数
官方推荐
02-23 4万+
Vue3中的响应式数据
Vue3项目创建及reactive与ref、isRef、toRefs、shallowReactive的作用
qq_37635012的博客
10-08 698
vue3项目创建、vue3项目搭建流程、vue3里ref使用、vue3里reactive使用。
vue3实战-完全掌握ref、reactive
yyds2026的博客
11-01 1599
知道大家使用 Vue3 的时候有没有这样的疑惑，“ref、rective 都能创建一个响应式对象，我该如何选择？”，“为什么响应式对象解构之后就失去了响应式？应该如何处理？” 今天咱们就来全面盘点一下 ref、reactive，相信看完你一定会有不一样的收获，一起学起来吧！
vue3 reactive的坑
a9874561328的博客
04-02 4142
最近使用vue3的过程中发现reactive有一些问题 清空reactive定义的数组时必须将length设为0，直接赋值一个空数组是没有作用的，同理对象直接赋值一个空对象也没有作用，只能遍历对象一项一项删，这里说的没有作用是不能响应式的更新页面，如果打印一下是能看到确实被删除了，但是页面没有变化 清空数组 // 错误示例 <template> <div>{{ arr }}</div> <button @click="click">点击&lt
Vue3 reactive和ref详解
qq_32907491的博客
10-01 3560
在大家使用vue3编写组件的时候，通常会把数据暴露到模板中使用：在我们修改响应式数据的值时，不会触发重新渲染再点击按钮之后，从控制台中可以看出数据已经改变，但是页面文字并没有做出相应的改变。因为扩展运算符(...)导致，响应式对象变成了一个普通对象。把一个普通对象暴露到模板中使用，是不会在渲染函数与响应式数据之间建立响应式联系的。return {...obj//等价于return {bar:'vue3'能否在副作用函数中，即使通过普通对象来访问属性值也能够建立响应式联系？
【拆解Vue3】reactive是如何实现的？（下篇）
梅花寺
09-20 562
在Vue中，我们也可以在副作用函数中使用for…in循环来枚举响应式对象的属性。在JavaScript中，任何操作的底层实现都基于基本语义方法，for…in也不例外。在for…in中，使用了来获取只属于对象自身的属性名，因此，我们可以在Proxy中利用ownKeys()，来对for…in的进行拦截。在(1)处，我们按照之前的思路，增加了拦截函数。但在拦截收集副作用函数的时候犯了难，ownKeys仅能拦截到target对象，无法拦截具体的key。因此，我们需要把key补上，同时能够满足key。
vue和react遍历数组
莉兹Liz的博客
06-24 255
vue <template> <div v-for="item of lizOptions" :key="item.id"> {{ item.id }} : {{ item.value }} </div> </template> <script> export default { data() { return { lizOptions: [{id: 1, value: "cat"}, {id: 2, value: "d
vue3源码：reactive与ref深度对比，为什么要使用 ref
最新发布
qq_44415875的博客
05-09 568
reactive函数会把传入的object作为proxy的target参数，而proxy只能代理对象，不能代理基本数据类型
vue中的Reactive,ref,readonly
weixin_47450807的博客
02-11 1258
一、Reactive api 下面我们可以一个例子 如图所示，当我们点击button按钮的时候，是没有响应式效果的，此时我们需要reactive api。 那么这是什么原因呢？为什么就可以变成响应式的呢： 因为当我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖收集，当数据发生改变时，所有收集到的依赖都是进行对应的响应式操作，我们编写的data选项，也是在内部交给了reactive函数将其编程响应式对象的。 二、Ref api reactive api对传入的类型是有限制的，要
vue中reactive，ref相关api总结
weixin_47450807的博客
02-14 657
在vue3的composition api中的reactive和ref存在一些其他api。下面我们进行总结。 一、Reactive判断api isProxy：判断对象是否由reactive或者readonly创建的对象。 //判断reactive const info = reactive({ name: "dmc", age: 20 }); console.log(isProxy(info)) //true //判断readonly const info = readonly({ n
VUE3响应式数据（ref和reactive)
HUmOrOus02的博客
01-02 1280
vue3响应式数据
vue3 循环中的ref
修行小蜗牛的博客
11-15 284
curRef.el?// 需要调用ref内部的方法。
Vue3中的ref和reactive详解扩展
Lenny-zlp的博客
07-09 7788
Vue3中的ref和reactive详解扩展 一、ref和reactive 死死记住：ref本质也是reactive，ref(obj)等价于reactive({value: obj}) vue3中实现响应式数据的方法是就是使用ref和reactive，所谓响应式就是界面和数据同步，能实现实时更新 vue2中响应式是通过defineProperty实现的，vue3中是通过ES6的Proxy来实现的 1.reactive reactive的参数必须是一个对象，包括json数据和数组都可以，否则不具有
浅析vue3中的声明响应式数据 ref 和 reactive
Quentin0823的博客
09-13 3377
在Vue2中响应式数据是通过defineProperty来实现的，而在Vue3响应式数据是通过ES6的Proxy来实现的。Vue3中实现响应式数据的方法是ref和reactive。使用方法：
【vue3源码】七、reactive——Object的响应式实现
MAXLZ的博客
08-08 1237
本文介绍vue3对reactive object的响应式实现。
vue3中的ref 和 reactive 定义数组
qq_58247332的博客
10-11 3万+
vue3定义数组的两种方法
Vue3入门到精通--reactive以及reactive相关函数
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
10-30 1万+
是什么 将引用类型数据–>响应式数据 ==> 把值类型的数据包装编程响应式的引用类型的数据 object array map set weakmap weakset 函数 reactive参数必须是对象(json/arr) 默认情况下修改对象, 界面不会自动更 如果想更新, 可以通过重新赋值的方式 本质: 将传入的数据包装成一个Proxy对象 用法 创建变量 案例1 import {reactive} from 'vue'; let state = reacti
解读 Vue 之 Reactive
词语大杂烩
08-12 1万+
前言 在一篇文章中简单讲了 vue 是如何把模板解析成 render function 的，这一篇文章就来讲讲 vue 是如何把数据包装成 reactive，从而实现 MDV(Model-Driven-View) 的效果。 先说明一下什么叫 reactive，简单来说，就是将数据包装成一种可观测的类型，当数据产生变更的时候，我们能够感知到。 而 Vue 的相关实现代码全部都在 core/ob
vue3中的reactive函数声明数组
热门推荐
qq_43750656的博客
02-23 3万+
vue3中reacitve函数如何声明一个响应式数组，如以下案例 <template> <div> <div v-for="item in arr" :key="item"> {{item}} </div> <button @click="change">change</button> </div> </template> <scr
vue3中reactive和ref的区别
09-07
在Vue 3中，`reactive`和`ref`是两种不同的响应式数据处理方式。 `reactive`用于将一个对象转换为响应式对象。它接收一个普通对象作为参数，并返回一个响应式代理对象。这意味着当原始对象发生变化时，代理对象也会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值