vue3的ref reactive有啥区别,vue3.0 ref reactive
在vue3中，有两种正式的方法来声明响应数据：Ref()和Reactive()。本文主要介绍Vue3.0中ref和reactive区别的相关信息，有需要的可以参考一下。
目录
参考和反应
裁判员
ReactiveRef和Reactive的区别
浅层参考和浅层反应
ToRaw -只修改数据而不渲染页面
MarkRaw -不跟踪数据toRef -与数据源关联，不修改UItoRefs -设置多个toRef属性值customRef -自定义refref捆绑页面的标记摘要。
Ref与Reactive
Ref
Ref用于创建响应数据的基本类型，默认情况下模板调用value来显示数据。方法修改需要修改要修改的值的值。
！-模板语法
模板
div{{state}}/div
/模板
//js脚本
setup(){
设state=ref(10)
state.value=11
返回{state}
}
Reactive
Reactive用于创建引用类型的响应数据，
！-模板语法
模板
div{{state.name}}/div
/模板
//js脚本
setup(){
让state=reactive({name:aaa}})
张三
返回{state}
}
Ref与Reactive的区别
Ref的本质是由Reactive创造的，Ref(10)=Reactive({ value:10 })；
在Ref模板调用中可以直接省略Value，需要修改value的值来改变方法中的变量值，这样修改才能成功。Reactive必须在模板中写入全部或显示全部数据。
Reactive的本质是把各层的数字解析成代理对象，Reactive的响应默认是递归的。改变某层的值会被递归调用来重新渲染dom。
shallowRef 与shallowReactive
Ref和Reactive都创建递归响应，将每一层的json数据解析到一个代理对象中。shallowRef和shallowReactive创建非递归的响应对象，shallowReactive创建的第一层数据会重新渲染dom。
var state=shallowReactive({
答：“答”，
gf:{
乙：乙，
女：{
丙：丙，
s:{d:d}
}
}
})
state.a=1
//更改第一层的数据将导致页面重新呈现
//state=Proxy {a:a ，gf:{.}}
//如果不更改第一层，只会更改其他数据页，不会重新呈现。例如，state.gf.b=2
shallowRef创建的responsive对象需要修改整个值来重新渲染dom。
var state=shallowRef({
答：“答”，
gf:{
乙：乙，
女：{
丙：丙，
s:{d:d}
}
}
})
state.value.a=1
/*
无法重新渲染。shallowRef的原理也是由shallowReactive({value:{}})创造的。您必须修改该值才能重新渲染。
*/
state.value={
答：“1”，
gf:{
乙：二，
女：{
丙： 3 ，
s:{d:d}
}
}
}
如果使用shallowRef，只想更新某一层的数据，可以使用triggerRef。
var state=shallowRef({
答：“答”，
gf:{
乙：乙，
女：{
丙：丙，
s:{d:d}
}
}
})
state . value . gf . f . SD=4
triggerRef(状态)
页面将再次呈现。
toRaw ---只修改数据不渲染页面
如果只想修改响应数据，不想造成页面渲染，可以使用ToRaw。
var obj={name:test}
变量状态=反应(对象)
var obj2=toRaw(州)
ob2 . name= zs //不会导致页面呈现。
-
//如果是用ref创建的，则获取值
var obj={name:test}
变量状态=ref(obj)
var obj2=toRaw(state.value)
markRaw --- 不追踪数据
如果不希望数据被跟踪成为响应数据，可以调用这个方法，不能跟踪修改数据重新渲染页面。
var obj={name:test}
obj=markRaw(obj)
变量状态=反应(对象)
State.name=zs//数据页不能修改，也不会被修改。
toRef --- 跟数据源关联 不修改UI
如果用ref创建的响应变量不会与源数据相关联，如果它希望与源数据相关联，但数据更改不会更新UI，则应该用toRef创建。
var obj={name:test}
var state=ref(obj.name)
State.name=zs //此时obj的name属性的值不会改变，UI会自动更新。
///
var obj={name:test}
Var=toref (obj， name )//只能设置一个属性值。
State.name=zs//此时obj中name属性的值会发生变化，但是UI不会更新。
toRefs ---设置多个toRef属性值
如果要设置多个toRef属性值，可以使用toRef。
var obj={name:测试，年龄：16}
var state=toRefs(obj)
state.name.value=zs//obj的名称属性值也会改变，但是UI不会更新。
age of state.age.value=18//obj的属性值也会改变，但是UI不会更新。
customRef ---自定义一个ref
您可以通过customRef方法自定义响应ref方法。
函数myRef(值){
/*
customRef函数返回一个对象。对象中有两个方法，get/set方法。创建的对象在获取数据时可以访问get方法，创建的对象修改其值时会触发set方法。
customRef函数有两个参数，track/trigger，track参数表示跟踪。它在get方法中被调用，可以随时跟踪数据变化。触发参数的意思是触发响应，set方法中的调用可以更新UI界面。
*/
return customRef((跟踪，触发)={
返回{
get(){
Track()//跟踪数据
返回值
},
set(newVal){
值=新值
Trigger()//更新UI界面
}
}
})
}
setup(){
var age=myRef(18)
年龄值=20
}
ref 捆绑页面的标签
Vue2.0可以通过这个得到dom元素. refs vue3取消这个操作，得到不带refs的dom元素，vue3取消这个操作，得到不带refs的dom元素，vue3取消这个操作。没有refs的属性值，可以直接用ref()方法生成响应式变量，用dom元素绑定。
模板
div ref=box/div
/模板
从“vue”导入{ref，onMounted}
/*
设置方法调用在创建前和创建后的生命周期之间。
*/
脚本
setup(){
var box=ref(空)
onMounted(()={
console.log(onMounted ，box.value)
})
console.log(box.value)
返回{box}
}
/脚本
总结
关于Vue3.0中REF和Reactive的区别的这篇文章到此为止，更多关于Vue 3.0中Ref和Reactive的区别，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。