Vue3 – toRef 与 toRefs

简介

ref 是Vue3中的一种数据响应式对象，它可以让数据在Vue中实现数据响应的功能，但是在某些情况下，当我们需要调取某些数据时，有可能会丢失响应式的功能。

通过以下代码说明：

export default {
  name: 'App',

  setup() {

    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    return {
      name: person.name,
      age: person.age
    }
  }
}

以上代码中，我们希望在返回数据到模板使用时，不希望在模板中各种 person.xxx 的方式来表达，通常都会在 return 中配置一个简单的别名。在模板中就可以直接使用别名取得数据。

但是以上代码中是错误的：

return { 
    name: person.name, 
    age: person.age
}

 在 name : person.name 传递数据过程中，name中的数据内存地址并非指向 person.name. 而是在赋值的过程中，name 重新开辟了新的内存，用以存放 person.name 中的值。

所以 name !== person.name

这使得当我们在改变 name 中的值时，仅只改变了name中的值，而非改变 person.name 中的值，响应式功防止丢失。

toRef

toRef 的实际用途就是，希望把别名变量的内存地址，始终指向原来的变量的内存地址，而不是重新开辟新的内存地址。

import {reactive,toRef} from "vue"
export default {
  name: 'App',

  setup() {

    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    return {
      name: toRef(person, "name"),
      age: toRef(person, "age")
    }
  }
}

以上代，通过使用 toRef 后，别名 name 中的内存地址始终指向 person.name ，而不进行另开辟内存地址。当 name 的数据发生变化时，值的变化实际上是 person.name 中的值的变化。

toRefs

针对 toRef 每次只能对一个属性值进行加工的问题，Vue3 提供了一种批量加工的方法 toRefs.

toRefs 只需要传入一个 reactive 对象即可，它会自动把该 reactive 对象中的所有一级成员属性数据创建分离别名。

参考以下代码：

import {reactive,toRefs} from "vue"
export default {
  name: 'App',

  setup() {

    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    return {
      /**
       * 相当于返回以下别名,但仅分离第一级对象成员
       * 如 job 内的 j1 不会再被分离
       * name: person.name
       * age: person.age
       * job: person.job
       */
      ...toRefs(person)
    }
  }
}