当前位置：首页 > 科技 > 软件

有人抵触ref？有人抵触reactive？

来源：责编：时间：2024-05-07 09:10:34 90观看

导读一、背景这几天看到好多文章标题都是类似于：不用 ref 的 xx 个理由不用 reactive 的 xx 个理由历数 ref 的 xx 宗罪我就很不解，到底是什么原因导致有这两批人：抵触 ref 的人抵触 reactive 的人看了这些文章，我可以总结出

一、背景

这几天看到好多文章标题都是类似于：

不用 ref 的 xx 个理由
不用 reactive 的 xx 个理由
历数 ref 的 xx 宗罪

我就很不解，到底是什么原因导致有这两批人：

抵触 ref 的人
抵触 reactive 的人

看了这些文章，我可以总结出他们的想法。

1.抵触 reactive 的人

抵触 reactive 的人，他们的想法大概就是：

Vue 官方推荐 ref
reactive 有类型限制，ref 没有
reactive 使用不当会丢失响应式，比如解构
reactive 无法修改整个对象的值

2.抵触 ref 的人

抵触 ref 的人，他们的想法大概就是：

ref 的底层其实就是 reactive，用 ref 相当于多了一层，耗费性能
ref 的 .value 用起来很麻烦，增加使用者心里负担
ref 到模板的时候会解掉 value 这一层，这时候也会耗费性能

二、把我整笑了~

说实话，看到这些文章，有点把我整笑了，其实你要用 ref 或者 reactive 都没错，但是没比必要那么抵触，编程很多时候并不是非黑即白啊。。。

既然 Vue3 推出了 ref 和 reactive，那就说明他们都有存在的必要，在项目中不同的场景去运用他们，我觉得才是最好的，而不是用一个不用另一个，不止这两个，还有很多其他好用的 Vue3 API

我想针对这两批人的想法做一个回应：

1.回应 -> 抵触 reactive 的人

官方是推荐，不是抵触
reactive 既然有类型限制，那就在特定时候用 reactive 就行
使用不当会丢失响应式？那就是开发者对于 Vue3 API 的使用还不熟
用 Object.assign 就可以修改整个对象的值

2.回应 -> 抵触 ref 的人

耗费性能的话，这么久了，也没人贴出到底耗费了多少性能？
value 不麻烦，我觉得 .value 可以起到辨别响应式和非响应式数据的效果，而且现在编辑器都有插件提供的代码补全了，多个 .value 也花不了多少时间吧？

三、灵活使用 Vue3 API 才是王道

其实在平时开发中，我觉得基本数据类型和数组，都可以用 ref 来管理，而对象的话可以使用 reactive 来管理，比如表单对象、状态对象。

其实 Vue3 不止有这两个 API ，还有很多其他 API ，也很好用，大家只要去灵活使用它们，能让你的Vue3 项目上一个层次。

四、readonly

顾名思义，就是只读的意思，如果你的数据被这个 API 包裹住的话，那么修改之后并不会触发响应式，并且会提示警告。

toRaw 主要用在回调传参中，比如我封装一个 hooks，我想要把 hooks 内维护的响应式变量转成普通数据，当做参数传给回调函数，可以用 toRaw。

markRaw 可以用来标记响应式对象里的某个属性不被追踪，如果你的响应式对象里有某个属性数据量比较大，但又不想被追踪，你可以使用 markRaw。

unref 相当于返回 ref 的 value。

九、effectScope & onScopeDispose

effectScope 可以有两个作用：

收集副作用
全局状态管理

1.收集副作用

比如我们封装一个共用的 hooks，为了减少页面隐患，肯定会统一收集副作用，并且在组件销毁的时候去统一消除，比如以下代码：

但是这么收集很麻烦， effectScope 能帮我们做到统一收集，并且通过 stop 方法来进行清除，且 stop 执行的时候会触发 effectScope 内部的 onScopeDispose。

我们可以利用 effectScope & onScopeDispose 来做一些性能优化，比如下面这个例子，我们封装一个鼠标监听的 hooks

