vue3中给响应式数据赋值操作,以及toRef 和 toRefs区别
最近在开发vue3时,定义了一个变量:
这里我将接口获取到的数据直接赋给了form,这样我在表单中:
这里的title会显示,但是当修改title时数据不会改变,失去了响应式功能
解决方案:
1、使用reactive的话,在里面定义一个对象去存储数据
使用:
2、可以直接使用ref,定义成数组或者对象
使用:
这样就实现了数据的响应式。
toRef 和 toRefs作用和区别:
toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref,而且它既保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新,如果你知道 浅拷贝 的话那么这个引用就很好理解了,它复制的其实就是引用 + 响应式 ref
不加 s 和 加 s 的区别就是这样:
toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref