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

有人抵触Ref？有人抵触Reactive？

来源：责编：时间：2024-05-07 09:15:05 295观看

导读前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~背景这几天看到好多文章标题都是类似于：不用 ref 的 xx 个理由不用 reactive 的 xx 个理由历数 ref 的 xx 宗罪我就很不

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

背景

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

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

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

抵触 ref 的人
抵触 reactive 的人

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

抵触 reactive 的人

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

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

抵触 ref 的人

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

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

把我整笑了~

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

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

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

回应 -> 抵触 reactive 的人

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

回应 -> 抵触 ref 的人

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

灵活使用 Vue3 API 才是王道

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

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

readonly

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

图片

readonly 的用途一般用于一些 hooks 暴露出来的变量，不想外界去修改，比如我封装一个 hooks，这样去做的话，那么外界只能用变量，但是不能修改变量，这样大大保护了 hooks 内部的逻辑~

图片

shallowRef

shallowRef 用来包住一个基础类型或者引用类型，如果是基础类型那么跟 ref 基本没区别，如果是引用类型的话，那么直接改深层属性是不能触发响应式的，除非直接修改引用地址，如下：

图片

注意：改深层属性能改数据，只是没触发响应式，所以当下一次响应式触发的时候，你修改的深层数据会渲染到页面上~

shallowRef 的用处主要用于一些比较大的但又变化不大的数据，比如我有一个表格数据，通过接口直接获取，并且主要用在前端展示，需要修改一些深层的属性，但是这些属性并不需要立即表现在页面上，比如以下例子，我只需要展示 name、age 字段，至于 isOld 字段并不需要展示，我想要计算 isOld 但是又不想触发响应式更新，所以可以用 shallowRef 包起来，进而减少响应式更新，优化性能

图片

shallowReactive

shallowReactive 用来包住一个引用类型，被包住后，修改第一层才会触发响应式更新，也就是浅层的属性，修改深层的属性并不会触发响应式更新

注意：改深层属性能改数据，只是没触发响应式，所以当下一次响应式触发的时候，你修改的深层数据会渲染到页面上~

图片

shallowReactive 用的比较少，shallowReactive 的用处跟 shallowRef 比较像，都是为了让一些比较大的数据能减少响应式更新，进而优化性能

toRef & toRefs

先说说 toRef 吧，我们平时在使用 reactive 的时候会有一个苦恼，那就是解构，比如看以下例子，我们为了少些一些代码，解构出来了 name 并放到模板里渲染，但是当我们想改原数据的时候，发现 name 并不会更新，这就是解构出来基础类型的苦恼

图片

这时我们可以使用 toRef，这个时候我们直接修改 name 也会触发原数据的修改，修改原数据也会触发 name 的修改

图片

但是如果是属性太多了，我们想一个一个去用 toRef 的话会写很多代码

图片

所以我们可以使用 toRefs 一次性解构

图片

toRaw & markRaw & unref

toRaw 可以把一个响应式 reactive 转成普通对象，也就是把响应式对象转成非响应式对象

图片

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

图片

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

图片

unref 相当于返回 ref 的 value

图片

effectScope & onScopeDispose

effectScope 可以有两个作用：

收集副作用
全局状态管理

收集副作用

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

图片

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

图片

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

图片

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

图片

全局状态管理

现在 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

图片

本文链接：http://www.28at.com/showinfo-26-87036-0.html有人抵触Ref？有人抵触Reactive？

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

上一篇：总是做后台管理系统，到底要怎么提升自己呢？

下一篇：每个开发者都必须要知道的，三个JS高效运算符：?. || ?? || ??=

标签：

热门焦点

0糖0卡0脂旭日森林仙草乌龙茶优惠：15瓶到手29元

旭日森林无糖仙草乌龙茶510ml*15瓶平时要卖为79.9元，今日下单领取50元优惠券，到手价为29.9元。产品规格：0糖0卡0脂，添加草本仙草汁，清凉爽口，富含茶多酚，保留
三言两语说透设计模式的艺术-简单工厂模式

一、写在前面工厂模式是最常见的一种创建型设计模式，通常说的工厂模式指的是工厂方法模式，是使用频率最高的工厂模式。简单工厂模式又称为静态工厂方法模式，不属于GoF 23种设计
一篇聊聊Go错误封装机制

%w 是用于错误包装（Error Wrapping）的格式化动词。它是用于 fmt.Errorf 和 fmt.Sprintf 函数中的一个特殊格式化动词，用于将一个错误（或其他可打印的值）包装在一个新的错误中。使
三言两语说透柯里化和反柯里化

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是两种很有用的技术，可以帮助我们写出更加优雅、泛用的函数。本文将首先介绍柯里化和反柯里化的概念、实现原理和应用
一文掌握 Golang 模糊测试（Fuzz Testing）

模糊测试（Fuzz Testing）模糊测试（Fuzz Testing）是通过向目标系统提供非预期的输入并监视异常结果来发现软件漏洞的方法。可以用来发现应用程序、操作系统和网络协议等中的漏洞或
WebRTC.Net库开发进阶，教你实现屏幕共享和多路复用！

WebRTC.Net库：让你的应用更亲民友好，实现视频通话无痛接入！除了基本用法外，还有一些进阶用法可以更好地利用该库。自定义 STUN/TURN 服务器配置WebRTC.Net 默认使用 Google 的
每天一道面试题-CPU伪共享

前言：了不起：又到了每天一到面试题的时候了！学弟，最近学习的怎么样啊了不起学弟：最近学习的还不错，每天都在学习，每天都在进步！了不起：那你最近学习的什么呢？了不起学弟：最近在学习C
疑似小米14外观设计图曝光：后置相机模组变化不大

下半年的大幕已经开启，而谁将成为下半年手机圈的主角就成为了大家关注的焦点，其中被传有望拿下新一代骁龙8 Gen3旗舰芯片的小米14系列更是备受大家瞩
引领旗舰级影像能力向中端机普及 OPPO K11 系列发布 1799 元起

7月25日，OPPO正式发布K系列新品—— OPPO K11 。此次 K11 在中端手机市场长期被忽视的影像板块发力，突破性地搭载索尼 IMX890 旗舰大底主摄，支持 OIS

有人抵触Ref？有人抵触Reactive？

前言

背景

抵触 reactive 的人

抵触 ref 的人

把我整笑了~

回应 -> 抵触 reactive 的人

回应 -> 抵触 ref 的人

灵活使用 Vue3 API 才是王道

readonly

shallowRef

shallowReactive

toRef & toRefs

toRaw & markRaw & unref

effectScope & onScopeDispose

收集副作用

全局状态管理

provide & inject

0糖0卡0脂旭日森林仙草乌龙茶优惠：15瓶到手29元

三言两语说透设计模式的艺术-简单工厂模式

一篇聊聊Go错误封装机制

三言两语说透柯里化和反柯里化

一文掌握 Golang 模糊测试（Fuzz Testing）

WebRTC.Net库开发进阶，教你实现屏幕共享和多路复用！

每天一道面试题-CPU伪共享

疑似小米14外观设计图曝光：后置相机模组变化不大

引领旗舰级影像能力向中端机普及 OPPO K11 系列发布 1799 元起

最新推荐

猜你喜欢

热门推荐

相关资讯