Vue中ref、reactive、toRef、toRefs的区别
一、ref、reactive
setup
函数中默认定义的变量并不是响应式的(即数据变了以后页面不会跟着变),如果想让变量变为响应式的变量,需要使用 ref
和 reactive
函数修饰变量。
ref
函数可以把基本类型变量变为响应式引用reactive
函数可以把复合类型的变量变为响应式的引用。
1.ref:
- ref用于为数据添加响应式状态,本质是将一个数据变成一个对象,这个对象具有响应式特点。
- 获取数据值需要加.value
- 因为reactive只能传入对象类型的参数,所以基本数据类型添加响应式状态只能用ref(ref也可以定义复杂的数据)
ref
底层使用的是proxy
代理函数实现双向绑定,proxy
函数必须要接收一个对象,如果想修改 name 的值,需要使用name.value。
2.relative
二、toRef、toRefs
1.toRef:
- 只希望转换
一个reactive对象
中的属性为ref
, 那么可以使用toRef
的方法 - toRef接收两个参数,第一个参数是哪个对象,第二个参数是对象的哪个属性。
toRef当数据发生改变时,界面不会自动更新 - 获取数据值需要加.value
2.toRefs
- 我们希望将对象的多个属性都变成响应式数据,并且要求响应式数据和原始数据关联,并且更新响应式数据的时候不更新界面,就可以使用toRefs,用于批量设置多个数据为响应式数据。
原文地址:https://blog.csdn.net/weixin_40992252/article/details/143426573
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!