Vue3主要的响应类方法(ref、reactive、toRef、toRefs)

发布时间 2023-07-07 11:08:13作者: pwindy

1.Vue.ref()

1.1.可以为单个属性添加响应式状态。
1.2.可以为对象添加响应式状态,当给对象的某个属性单独ref后,改变后的属性值不会同时改变原始值。
1.3.访问数据值,需要添加.value。
1.4.原始数据的拷贝。(原始数据不被改变)

2.Vue.reactive()

2.1.给对象添加响应式状态
2.2.访问数据值,不需要添加.value。

2.3.原始数据的拷贝。(原始数据不被改变)

3.Vue.toRef()

主要为对象添加单个响应式属性

3.1.可以接收响应对象,为响应对象上的属性新建单个响应式ref,保持对其源对象属性的响应式连接。
3.2.可以接收非响应对象(普通对象),对单个属性添加响应式ref。但是这个响应式ref的改变不会更新界面。
3.3.访问数据值,需要添加.value。

3.4.roRef后的ref数据不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据。

4.Vue.roRefs()

4.1.只接收响应式对象,否则发出警告。
4.2.将原响应对象转换为普通对象,可解构,但不丢失响应式。
4.3.可以将reactive方法返回的响应式数据给toRefs(),再来进行解构。
4.4.访问数据值,需要添加.value。
4.5.toRefs后的ref数据不是原始数据的拷贝,是引用,改变结果数据的值也会同时改变原始数据。

 

总结:目前用得最多的还是使用ref和reactive来创建响应式对象,使用toRefs来转换成可以方便使用的解构的对象。