Reactive API 和 Ref API

Reactive API 

如果想为在setup中定义的数据提供响应式的特性，那么我们可以使用reactive的函数：

那么这是什么原因呢？为什么就可以变成响应式的呢？

• 这是因为当我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖收集；
• 当数据发生改变时，所有收集到的依赖都是进行对应的响应式操作（比如更新界面）；
• 事实上，我们编写的data选项，也是在内部交给了reactive函数将其编程响应式对象的；

Ref API

reactive API对传入的类型是有限制的，它要求我们必须传入的是一个对象或者数组类型：

• 如果我们传入一个基本数据类型（String、Number、Boolean）会报一个警告；

　　　

　　　

这个时候Vue3给我们提供了另外一个API：ref API

• ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是ref名称的来源(reference的缩写)；
• 它内部的值是在 ref 的 value 属性中被维护的；

　　　　

　　　　message 变成一个 ref 的响应式的引用。message是一个对象，所以按理说在取值的时候需要通过message.value拿到值。但是vue为了开发方便，当我们在

　　　　template中使用message时，会帮我们自动解包。

这里有两个注意事项：

• 在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过 ref.value 的方式来使用；
• 但是在 setup 函数内部，它依然是一个 ref 引用， 所以对其进行操作时，我们依然需要使用 ref.value 的方式；

Ref自动解包

模板中的解包是浅层的解包，如果我们的代码是下面的方式：

如果我们将ref放到一个reactive的属性当中，那么在模板中使用时，它会自动解包：

 

Reactive判断的API

 

toRef

 

如果我们只希望转换一个 reactive 对象中的属性为 ref, 那么可以使用 toRef 的方法： 

 

 

ref其他的API 

① unref

如果我们想要获取一个ref引用中的value，那么也可以通过unref方法：

• 如果参数是一个ref，则返回内部值，否则返回参数本身；
• 这是 val = isRef(val) ? val.value : val 的语法糖函数；

② isRef

判断值是否是一个ref对象。

③ shallowRef

创建一个浅层的ref对象；

④ triggerRef

手动触发和shallowRef 相关联的副作用：

 

 

⑤ customRef

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显示控制：

• 要一个工厂函数，该函数接受track 和trigger 函数作为参数；
• 并且应该返回一个带有get 和set 的对象；

这里我们使用一个的案例：

• 对双向绑定的属性进行debounce(节流)的操作；

customRef的案例