vue3的ref、reactive、toRefs特性详解

了解ref()、reactive()这两个特性之前，我们先回顾一下vue2中data和method方法。在vue2中我们定义一个响应式变量name，通过点击事件handle来改变name的值是通过如下方式写的。这样只要name改变则界面相应的会发生改变，这就是数据的双向绑定。

那么在vue3.0中，我们怎么定义响应式变量呢？我们下面对ref()、reactive()、toRefs()这三个方法进行讲解。

1、ref() 函数

我们先理解一下最简单的ref。
ref就是把string、Number、Boolean、Symbol类型的数据添加响应式
接受一个原始值，返回一个具有响应式的对象，具有value属性。他的值就是传递的原始值。
修改的话直接修改 xx.value
源数据的值不会被更改，并且数据变化会立马改变HTML

2、reactive() 函数

理解完ref,再来理解一下和ref相对应的reactive
reactive也很好理解，就是传入对象，把传入的对象变成响应式的对象。增删改查和深度的增删改查都会触发响应式从而改变视图。
但是响应式的对象值改变了，原有的数据也会被改变。HTML视图也会实时更改

顺便说一下ref,也可以接收对象。源码会自动判断传入的值，如果是对象会自动变成reactive包裹。

toRef

toRef是用来给抽离响应式对象（被reactive包裹的对象）中的某一个属性的，并且把这个属性包裹成ref对象，使其和原对象产生链接。
或许有人就回有人有疑问了？这个toRef存在有什么意义呢？因为我们知道reactive包裹的东西其实已经有了响应式了，再用toRef什么意义呢？

如图：我们如果要单独把对象中的某个值拿出来，如果直接赋值，会断掉响应式（people3）。就算后面people.name的名字改了，但是因为断掉了响应式，输出的还是原有的名字。
而使用toRef会保持对其源 property 的响应式连接。
并且响应是互相的，数据源数据也会被更改
数据会实时更新到HTML视图上（这里会更新到html视图主要还是因为是reactive包裹了，为什么这么说，我最后有提到）