Vue3的ref、reactive、toRefs、toRef响应式

首先：ref和reactive都是用来声明响应式数据的。

  他们的区别在于，ref用于声明基本数据类型，而reactive用于声明引用类型数据，虽然reactive也是可以传递基础数据类型，但数据类型不会被包装成响应式数据

  以下代码为reactive的基本使用：↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 <script setup lang="ts" >
        let obj1 = {
          name: "张三",
          age: 20,
          obj: {
            name: "obj",
            subObj: {
              name: "subObj",
            },
          },
        };
     // reactive返回的响应式数据本质是Proxy对象，对象里面每一层都会被包装成Proxy对象
        let obj = reactive(obj1);
        console.log(obj, obj.obj, obj.obj.subObj);
 </script>

   以下代码为ref的基本使用：↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<script setup lang="ts" >
       let num = ref(0)
        console.log(num.value)
 </script>

PS:注意通过ref声明的变量，所以js要修改对应的值是要通过.value访问才可以，template模板不需要通过.value访问

  

toRefs 和 toRef 不会创造响应式，而是会延续响应式

  

let { name } = toRefs({ name: "你好" });//此处的toRefs中的参数并非响应式数据

let { age } = toRefs(obj);//此处的toRefs中的参数是响应式数据

当toRefs的参数并非响应式数据时，其解构出来的数据并非响应式数据，只有参数为响应式数据时，其解构出来的数据才会是响应式数据，toRef同理。

<script setup lang="ts">
        const obj = reactive({
          name: "张三",
          age: 12,
        });

        let obj1 = reactive(obj);
        //toRef有两个参数，第一个参数类型必须是object，第二个参数则是对象中的属性名
        let name = toRef(obj1, "name");
        let age = toRef(obj1, "age");
</script>

Ps：

toRef ⽤于为源响应式对象上的属性新建⼀个ref，从⽽保持对其源对象属性的响应式连接。
接收两个参数：源响应式对象和属性名，返回⼀个ref数据。

toRefs ⽤于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。
常⽤于es6的解构赋值操作，因为在对⼀个响应式对象直接解构时解构后的数据将不再有响应式，⽽使⽤toRefs可以⽅便解决这⼀问题。