Vue3中为什么要用ref和reactive定义数据？

最新推荐文章于 2024-07-03 17:39:31 发布

完美的定义

最新推荐文章于 2024-07-03 17:39:31 发布

阅读量3.6k

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/rgmyrg/article/details/123001140

版权

答：vue2中我们在data里定义数据显示是很方便的，因为vue3中我们还要在setup里返回我们定义的数据，那为什么vue3要这么麻烦呢？

因为vue2在data里定义数据，这些数据的响应式是有缺陷的

我们增加和删除对象、数组里的数据，vue2捕获不到就不会去更新视图，因为vue2响应式使用的是Object.defineProperty实现的数据代理和数据劫持，是捕获不到增加和删除操作的。

而vue3里我们定义对象类型的数据时使用的是reactive函数，这个函数会返回一个proxy代理对象， proxy内部是可以检测到删除和增加的，所以响应式比vue2的更强大。

我们将源对象传入reactive函数，就会返回一个代理对象，我们对代理对象的操作都会被捕获(数据劫持)，然后vue就会去更新dom然后用Reflect去修改源对象。

虽然ref传入的是基本数据，但是如果传入对象类型数据，就回去求助reactive函数

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

完美的定义

关注关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
Vue3中为什么要用ref和reactive定义数据？

2022.2.18
复制链接

扫一扫

Vue3 中的数据侦测的实现

10-16

为了在Vue3中使用Proxy实现响应式，开发者需要在组件的setup函数中调用reactive或者ref函数，这两个函数将返回一个Proxy对象，其行为被Vue的响应式系统封装。reactive用于代理对象，而ref用于代理基本类型数据，它们...

vue3中Options API(学习)代码

11-05

在 Vue3 中，模板仍然在 Options API 中的组件定义中使用。 7. **依赖注入（Provide/Inject）** Vue3 保留了依赖注入功能，允许父组件向子孙组件传递数据。这在 Options API 中仍然可用，但建议使用 Composition ...

2 条评论您还未登录，请先登录后发表或查看评论

尤雨溪：Vue3 中推荐使用 Ref 而非 Reactive

weixin_48230016的博客

04-01

1158

vue3中，ref和reactive 都可以将数据作为响应式数据，在代码中，ref比reactive多带着一个 .value，常常让人觉得代码过长，显得难看，而在模板中则不需要。所以在使用时，一开始都更偏向于reactive？那为啥尤大还是更推荐ref？

vue3 reactive 和 ref 的区别

alokka的博客

04-25

5511

1. 定于数据角度对比： ref 用来定义：基本类型数据 reactive 用来定义：引用类型，例如对象、或数组类型的数据备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过 reactive 转为代理对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE

初学vue3与ts：定义一个对象，重置到初始值

最新发布

空&白的博客

07-03

377

【代码】uniapp vue3 + ts reactive定义一个对象，重置到初始值。

为什么 Vue3 的 ref 让很多大佬操碎了心？

weixin_46837985的博客

12-17

3265

作者：瑞哥来源：瑞哥聊前端最近 Vue3 关于 ref-sugar 的提案引起了广泛的讨论：juejin.im/post/689417…[1]<scriptsetup>im...

Vue3 的 ref 和 reactive 问题

猫老板的豆

02-02

2120

reactive 能做的 ref 也能做，并且还是用 reactive 做的当 ref 的参数为对象时，用的就是 reactive 方法在 Vue3 中，如果是把对象类型的数据弄成响应式，reactive 和 ref 都可以，且ref 内部是通过r eactive 来支持的。也就是说，你 reactive 能做的，我 ref 也能做。

为什么在vue3中每个页面都需要引用ref，reactive的问题

qq_42044542的博客

03-31

3256

在 Vue 3 中，对响应式数据的追踪和更新机制进行了优化，使得响应式数据的更新更加高效。，而不是自动引入，是因为 Vue 3 中引入了 Tree Shaking 机制，这种机制可以对无用的代码进行剪枝，从而减小打包后的文件体积。的原因是因为 Vue 3 引入了 Composition API，这是一种新的组合式 API，提供了更灵活的方式来编写 Vue 组件。还可以提高代码的可读性和可维护性。，那么无论我们是否使用这些 API，它们都会被打包进最终的代码中，这样就会增加打包后的文件体积。

