Vue3中toRef函数与toRefs函数

在Vue 3中，toRef和toRefs用于处理响应式数据。toRef函数接受一个响应式对象和一个键，返回一个只读的Ref对象。这意味着当原始数据发生变化时，toRef创建的Ref对象也会更新。

toRefs函数接受一个响应式对象(reactive对象),其转换为一个包含每个属性的Ref对象的普通对象。这样可以方便地将响应式对象的属性解构(...toRefs(reactiveObj)到Vue模板或组件中。这样，对每个属性的更新都会被反映到原始响应式对象上。

一、toRef函数

<template>
  <div>{{ person.name }}</div>
  <div>{{ person.job.city }}</div>
  <div>{{ salary }}</div>
  <button @click="salary++">涨薪</button>
</template>

<script>
import { reactive, toRef } from 'vue';
export default {
  setup() {
    const person = reactive({
      name: '张三',
      job: {
        city: '北京',
        salary:10
      }
    })
    return {
      salary: toRef(person.job.salary),
      person,
    }
  }
}
</script>

二、toRefs函数

<template>
  <div>{{ name }}</div>
  <div>{{ job.city }}</div>
  <div>{{ job.salary }}</div>
  <button @click="job.salary++">涨薪</button>
</template>

<script>
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    const person = reactive({
      name: '张三',
      job: {
        city: '北京',
        salary:10
      }
    })
    return {
      ...toRefs(person)
    }
  }
}
</script>

总结：两者的作用都是使数据能够在模板或组件代码中进行响应式处理，简化模板，toRef函数用于操作reactive对象中的一个属性(键)，而toRefs函数操作整个reactive对象，使用时将其解构出来再将响应式数据用于模板渲染以及数据操作等