四、【vue3】toRefs与toRef

1、toRefs与toRef是什么

在 Vue 3 中，toRefs 和 toRef 是两个用于处理响应式引用（Reactive references）的方法

2、toRefs

toRefs 是用来将一个响应式对象转换为一个响应式引用数组的方法。这个方法通常用于当你有一个对象，并且你想将对象的每个属性转换为一个单独的响应式引用。 例子：

<template>
  <div class="box">
    <h2>姓名：{{info.name}}</h2>
    <h2>年龄：{{info.age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>
<script lang="ts" setup name="HelloWorld">
  import {reactive,toRefs,toRef} from 'vue'
  let info = reactive({
    name:'菜鸟',
    age:3
  })
  // 使用toRefs从info这个响应式对象中，解构出name、age，且name和age依然是响应式的
  // name和age的值是ref类型，其value值指向的是info.name和info.age
  let {name,age} = toRefs(info)
  // 方法
  function changeName(){
    name.value += '*'
    console.log(name.value,info.name)
  }
  function changeAge(){
    age.value += 1
    console.log(age.value,info.age)
  }
</script>

2. toRef:

toRef 是用来将一个响应式对象转换为一个响应式引用的方法。这个方法通常用于当你有一个对象，并且你想将对象的某个属性转换为一个单独的响应式引用。 例子：

<template>
  <div class="box">
    <h2>姓名：{{ info.name }}</h2>
    <h2>年龄：{{ info.age }}</h2>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>
<script lang="ts" setup name="HelloWorld">
import { reactive, toRefs, toRef } from 'vue'
const info = reactive({
  name: 'Vue',
  age: 3
});
const ref = toRef(info, 'age');
function changeAge() {
  ref.value += 1;
  console.log('toRef~~', ref.value);
}
</script>