Vue3 toRef函数和toRefs函数

当我们在setup 中的以读取对象属性单独交出去时，我们会发现这样会丢失响应式：

setup() {
  let person = reactive({
    name: "张三",
    age: 18,
    job: {
      type: "前端",
      salary:10
    }
  })

  return {
    name: person.name,
    age: person.age,
    type: person.job.type,
    salary:person.job.salary
  }
},

为什么呢？

因为我们返回的数据有问题，例如我们返回了 name: person.name，我们其实返回的并不是person的name 属性，而是返回的这个属性的属性值。也就是说，你返回的是 name: "张三"。

他并不是一个ref 对象，所以无法拥有响应式。

一、toRef函数

既然我们交出去的自定义数据不是ref 对象，那么我们就可以使用toRef 使这个对象中的属性值变为一个ref 对象。

使用toRef 函数之前需要先对其进行引入：

import { toRef } from "vue";

语法格式如下： 

const xxx = toRef ( 对象, "属性" );

 因此，我们上面的代码使用如下的写法才能为响应式：

setup() {
  let person = reactive({
    name: "张三",
    age: 18,
    job: {
      type: "前端",
      salary:10
    }
  })

  return {
    name: toRef(person, "name"),
    age: toRef(person, "age"),
    type: toRef(person.job, "type"),
    salary: toRef(person.job, "salary")
  }
},

二、toRefs函数

当我们想把一个对象中的所有属性都单独暴露出去，或者是将对象中的大多数属性都暴露出去，可以使用toRefs 函数。

使用toRefs 函数之前需要先对其进行引入：

import { toRefs } from "vue";

语法格式如下：

const xxx = toRefs (对象) 

我们得到的是一个对象，对象中的每一个属性都是一个ref 对象 。

 

 因此，我们在return 数据的时候可以直接使用解构赋值来方便数据的导出：

setup() {
  let person = reactive({
    name: "张三",
    age: 18,
    job: {
      type: "前端",
      salary:10
    }
  })

  return {
    ...toRefs(person)
  }
},

不过我们在模板中的是写只是少了一层person ,perosn 中的对象仍然要使用读取属性的方式去进行读取：