vue3 toRef() toRefs()区别

参数区别

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>  <!-- toRef() -->
      <p>{{cq.name.value}}</p>  <!-- toRefs() -->
 </div>

---

测试代码：

<template>
  <button @click="cqfn"> click me</button>
  <p>{{q}}</p>   <!-- toRef() -->
  <p>{{cq.name.value}}</p>   <!-- toRefs() -->
</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>