Vue3 ref和reactive使用上的区别，toRef与toRefs函数

喜欢ヅ旅行 2023-01-13 10:58 134阅读 0赞

[https://www.cnblogs.com/kousum/p/14399280.html][https_www.cnblogs.com_kousum_p_14399280.html]

[https://blog.csdn.net/weixin\_45946340/article/details/114707697][https_blog.csdn.net_weixin_45946340_article_details_114707697] Vue3.0中ref和reactive的底层实现

在**vue3**中对**响应式数据**的声明官方给出了`ref()`和`reactive()`这两种方式

当我们给ref传递一个值之后，ref函数底层会自动将ref转换成reactive; ref(18) => reactive(\{value:18\})

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70][]

**reactive里面参数定义必须是对象或者数组(json/arr)**

![20210601212028452.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 1][]

ref和toRef的区别  
(1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据  
(2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新  
(3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性 let state = ref(obj.name)  let state2 = toRef(obj,'name')

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 2][]

toRefs将对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据关联，并且更新响应式数据的时候不更新界面，用于批量设置多个数据为响应式数据。(toRef一次仅能设置一个数据),

toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行

## 五、结语 ##

尽量不要混着用，reactive和ref选一种，toRef和toRefs选一种，不然代码会很乱。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 4][]

基本数据类型：number,string,Boolean,null,undefined

**toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据 (ref底层是reactive 会包装 Proxy)**

**常见应用场景如下：**

![16f803d2928e524943c8024e4c4e6c71.png][]

![2021050522595983.png][]

**isRef(data)、isReactive(data)  //返回 true false  判断是否是ref类型 还是reactive类型**

shallowRef、shallowReactive（也需先引入类似ref等） 表示非递归监听，浅递归  是监听的.value的变化

shallowReactive：  (只考虑第一层的响应式数据，前提数据是对象)

shallowRef：定义出来的不是响应式数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 6][]

customRef

import { customRef  } from 'vue'
    function myRef(value){
      return customRef((track,trigger)=>{
        return{
          get(){
            track()
            console.log('get',value)
            return value
          },
          set(newValue){
            console.log('set',newValue)
            value = newValue
            trigger()
          }
        }
      })
    }
    
    setup(){
        let age = myRef(18)
         function fn(){
          age.value +=1;
        }
    return{ age,fn }
    }

[https_www.cnblogs.com_kousum_p_14399280.html]: https://www.cnblogs.com/kousum/p/14399280.html
[https_blog.csdn.net_weixin_45946340_article_details_114707697]: https://blog.csdn.net/weixin_45946340/article/details/114707697
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70]: /images/20221022/b1fa6f1153b543dfaca891b00d27d603.png
[20210601212028452.png]: /images/20221022/df36e1812460475bb00b6ab9668f1764.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/5115dc1855114588ba2ba68427f36875.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/abadf4c1230f4ca5b312f3cf282846e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/75601bc723c440d4b2f47f5c2692e35a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/9cf45f72328f497b91d0654e6455acfb.png
[16f803d2928e524943c8024e4c4e6c71.png]: /images/20221022/19d0dd92c0ab4abfa5800fcf9b52b874.png
[2021050522595983.png]: /images/20221022/50ac92f8fc45488d85e728a0d0fe28ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/91bc9626db944ad382a1fd19d8a7ced7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/75d98df1238f4d21b8f01d5c62d94db7.png