Vue3 的 ref 和 reactive 问题
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
如果你使用过 Vue3你知道的在 Vue3 中有两个非常常用的响应式 APIreactive 和 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一把梭是可以的问题也不大