reactive

使用 reactive 可以将对象或数组变成响应式的，返回一个代理对象。它有两个特点：

• 对代理对象里面的数据进行修改后，模版上的数据不会立即更新，需要等待 DOM 更新完成，可以使用全局 API nextTick 函数，在该函数中可以访问变化后的数据。
• 通过 reactive 转化成响应式对象，它是深层响应式的，也就是修改嵌套的子对象也会响应式的更新。

通过 play.vueuse.org 可以很方便的在线验证效果。为什么不用 Vue SFC 演练场？两个对比使用的就会发现，vue use 演练场没有冗余的 script 和 template 脚本，个人认为更加简洁方便，推荐使用。

上图中的例子可以很好的说明 reactive 对象的使用方法以及该对象的两个特点。通过 obj.count 可以响应式的获取和修改值。通过 obj.nested.count 可以响应式的获取和修改嵌套对象的值。在使用 nextTick 函数之前可以通过 DOM 操作获取到修改之前的值，使用 nextTick 函数之后可以通过 DOM 操作获取到修改之后的值。

但是， reactive 函数有两个缺点：只能将对象类型变成响应式，无法将原始类型变成响应式；响应式系统需要通过属性访问的形式进行追踪。

Ref

为了解决 reactive 函数的两个问题，引入了 ref 函数，它可以将任意值变成响应式的，在模版和响应式对象中可以自动解包，也就是这时候不需要通过属性访问的形式进行追踪。

从上图的例子可以看出，ref 函数可以将数值变成响应式的。在模版中使用 count 会自动解包，也就是说不需要再使用 .value 的形式进行访问。把 ref 对象传入 reactive 函数中后，不需要使用 .value 的形式即可访问。

结论

Vue3 中使用了 reactive 和 ref 两个 API 实现了响应式的基础功能，改变了 Vue2 中需要使用把响应式数据放到 data 函数并通过 this 访问的方式。reactive 函数主要用在将对象类型的数据转成响应式的，而 ref 函数可以将所有类型的值转成响应式的，但是在方法中进行的时候需要加上 .value。