【Vuejs】1665- 使用Ref还是Reactive？

pingan8787

04-27

251

我喜欢Vue 3的Composition API，它提供了两种方法来为Vue组件添加响应式状态：ref和reactive。当你使用ref时到处使用.value是很麻烦的，但当你用reactive创建的响应式对象进行重构时，也很容易丢失响应性。在这篇文章中，我将阐释你如何来选择reactive以及ref。一句话总结：默认情况下使用ref，当你需要对变量分组时使用reactive。Vue3的响应式在...

vue3-electron:使用Vue 3和Electronic创建文件资源管理器

05-26

2. **Ref and reactive**：Vue 3的响应式系统基于Proxy，`ref`和`reactive`是两个核心API。`ref`用于创建响应式引用，可以直接修改值，而`reactive`则用于创建一个响应式对象，其内部属性也会自动跟踪变化。 3. **...

Vue3中vuex学习代码，欢迎下载讨论学习

03-03

4. **Ref and reactive**：Vuex3利用Vue3的ref和reactive函数来创建响应式状态，这使得状态管理更加直观和高效。 5. **改进的TypeScript支持**：Vuex3提供了更好的TypeScript支持，帮助开发者在开发过程中捕获类型...

vue3 demo.zip

12-05

3. "vue3-basic-master"：这是一个基础的Vue3教程项目，涵盖了Vue3的核心概念，如setup函数、Composition API、生命周期钩子函数、ref和reactive等。开发者可以在此项目中逐步学习Vue3的基本用法和最佳实践。 4. ...

为什么Vue3 中应该使用 Ref 而不是 Reactive

weixin_66128399的博客

02-01

1202

解释是这样的：如果目标对象与源对象具有相同的键（属性名），则目标对象中的属性将被源对象中的属性覆盖，后面的源对象的属性将类似地覆盖前面的源对象的同名属性。时，如果不当使用，可能导致响应性失效，带来一些困扰。这种操作类似于深拷贝，不再共享同一内存地址，而是只是字面量的赋值，对该变量的赋值不会影响原来对象的属性值。用于将对象转换为响应式数据，可以直接访问和修改属性，适用于复杂的嵌套对象和数组。在一些情况下会失去响应，这可能导致数据回显失去响应（数据改了，DOM 没更新）。作为声明响应式状态的主要API。

vue3中对ref的理解

前端开发工程师博客

12-30

265

ref和reactive一样,也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦所以Vue3提供了ref方法实现简单值得监听。

Vue3中ref和reactive的区别

weixin_44301987的博客

10-28

367

想要把vue中的数据变成响应式的数据可以有ref和reactive两种方式 1.ref用来定义基本类型数据 2.reactive用来定义对象（或数组）类型数据 ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象原理： 1.ref通过Object.defineProperty()的get与set来实现响应式（数据劫持） 2.reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据 ref定义的数据：操作数据需要.valu

Vue3 reactive函数的使用。reactive()对比ref()的优点

ChuanyangChen的博客

05-26

2480

Vue3 reactive()的使用。reactive()对比ref()的优点作用：定义一个对象类型的响应式数据，基本类型用不了reactive() 语法：const 代理对象 = reactive(源对象) 接收一个对象或数组返回一个代理对象（proxy对象） reactive定义响应式数据是深层次的，对象中的对象，数组中的数组都能被监视到状态的修改（或叫值的修改） reactive内部是基于ES6的Proxy实现的，通过代理对象操作源对象内部数据进行操作。 reactive()在vue3中的使用

ref和reactive区别，vue团队为什么要这么设计？

qq_43405603的博客

07-29

458

ref和reactive区别，vue团队为什么要这么设计？

Vue3中的ref和reactive详解扩展

Lenny-zlp的博客

07-09

7724

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