如果你使用过 Vue3，你知道的，在 Vue3 中有两个非常常用的响应式 API：reactive 和 ref。它们会把我们想要追踪的数据变成响应式。

而且我们在使用时一直被告知 ref 用于创建基础类型的响应式，也可以创建引用类型的响应式。而对于引用类型，底层也是转换为 reactive 来进行响应式处理。那既然这样为撒还需要 reactive ，全部使用 ref 不就行了吗？

虽然 ref 创建的响应式数据在脚本中需要通过 .value 才能访问到呀！但是这里肯定影响不大。并且在模板中会自动添加上 .value，所以模板中不需要通过 .value 访问。

既然这二者基本没撒差别，但是还是暴露了 reactive 这个 API，难道有什么场景是 reactive 能做而 ref 做不了的？

简单了解 ref & reactive

我们先简单了解一下这两个 API。

reactive

返回对象的响应式副本，响应式转换是“深层”的——它影响所有嵌套 property。我们一般这样写。

const obj = reactive({ count: 0 })

并且可以直接使用。

const count = obj.count

ref

受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。我们一般是这样写。

const data = ref(xxx)

引用的时候，一般会通过data.value的方式引用。

const dataValue = data.value

通过跟踪 Vue3 的源代码可以证明，当我们调用 ref 方法来定义响应式数据时，当参数为对象类型时，其实里面用的是 reactive 方法。也就是说上面的 data.value ，事实上是 reactive 方法创造出来的。

总结

reactive 能做的 ref 也能做，并且还是用 reactive 做的
当 ref 的参数为对象时，用的就是 reactive 方法
在 Vue3 中，如果是把对象类型的数据弄成响应式，reactive 和 ref 都可以，且ref 内部是通过r eactive 来支持的。也就是说，你 reactive 能做的，我 ref 也能做。
简单来说 ref 是在 reactive 上在进行了封装进行了增强，所以在 Vue3 中 reactive 能做的，ref 也能做，reactive 不能做的，ref 也能做。
个人理解ref是reactive的语法糖，如：ref(1) 就等价于 reactive({value: 1});
平时项目ref一把梭，是可以的，问题也不大

Vue3 的 ref 和 reactive 问题相关推荐

Vue3 初探 ref、reactive 、及改变数组的值
概况 Vue3 里要实现数据的响应式监听一共有两种方式既:ref 和 reactive 他们既有区别又有联系. ref() ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型, ...
vue3中ref、reactive、shallowRef、 shallowReactive、toRaw、unref、toRef、toRefs、customRef使用与区别
ref ref toRef 普通ref对象特殊ref对象不会和原始对象挂钩创建的ref对象,与原始对象挂钩重新渲染不会触发渲染 -普通ref对象不会和原始对象挂钩重新渲染如下面的例子中 ...
vue3 - ref和reactive的区别
文章搬运自wx60d4764eb475e 的vue3中ref和reactive的区别(系列六) 1. ref和reactive区别: 如果在template里使用的是ref类型的数据, 那么V ...
【Vue3】李南江老师讲解--个人笔记（二）ref 和 reactive详解
[vue3笔记之 ref 和 reactive ] 实现响应式数据的方法可以使用 ref,reactive定义响应式数据,本质上就是将传入的数据包装成一个Proxy对象. 使用 reactive 必 ...
vue3中的ref 和 reactive 定义数组
在vue3中,定义响应式数据一般有两种方式:ref 和 reactive 一般来说,我们使用 ref 来定义基本数据类型,使用 reactive 来定义复杂数据类型但是也可以使用 ref 来定义数组 ...
vue3 ref 和 reactive 区别
前言最近学习cloud项目,前端使用到 vue3 + ts 等技术,在写需求过程中遇到响应式数据问题,经百度查找相关笔记,在此记录一下,在实战中成长吧. 问题出现的问题:定义一个默认数组并且 fo ...
Vue3响应式API ref和reactive
在vue3中,有两个重要的api分别是ref 和reactive 使用方法如下 import { reactive, ref } from 'vue';setup(){let student = re ...
vue3 ref，reactive请求后的赋值问题以及解决方法
vue3 ref,reactive请求后的赋值问题以及解决方法开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我们可能会稍微的有点不适应 ...
vue3之实现响应式数据ref和reactive
用途 ref.reactive都是vue3提供实现响应式数据的方法 ref() 接受一个内部值,返回一个响应式的.可更改的ref对象,此对象只有一个指向其内部的属性.value ref可以说是简化版的 ...

Vue3 的 ref 和 reactive 问题

简单了解 ref & reactive

reactive

ref

总结

Vue3 的 ref 和 reactive 问题相关推荐

最新文章

热门文章