vue3 toRef() toRefs()区别

左手的ㄟ右手 2021-09-09 02:50 295阅读 0赞

### 参数区别 ###

**toRef()** 接收两个参数，第一个参数是一个对象， 第二个参数是个字符串（其第一个参数的key）。  
**toRefs()** 接收一个参数， 参数为对象。

### 共同点 ###

接收的对象都是响应式对象， 也就是经过 reactive() 的对象。

ps：如果不是一个响应式对象那么返回值也无法响应化。

### 不同点 ###

**toRef()** 返回值是一个`ObjectRefImpl`对象。  
**toRefs()** 返回值是一个对象，对象的每个key的值是`ObjectRefImpl`对象。

相当于把对象的值设置为 toRef() 后的对象。如下：

let json = { 
    	name: 'this name'
    }
    let tore = toRef(json, 'name')
    let test = { 
    	name: tore  // 重点！！！
    }

使用时取值方式不一样：  
**toRef()** 经过setup return后，会自动浅解包。  
**toRefs()** 经过setup return后，不会自动浅解包。

<div>
          <button @click="cqfn"> click me</button>
          <p>{
       {q}}</p>  
          <p>{
       {cq.name.value}}</p>  
     </div>

--------------------

测试代码：

<template>
      <button @click="cqfn"> click me</button>
      <p>{ { q}}</p>   
      <p>{ { cq.name.value}}</p>   
    </template>
    
    <script>
    import {  reactive, toRef, ref, toRefs } from "vue";
    export default { 
      name: "HelloWorld",
      setup(props) { 
        let m = { 
          name: 'cyq'
        }
    
        let mm = { 
          name: 'cyssq',
          age: 22
        }
    
        let myjson = reactive(m)
        let myjson1 = reactive(mm)
        // console.log(myjson);
        let q = toRef(myjson, 'name')
        console.log(q);
        // console.log(q.value);
        let cq = toRefs(myjson1) // 参数给一个普通对象无法实现可视化
        console.log(cq);
        // console.log(cq.name.value);
    
        let cqfn =()=>{ 
          q.value = 'q name'
    
          setTimeout(e => { 
            myjson.name = 'vvvvvvvvvv'
          }, 1000)
    
    
          cq.name.value = 'cq name'
          setTimeout(e => { 
            myjson1.name = 'bbbbbbbbbbbb'
            console.log(cq.name.value); // bbbbbbbbbbbb
          }, 1000)
          
        }
        return { 
          cq,
          q,
          cqfn
        };
      }
    };
    </script>