toRef

toRef是什么

• toRef 可以响应对象 Object ，其针对的是某一个响应式对象（ reactive 封装）的属性prop

• toRef 和对象 Object 两者保持引用关系，即一个改完另外一个也跟着改

• toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式

  //普通对象
  const state = {
  	age: 20,
  	name: 'monday'
  }
  //响应式对象
  const state = reactive({
      age: 20,
      name: 'monday'
  })
  

我们通过 reactive 来创建一个响应式对象，之后呢，如果只单独要对响应式对象里面的某一个属性进行响应式，那么使用toRef 来解决

用 toRef(Object, prop) 的形式来传对象名和具体的属性名，达到某个属性数据响应式的效果

toRefs是什么

• 与 toRef 不一样的是， toRefs 是针对整个对象的所有属性，目标在于将响应式对象（ reactive 封装）转换为普通对象
• 普通对象里的每一个属性 prop 都对应一个ref
• toRefs 和对象 Object 两者保持引用关系，即一个改完另外一个也跟着改

<template>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ salary }}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="salary++">涨薪</button>
</template>

<script>
import {reactive, toRef, toRefs} from 'vue'

export default {
  name: 'Demo',
  setup() {
    // 数据
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    // 返回一个对象（常用）
    return {
      // person
      name:toRef(person,'name'),
      age:toRef(person,'age'),
      salary: toRef(person.job.j1,'salary'),
      ...toRefs(person)
    }
  },
}
</script>

• 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性
• 语法：const name = toRef(person,'name')
• 应用：要将响应式对象中的某个属性单独提供给外部使用时
• 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

与 ref 不一样的是， toRef 和 toRefs ，它们不创造响应式，而是延续响应式。