vue 3 ref,vue3 ref用法
我们知道ref可以用来创建响应式数据，toRef也可以创建响应式数据。本文主要介绍Vue3中ref和toRef区别的相关信息，有需要的可以参考一下。
1. ref是复制，视图会更新
如果使用ref将对象中的某个属性值转换为响应数据
我们对响应数据的修改不会影响原始数据；
同时，视图将被更新。
Ref是复制。复制不会影响原始数据。
模板
差异
差异
div{{stateObj}}/div
Button @click=func1 按钮/按钮
/div
/div
/模板
脚本
从“vue”导入{ref}
导出默认值{
名称：“应用程序”，
setup(){
Let obj={name:张三，年龄：22}
//在对象中设置属性
//成为响应数据
//而不是将对象转换成响应数据
让stateObj=ref(obj.name)
函数func1(){
StateObj.value=张三变李四；
//原始数据没有改变。原始数据obj {姓名：张三，年龄：22}
Console.log(原始数据对象，对象)
//响应数据已更改。
/**
响应状态对象RefImpl{
_rawValue:“张三变李四”，_ shall: false，
__v_isRef: true，_value:张三变成李四
}
**/
//成为ref的对象。
console . log( responsive stateObj ，state obj)
}
返回{stateObj，func1}
},
}
/脚本
2.toRef是引用，视图不跟新
如果对象中的属性被toRef改变成响应数据
如果我们修改响应数据，将会影响原始数据。
如果数据是由toRef创建的，则在修改值后，数据不会触发视图。
ToRef是一个引用；它引用上一个对象中的属性。
所以你修改之后，会影响原始数据的最终值。
模板
差异
差异
div{{state}}/div
Button @click=func1 按钮/按钮
/div
/div
/模板
脚本
从“vue”导入{toRef}
导出默认值{
名称：“应用程序”，
setup(){
Let obj={name:张三，年龄：22}
//将对象中的属性名更改为响应数据
//而不是将对象转换成响应数据
let state=toRef(obj， name )；
console.log(toRef ，state)
函数func1(){
State.value=我是李四；
console.log(obj ，obj)
console.log(state ，状态)
}
返回{state，func1}
},
}
/脚本
3.结论
复制修改响应数据，不影响之前的数据，界面会改变。
参考引用，修改响应数据，会影响之前的数据，界面不会更新。
toRef的使用场景
如果您想将响应数据与原始数据相关联。
并且在更新响应数据后不想更新视图；可以用toRef。
小结：
ref和toRef的区别
(1).ref本质上是副本，修改响应式数据不会影响原数据；toRef的本质是引用关系，修改响应式数据会影响原始数据。
(2)如果2)。ref数据发生变化，界面会自动更新；当数据发生变化时，界面不会自动更新。
(3).toRef涉及不同的refsToRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性。
总结
关于Vue3中ref和toRef的区别这篇文章到此为止。更多关于Vue3 ref和toRef的区别，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。