526互联

vue3中 toRefs和 toRef 的区别

发布时间 2023-04-06 16:16:05作者: 蓓蕾心晴
  • toRefs 是为了避免对一个响应式对象解构的时候，解构后的每个属性不具有响应性
  • toRef 是为了针对单独获取某个对象的属性的时候保持响应性，从而单独对某个对象的属性进行响应式转化
  • 针对 reactive 或者 ref 创建的响应式对象都可以使用这两个 api 进行转化
  • 注意：toRefs只能对第一层对象的属性解构的时候进行响应式转化
<script setup>
    import {
        reactive,
        toRef,
        toRefs
    } from 'vue'

    const testObj = reactive({
        a: 1,
        b: 2,
    });

  const testObj2 = ref({
        c: 3,
        d: 4,
    });

  // toRefs 的使用
  // const { a, b } = toRefs(testObj);
  // const { c } = toRefs(testObj2.value);

  // toRef 的使用
  let a = toRef(testObj, "a");
  let b = toRef(testObj, "b");
  let c = toRef(testObj2.value, "c");

  setTimeout(() => {
        a.value = 666;
    c.value = 888;
        console.log("2s后");
    }, 2000);
</script>
<template>
    <div>
       <div>{{ a }}-{{ b }}-{{ c }}</div>
    </div>
</template>