（六）响应式数据 - ref

1、概述：函数，创建并返回一个响应式数据对象，并在此对象上只包含一个.value属性指向该数据值；

2、用例：由vue提供，按需引入：import { ref } from 'vue'

如果使用ref将一个对象创建为响应式代理的话，则该对象会被进行深度响应式创建

1、概述：返回代理原始值，如果参数为ref则返回原始代理值，如果不是ref则返回参数本身

2、用例：由vue提供，按需引入：import { unref } from 'vue'

1、概述：可以将reactive创建的代理的某个属性传递出来用ref进行代理

2、用例：由vue提供，按需引入：import { toRef } from 'vue'

3、 注意：使用toRef将reactive的属性代理后，属性值的变化会同时影响toRef后的值和原本reactive的属性值

4、实例：在将prop的引用传递给复合函数的时候，toRef将非常有用

1、概述：可以将reactive创建的代理的所有属性传递出来用ref进行代理

2、用例：由vue提供，按需引入：import { toRefs } from 'vue'

3、 注意：使用toRefs将reactive的属性代理后，属性值的变化会同时影响toRefs后的对应属性值和原本reactive的属性值

4、实例：从组合函数返回响应式对象时，这将很有用， 而不是使用es6数据结构的方式，这样会使reactive的属性失去响应式代理

1、概述：判断响应式代理是否为ref所创建

2、用例：由vue提供，按需引入：import { isRef } from 'vue'

下一章： （七）计算属性 - computed

上一章： （五）响应式数据对象 - reactive

ps： 在你想从一个人身上得到什么的时候，先想想你自己在这个人身上付出了什么。

我们知道，在 vue3.0 引入了 composition API , setup 函数是其核心函数

在 setup 函数中，可以使用 ref 函数，用于创建一个响应式数据，当数据发生改变时， Vue 会自动更新 UI

例如：使用 ref 函数定义一个变量 count

然后在组件中引入该模块：import useChangeCount from "./composition_tiny_js/count"

并且在组件的 setup 中使用，并通过 return 的形式将外界需要用到的变量和函数暴露出去

这样上面暴露的 count 变量, change_count 方法就可以在外界使用了

需要注意的是：

以上就是 ref 函数的基本使用！

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

2）当我们给ref传递一个值之后，如果使用的是基本类型响应式依赖Object.defineProperty( )的get( )和set( )，如果ref使用的是引用类型，ref函数底层会自动将ref转换成reactiveref(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方法使该对象具有高度的响应式。

---