Vue3的ref和reactive区别及使用

Question

如题所述

Answer 1

　　1）ref创建一个响应式数据，一般来说用于创建简单类型的响应式对象，比如String、Number、boolean类型；

　　2）当我们给ref传递一个值之后，如果使用的是基本类型响应式依赖Object.defineProperty( )的get( )和set( )，如果ref使用的是引用类型，ref函数底层会自动将ref转换成reactive; ref(18) => reactive({value:18})；

　　3）需要注意的是ref定义的值在Vue中使用直接使用所定义的字段，但是在js中获取或者修改值需要通过value；

　　4）ref也可以创建引用类型，对于复杂的对象，值是一个被proxy拦截处理过的对象，但是里面的属性不是RefImpl类型的对象，proxy代理的对象同样被挂载到value上，所以可以通过obj.value.key来读取属性，这些属性同样也是响应式的，更改时可以触发视图的更新

　　具体使用及结构打印如下：

　　1）reactive里面参数定义必须是对象或者数组(json/arr)，本质将传入的数据包装成proxy对象；

　　2）基于Es6的Proxy实现，通过Reflect反射代理操作源对象，相比于reactive定义的浅层次响应式数据对象，reactive定义的是更深层次的响应式数据对象；

　　3）

　　1）一般来说，ref被用来定义简单的字符串或者数值，而reactive被用来定义对象数组等

　　2）实际上都能用，而且ref也可以去定义简单的对象和数组，也是具有响应式的，不过官方文档中有提到如果将对象分配为ref值，则可以通过reactive方法使该对象具有高度的响应式。