但是如果在页面里调用多次的话，那么势必会往 window 身上监听很多多余的事件，造成性能负担，所以解决方案就是，无论页面里调用再多次 useMouse，我们只往 window 身上加一个鼠标监听事件。

2.全局状态管理

现在 Vue3 最火的全局状态管理工具肯定是 Pinia 了，那么你们知道 Pinia 的原理是什么吗？原理就是依赖了 effectScope：

所以我们完全可以自己使用 effectScope 来实现自己的局部状态管理，比如我们封装一个通用组件，这个组件层级比较多，并且需要共享一些数据，那么这个时候肯定不会用 Pinia 这种全局状态管理，而是会自己写一个局部的状态管理，这个时候 effectScope 就可以排上用场了。

vueuse 中的 createGlobalState 就是为了这个而生：

十、provide & inject

Vue3 用来提供注入的 API，主要是用在组件的封装，比如那种层级较多的组件，且子组件需要依赖父组件甚至爷爷组件的数据，那么可以使用 provide & inject，最典型的例子就是 Form 表单组件，可以去看看各个组件库的源码，表单组件大部分都是用 provide & inject 来实现的，比如 Form、Form-Item、Input这三个需要互相依赖对方的规则、字段名、字段值，所以用 provide & inject 会更好。

具体用法看文档吧~https://cn.vuejs.org/guide/components/provide-inject.html。

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-86995-0.html有人抵触ref？有人抵触reactive？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Go 中间件的优雅实现：处理请求的艺术

下一篇：微服务架构中的挑战及应对方式：Outbox 模式

标签：

热门焦点

一加Ace2 Pro官宣：普及16G内存引领24G

一加官方今天继续为本月发布的新机一加Ace2 Pro带来预热，公布了内存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引领，还有呢？#一加Ace2Pro#，2023 年 8 月，敬请期待。”同时
小米官宣：2023年上半年出货量中国第一！

今日早间，小米电视官方微博带来消息，称2023年小米电视上半年出货量达到了中国第一，同时还表示小米电视的巨屏风暴即将开始。“公布一个好消息2023年#小米电视上半年出货量中国
六大权益！华为8月服务日开启：手机免费贴膜、维修免人工费

8月5日消息，一年一度的华为开发者大会2023（Together）日前在松山湖拉开帷幕，与此同时，华为8月服务日也式开启，到店可享六大专属权益。华为用户可在华为商城Ap
Golang 中的 io 包详解：组合接口

io.ReadWriter// ReadWriter is the interface that groups the basic Read and Write methods.type ReadWriter interface { Reader Writer}是对Reader和Writer接口的组合，
余承东:AI大模型技术的发展将会带来下一代智能终端操作系统的智慧体验

8月4日消息，2023年华为开发者大会（HDC.Together）今天正式开幕，华为发布HarmonyOS 4、全新升级的鸿蒙开发套件、HarmonyOS Next开发者预览版本等一系列
iQOO 11S评测：行业唯一的200W标准版旗舰

【Techweb评测】去年底，iQOO推出了“电竞旗舰”iQOO 11系列，作为一款性能强机，该机不仅全球首发2K 144Hz E6全感屏，搭载了第二代骁龙8平台及144Hz电竞
2299元起！iQOO Pad明晚首销：性能最强天玑平板

5月23日，iQOO如期举行了新品发布会，除了首发安卓最强旗舰处理器的iQOO Neo8系列新机外，还在发布会上推出了旗下首款平板电脑——iQOO Pad，其最大的卖点
iQOO Neo8 Pro抢先上架：首发天玑9200+ 安卓性能之王

经过了一段时间的密集爆料，昨日iQOO官方如期对外宣布：将于5月23日推出全新的iQOO Neo8系列新品，官方称这是一款拥有旗舰级性能调校的作品。随着发布时
iQOO Neo8 Pro真机谍照曝光：天玑9200+和V1+旗舰双芯加持

去年10月，iQOO推出了iQOO Neo7系列机型，不仅搭载了天玑9000+，而且是同价位唯一一款天玑9000+直屏旗舰，一经上市便受到了用户的广泛关注。在时隔半年后，