轻松整懂VUE3中ref、reactive、toRef、toRefs

首先，我们要知道的是ref、reactive、toRef、toRefs都属于VUE3中Composition API的新特性。
响应式是什么意思？
响应式是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

---

ref

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

由图看出来ref没有更改被引用的数据

reactive

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

原有的数据也会被改变

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

toRef

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

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

数据是相互响应

有人又会问了，那如果说toRef只是把这个响应式对象的属性包裹成ref对象，那我直接用ref这个对象不就可以了吗？何必要用toRef呢。
答：ref是不会去更改原数据的，ref本质是拷贝原数据，而toRef会修改原数据！！

实际使用就看自己的了~

---

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref*。

这句官方定义我都读了很久没太懂啥玩意儿啊？别怕，我给你解释一下
批量版的toRef
toRef不是只能对象中的一个属性嘛，这个可以直接给你整个对象的属性都一起给整成ref。

和toRef的区别，在使用的时候注意要加上xxx.属性名.value

正常使用

总结：toRefs和toRef没啥区别，就是批量和单个的区别。也是相互响应

---

关于ref、reactive和toRef、toRefs的区别

ref、reactive数据更新后立马会更新HTML视图。
toRef、toRefs更新会后会等下次更新视图的时候更新视图

  setup() {
    let people = reactive({ name: "mika", age: "22" });
    let people2 = toRef({ name: "我是变之前的2" }, "name");
    let people3 = toRefs({ name: "我是变之前的3" });
    const refsclick = () => {
      people.name = "我来证明你们变了";
      console.log(people.name);
      console.log(people2.value);
      console.log(people3.name.value);
      setTimeout(() => {
        people.name = "我来证明你们变了";
        people2.value = "我是变之后的2";
        people3.name.value = "我是变之后的3";
        console.log("--修改后--");
        console.log(people.name);
        console.log(people2.value);
        console.log(people3.name.value);
      }, 1000);
    };
    return { refsclick, people, people2, people3 };
  },

变化之前的效果:

点击后变化之后的输出和效果：

可以看出来，即使数据已经变化了，但是视图是没有变化的。
然后我把people.name = "我来证明你们变了";放到setTimeout里面

视图变了

总结：
如果利用toRef、toRefs将某一个对象中的属性变成了响应式的数据(reactive、ref包裹的数据)
我们修改响应式的数据是会影响原始数据的
如果数据是通过toRef创建的，修改值后，数据不会触发视图，会等下次更新视图的时候一起更新

---

以上，差不多应该能搞懂这几个api了。如有什么问题请留言~