Vue3中reactive和ref对比

已于 2023-12-06 10:25:29 修改
阅读量666 收藏 10
点赞数 9
分类专栏： 前端 文章标签： 前端 vue.js
于 2023-12-03 10:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42202992/article/details/134755248
版权

Vue3中reactive和ref对比

数据角度对比

  1. ref用来定义: 基本类型
  2. reactive用来定义: 对象(或数组)类型数据
  3. 备注:ref也可以定义对象或数组类型数据,它内部会调用reactive转为代理对象.

原理角度对比

  1. ref通过Object.defineProperty()中的get()与set()来实现响应式
  2. reacive通过使用Proxy来实现响应式,并通过Reflect操作源对象内部数据

使用角度对比

  1. ref定义的数据: 操作数据时需要.value, 读取数据不需要
  2. reactive定影的数据: 操作数据和读取数据都不需要.value
*郑*
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 reactive和ref详解
qq_32907491的博客
10-01 3173
在大家使用vue3编写组件的时候，通常会把数据暴露到模板中使用：在我们修改响应式数据的值时，不会触发重新渲染再点击按钮之后，从控制台中可以看出数据已经改变，但是页面文字并没有做出相应的改变。因为扩展运算符(...)导致，响应式对象变成了一个普通对象。把一个普通对象暴露到模板中使用，是不会在渲染函数与响应式数据之间建立响应式联系的。return {...obj//等价于return {bar:'vue3'能否在副作用函数中，即使通过普通对象来访问属性值也能够建立响应式联系？
vue3 ref和reactive的区别与相同
qq_45662523的博客
08-29 478
先说区别，如果在模板中直接使用ref定义的数据，不必加上.value，因为在模板中使用ref定义的值已经暴露出来了，但是使用reacative定义的必须要加上定义的对象名字，比如定义了const data=reactive({name:"cat"})，那么在模板中使用必须是data.cat。第二个就是reactive一般是存放数组或者对象，它能够将复杂的类型变成响应式的数据，ref存放的一般是基本数据，而且reactive的响应式是深层次的。下面是一些例子，能够更更好的理解我所说的。...
Vue3 Composition API - ref toRef 和 toRefs（笔记自用）
weixin_39763711的博客
08-30 252
Vue3 Composition API - ref toRef 和 toRefs
Vue3为什么推荐使用ref而不是reactive
Web面试那些事儿的博客
09-25 320
reactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代option api的data的替代,可以存放任何数据类型,而reactive声明的数据类型只能是对象;先抛出结论,再详细说原因:非必要不用reactive!(官方文档也有对应的推荐)官方原文:建议使用ref()作为声明响应式状态的主要 API。
Vue3中ref和reactive怎么选?
weixin_51055997的博客
09-15 895
在vue3中，定义响应式数据一般有两种方式：ref 和 reactive。一般来说，我们使用 ref 来定义基本数据类型，使用 reactive 来定义复杂数据类型，但是也可以使用 ref 来定义数组。但是企业中项目做多了就会发现，定义数组用的都是ref。
Vue3 reactive函数的使用。reactive()对比ref()的优点
ChuanyangChen的博客
05-26 2461
Vue3 reactive()的使用。reactive()对比ref()的优点 作用：定义一个对象类型的响应式数据，基本类型用不了reactive() 语法：const 代理对象 = reactive(源对象) 接收一个对象或数组 返回一个代理对象（proxy对象） reactive定义响应式数据是深层次的，对象中的对象，数组中的数组都能被监视到状态的修改（或叫值的修改） reactive内部是基于ES6的Proxy实现的，通过代理对象操作源对象内部数据进行操作。 reactive()在vue3中的使用
vue3中reactive和ref对比
yezi153的博客
12-05 136
强化了reactive的功能，可以把简单数据类型数据转成响应式的 挑熟悉的用 推荐用ref reactive包裹之后的响应式结果 ref包裹之后的响应式结果 相当于把reactive函数外面再包了一层对象 把普通数据外面包裹一层对象 让其成为响应式数据 ...
vue3 中 reactive 和 ref 对比区别
qq_16786131的博客
03-19 421
定于数据角度对比： ref 用来定义：基本类型数据 reactive 用来定义：对象、或数组类型的数据 备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过 reactive 转为代理对象 原理角度对比： ref 通过 Object.defineProperty() 的 get 与 set 来实现响应式的（数据劫持） reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过Reflect 操作源对象内部的数据。 使用角度对比： ref 定义的数据：操作数据需要 .value,读取数
Ref Effect baseHandler reactive Proxy Vue 3
01-04
在 Vue 3 中，引入了 `ref` 和 `reactive` 两个核心 API，它们构建在 `Proxy` 之上，为开发者提供了更直观的响应式声明方式。`ref` 主要用于创建可响应的值，它可以是一个基本类型或者一个对象。当你对 `ref` 创建的...
Vue reactive ref v-bind 语法示例演示代码
07-17
Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码...
# vue3 ref 和 reactive 函数.doc
07-11
Vue3 中的 Ref 和 Reactive 函数 在 Vue3 中，Ref 和 Reactive 函数是两个非常重要的概念，它们都是用于实现响应式数据的关键技术。本文将从基本概念开始，详细介绍 Ref 函数的用法、Reactive 函数的应用，以及它们...
vue3中ref创建和reactive-对象类型的响应式数据
05-25
下载vue组件的完整代码
vue3中Options API(学习)代码
11-05
Vue3 改进了属性和方法的声明方式，引入了 `ref` 和 `reactive`。`ref` 用于创建响应式引用，而 `reactive` 创建一个响应式对象。这些特性在 Options API 中可以与现有的 `data` 和 `computed` 结合使用，但不推荐...
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 469
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 994
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 80
【代码】TS如何处理js模块的类型？
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 853
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
2401_85639015的博客
07-19 1560
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
vue3中reactive和ref的区别
08-25
在Vue3中，ref和reactive都是用来定义响应式数据的方法。区别在于使用方式和访问方式。ref是对reactive的二次包装，它需要在数据访问时使用.value属性来获取实际的值。而reactive在template中使用时，不需要添加....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值