vue3的ref reactive有啥区别,vue reactive ref
本文主要介绍了Vue3中一些reactive可以做而ref不能做的场景的使用的详细说明。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
简介：简要了解ref可以做什么。ref也可以做，用reactive做的REF可以做，但是reactive做不了总结。
前言
如果你用过Vue3，你就知道Vue3中有两个非常常用的响应式API:Reactive和ref。他们会把我们想要追踪的数据转化为回应。
而且我们在使用的时候，已经被告知ref是用来创建基本类型的响应的，也可以创建引用类型的响应。对于参照类型，底层也会转换为反应层，以便进行反应处理。既然还是要无功，就不能只用全ref吗？
虽然ref创建的响应数据需要通过。脚本中的值！但在这里肯定没有太大影响。还有。值将自动添加到模板中，因此不需要通过。模板中的值。
既然两者基本没什么区别，但是reactive的API还是暴露出来了，那是不是有什么场景reactive能做而ref不能呢？
简单了解 ref reactive
让我们简单看一下这两个API。
reactive
返回对象的响应副本，并且响应转换是影响所有嵌套属性的“深”3354。我们一般是这样写的。
const obj=reactive({ count: 0 })
并且可以直接使用。
常量计数=obj.count
ref
接受内部值并返回一个响应性的可变ref对象。引用对象只有一个。valueproperty，它指向内部值。我们一般是这样写的。
常数数据=ref(xxx)
引用的时候一般都是用data.value来引用。
常量数据值=数据值
通过追溯Vue3的源代码，可以证明当我们调用ref方法定义响应式数据时，当参数是对象类型时，实际上使用的是reactive方法。也就是说，上面的data.value实际上是由reactive方法创建的。
reactive 能做的 ref 也能做，并且还是用 reactive 做的
我们通过源代码来看看ref的源代码实现。
源代码分析版本：3.2.36
函数引用(值){
返回createRef(值，假)；
}
ref函数跳转到createRef函数。
函数createRef(rawValue，shallow) {
.
返回新的RefImpl(rawValue，shallow)；
}
createRef函数返回RefImpl类的一个实例，换句话说，Ref创建的响应就是RefImpl实例对象。
const count=ref(1)；
console.log(计数)；
让我们把重点放在这个RefImpl类上。
类RefImpl {
构造函数(value，_ _ v _ isShallow
.
这个。_value=__v_isShallow？value : toReactive(值)；
}
获取值(){
trackRefValue(this)；
归还这个。_ value
}
设定值(新值){
newVal=这个。__v_isShallow？纽瓦尔：托拉(纽瓦尔)；
如果(hasChanged(newVal，this。_rawValue)) {
这个。_ rawValue=newVal
这个。_value=this。__v_isShallow？new val:to reactive(new val)；
triggerefvalue(this，new val)；
}
}
}
这里的__v_isShallow参数默认为false。顺便说一下，当我们使用shallowRef时，这个参数是正确的。
函数shallowRef(值){
返回createRef(值，真)；
}
Ref和Reactive创建的那些都是递归响应的，每一层的json数据都被解析成一个代理对象。shallowRef和shallowReactive创建的响应对象是非递归的，shallowReactive创建的数据会在第一层的数据发生变化时重新渲染dom。
var state=shallowReactive({
答：“答”，
gf:{
乙：乙，
女：{
丙：丙，
s:{d:d}
}
}
});
//更改第一层的数据将导致页面重新呈现
state.a=1
//如果第一层不改变，只有其他数据页不会重新呈现。
状态. gf.b=2
shallowRef创建的responsive对象需要修改整个值来重新呈现dom。
var state=shallowRef({
答：“答”，
gf:{
乙：乙，
女：{
丙：丙，
s:{d:d}
}
}
});
//不会重新呈现
state.value.a=1
//您必须修改整个值才能重新呈现
state.value={
答：“1”，
gf:{
乙：二，
女：{
丙： 3 ，
s:{d:d}
}
}
}
如果要更新shallowRef的一层数据并触发渲染，可以使用triggerRef。
var state=shallowRef({
答：“答”，
gf:{
乙：乙，
女：{
丙：丙，
s:{d:d}
}
}
})
state . value . gf . f . SD=4
triggerRef(状态)
因此，这里我们将使用toReactive(value)函数。
const is object=(val)=gt；瓦尔。==空放大器；amptypeof val=== object
const to reactive=(value)=gt；isObject(值)？无功(值) :值；
可以看到，如果传入的参数是对象，返回值会继续调用reactive方法进行包装，reactive最终会通过代理拦截响应。返回的对象也是一个代理对象，但是这里不重要，我们只需要知道当 ref 的参数为对象时，用的就是 reactive 方法。
常数数据=反应({
计数：1，
});
console.log(数据)；
const data_ref=ref({
计数：1，
});
console . log(data _ ref)；
这样一来，当传入ref的对象作为参数和基本类型返回的结果作为参数时，就明显不一样了。
基本类型返回值是具体值，对象类型返回值是reactive方法创建的代理对象。
通过源码来看，其实也证明了，在 Vue3 中，如果是把对象类型的数据弄成响应式，reactive 和 ref 都可以，且ref 内部是通过r eactive 来支持的。
也就是说，你 reactive 能做的，我 ref 也能做。
ref 能做，但是 reactive 不能做
其实从上面的例子就可以知道什么是无功不能做的。显然，reactive不支持对基本类型数据的响应，也就是说基本类型数据不能直接作为reactive的参数。
简单看一下源代码。
功能反应(目标){
.
返回createReactiveObject(.);
}
reactive函数跳转到createReactiveObject函数。
const is object=(val)=gt；瓦尔。==空放大器；amptypeof val=== object
函数createReactiveObject(.) {
如果(！isObject(target)) {
{
console.warn(`value不能成为reactive:$ { String(target)} `)；
}
返回目标；
}
.
const proxy=新代理(.);
proxyMap.set(目标，代理)；
返回代理；
}
CreateReactiveObject一开始会判断目标是否是对象，如果不是，会提示直接返回。如果是一个对象，那么目标就会被代理变成一个响应对象。
const data=reactive(10)；
总结
我们通过源代码分析了两个响应式API，发现Vue3中有哪些场景是reactive能做而ref不能做的？
结论是：没有
简单来说，ref是在reactive上封装增强的，所以在Vue3中，reactive能做的，ref能做，reactive不能做的，ref能做。
涉及
https://v3.cn.vuejs.org/api/refs-api.html#ref
https://v3.cn.vuejs.org/api/basic-reactivity.html
在https://v3.cn.vuejs.org/guide/reactivity.html#?什么是响应
https://github.com/vuejs/docs-next-zh-c
以上是Vue3中reactive和ref函数的使用场景细节。更多关于Vue3中Vue3无功参考函数的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。